盒子布局
盒子的水平布局
盒子的垂直布局
- 默认情况下:父元素的高度被内容撑开
子元素是在父元素的内容区中排列的
- 如果子元素的大小超过了父元素,则子元素会从父元素中溢出
使用overflow 属性设置父元素如何处理溢出的子元素
- 可选值
- visible 默认值 子元素会从父元素中溢出,在父元素外部的位置溢出
- hidden 溢出的内容将会被裁剪,不会显示
- scroll 生成两个滚动条,通过滚动条来查看完整的内容
- auto 根据需要生成滚动条
- overflow-x:单独处理水平方向
- overflow-y:单独处理垂直方向
外边距折叠问题
-
相邻的垂直方向外边距会发生重叠现象
-
兄弟元素:
- 兄弟元素之间相邻,垂直外边距会取两者之间的最大值(两者都为正值)
特殊情况:如果相邻的外边距一正一负,则取两者之和
? 都是负值,则取两者中绝对值较大的
-
父子元素:
- 父子元素间相邻外边距,子元素的会传递给父元素(上外边距)需进行处理
- 处理方式详见浮动中高度塌陷的解决方案
行内元素的盒模型:
-
行内元素不支持设置宽度和高度
-
行内元素可以设置 padding ,但是垂直方向 padding 不影响页面的布局
-
行内元素可以设置 margin ,但是垂直方向 margin 不影响页面的布局
-
行内元素可以设置 border ,但是垂直方向 border 不影响页面的布局
原文链接:http://www.cnblogs.com/codehan/p/14699850.html