基本布局
- 绝对布局
- 主内容随页面宽度，固定边栏
- 缺点：浏览器变宽的时候，页脚可能会遮住边栏，同时浏览器变宽后，主内容区和边栏的比例会不协调。
- 表格显示布局
- 使用table标签，随窗口缩放
- 缺点：对于语义化不利
- 浮动布局
- 一侧固定宽度浮动，一侧添加外边距
- 缺点：同样来自页面变宽的挑战
- 凝胶布局
- 主内容区建立后，设置左右margin为0
- 缺点：对于页面的利用率不充足
- 其他布局
盒子模型
- 关于边框折叠
两个垂直外边距相遇时，会碰到一起，即便是元素嵌套也不例外进行折叠，试试一些特殊情况：
- 上面的div有20px的边距，下面的有10px的边距，此时折叠，依然是20px的边距。但是如果此时把下面的元素设置为float，那么两者的边框不会折叠。
- 考虑这种情况，一个元素嵌套一个元素，此时依然是折叠的，但如果此时为外边的元素设置了边框，那么内外元素边距不折叠
2.box-sizing的用法
选择器优先级
特定性
- 分三个位置，选择器包含id，第一位加一，第二个位置为class，伪类。第三个位置为元素名，一个元素名加一，最后按照结果大小排序，对于依然冲突的规则，按照先后顺序，后出现的覆盖之前的
网友评论