发表于： 2017-03-03 21:45:37
1 506
任务六
今天完成的事情
- 给任务五的结构添加样式，并完成任务五
- 理清flex宽度的计算问题。
- 使用flex布局的最新语法完成header和footer固定布局。
具体代码如下
结构代码<body class="Site">
<header></header>
<main class="Site-content"></main>
<footer></footer>
</body>
css代码如下*{
margin: 0;
padding: 0;
}
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
header{
height: 100px;
background-color: rebeccapurple;
}
footer{
height: 100px;
background-color: greenyellow;
}
原理和昨天的一样，header和footer的高度固定，中间的main高度自适应。重要的属性有这几个，min-height: 100vh;设置高度为浏览器窗口高度。flex: 1;高度自适应，flex-direction: column;项目排列方式为垂直方向排列。还要注意一点的是结构，父容器的子元素才会自动转换为项目。
明天计划的事情
- 完成任务六样式编写，并使用媒体查询实现电脑端和手机端一样的效果。
- 学习并理解bootstrap的栅格布局。
遇到的问题
- flex布局的时候子项目在使用pading或者存在其他有宽度元素的情况下，项目并不能等分。假设父级宽度为100px，有两个子元素并且flex:1，第一个子元素有pading：10px,此时两个子元素的宽度并不登分；因为flex布局的宽度计算是根据剩余的空间来分配的，所以第一个子元素的宽度是20px+40px。解决方案是在项目里面在嵌套一个div或者不用padding。
收获
- 学会了box-sizing: border-box属性，该属性可以使width不受padding影响，在百分比布局的时候非常有用，下面是兼容性写法。
- -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; - 小课堂上师兄讲解了媒体查询的用法与实践，并且写了一个类似bootstrap栅格的demo，帮助我更好的理解了bootstrap框架。
- 高度不固定下垂直居中的方法。先使用绝对定位top50%，然后使用transformY(-50%),这样就可以实现垂直居中的效果。
返回列表
评论