发表于: 2018-10-21 23:08:14

2 774


今天完成的事情:今天是线下入学第一天,请教了师兄很多问题,发现我之前学的知识很不扎实。先说任务四header部分,中间文字要水平和垂直居中而且在改变窗口分辨率的时候两边文字外边距不变,之前用的是三个盒子,两边的各向边框方向浮动,然后中间盒子绝对定位左右距离为零实现水平居中,然后top值实现垂直居中。

div{
font-weight: bold;
font-size: 15px;
}
.header-left{
float: left;
margin: 15px;
}
.header-middle{
position: absolute;
top: 13px;
left: 0PX;
right: 0PX;
font-size: 18px;
}
.header-right{
margin: 15px;
float: right;
}

其实中间的盒子可以直接换成标签span,然后用text-align=center实现水平居中,从浏览器了得到数据两部盒子整体高度为50px,设置行间距离line-height=50px实现垂直居中。

.header-middle{
font-weight: bold;
font-size: 16px;
line-height: 50px;
text-align: center;
}

然后是之前没有细致了解的一些知识:inline-block元素是可以与行内元素在同行并列而且可以设置宽高,可以设置margin和padding,比如img、video、input、textarea、button;然后rem作为相对尺寸,他所相对的是根元素(html)的font-size,这个尺寸有变化rem与px的比例还会有变化,还有body默认是宽度100%,一个包含块里如果只有元素,而且它还是绝对定位,这个包含块的高度就会为零,原因是脱离了文档流,无法撑起父级元素的高度,如果有其他文档流元素就可以撑起来高度。css的选择器的优先级是在属性后面加!importent>在元素内用style表现的样式>id选择器>类选择器>标签选择器>通配符选择器>浏览器自定义和继承的样式,配置nginx文件里 其实可以写很多端口代码,就可以都可以访问多个文件,不用每次都去改。

明天计划的事情:明天继续研究深度思考的问题,然后细致的学习一边盒模型,还有浮动,以及相对定位,绝对定位,固定定位。

遇到的问题:很多代码写出来实现了任务的要求,但是不知道其中具体的原理,通过师兄的讲解,已经明白了很多。
收获:了解到以前学习的有多粗糙,以后要更加细致得学习。


返回列表 返回列表
评论

    分享到