我正在参加「掘金·启航计划」
设计场景
-
视图中包含多个大区块，每个区块都占据了整个视口的宽度，区块的背景也各不相同
-
内容是定宽的，即使在不同的分辨率下的宽度不一样，那也是通过媒体查询来改变的这个固定的宽度值；在某些情况下，不同区块的内容也可能具有不同的宽度
应用场景
-
整个视图都是由这种风格的多个区块组成
-
某个特定的区域以这种风格来设计，典型的
页脚或页头
常规方案
-
实现思路
为每个区块准备两层元素，外层用来实现满幅的背景，内层用来实现定宽的内容
-
结构代码
<footer> <div class="container">内容区域</div> </footer> -
风格代码
footer { background-color: #333; } .container { max-width: 1080px; margin: 0 auto; } -
margin属性的作用
通过
auto值实现左右边距，相当于视口宽度的一半-内容宽度的一半
优化方案
-
实现思路
一层结构，通过风格的计算属性设置左右内边距
-
结构代码
<footer>内容区域</footer> -
风格代码
footer { padding: 10px calc(50% - 540px); background-color: #333; } -
注意事项
calc()函数中必须用空格把-和+符号隔开，否则会产生解析错误一起学习，加群交流看 沸点
