CSS布局：盒子模型

html 中几乎所有元素都是矩形盒子，对页面的布局就是将不同的盒子摆放到不同的位置

块元素盒子模型 link

细节总结

• 块元素支持所有样式，可以设置宽高，如果不设置，宽度默认为父级的100%，高度由内容撑起
• 设置了宽高的块元素，只要该元素在文档流，其内子元素如何浮动定位溢出，都不会影响该块元素的同级元素的布局
• 块元素如果没有设置高度，高度由内容撑起，高度由文档流中的最后一个子元素决定
• 内容区（content） 内边距（padding） 边框（border） 外边距（margin）
• 内边距、边框和外边距都是可选的，默认值是0
• 外边距可以是负值，而且在很多情况下都要使用负值的外边距
• 盒子的可见框大小由内容区，内边距，边框共同决定，设置100*100的盒子即可见框为100*100
• 盒子占用的空间由内容区，内边距，边框，外边距共同决定
• width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响盒子的容积，但是会增加盒子的总尺寸
• 块元素盒子若设置了宽度，视觉上没有独占一行，但浏览器会会自动的添加margin使其独占一行空间
• 行内元素垂直方向上的padding margin border不会影响页面布局

内容区 content

• 元素中的所有子元素和内容都在内容区中排列
• 内容区的大小由height和width两个属性设置
• width 和 height 设置的是内容区域的宽度和高度

边框 border link

• border 属性连写，边框样式必写，如果没有样式，将没有边框
• border-style 设置边框样式，可单独为各边设置不同边框样式，如果没有样式，将没有边框
• border-width 设置边框宽度，可单独为各边设置不同边框宽度，上右下左
• border-color 设置边框颜色，可单独为各边设置不同边框颜色，上右下左

内边距 padding link

• padding 属性定义元素边框与元素内容之间的空白区域
• padding 属性接受长度值或百分比值，但不允许使用负值
• 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上
• 可以同时设置4个相同内边距，也可以分别设置4个不同内边距

外边距 margin link

• 围绕在边框外的空白区域是外边距，外边距会在元素外创建额外的“空白”
• margin 属性接受任何长度单位、百分数值甚至负值
• 可以同时设置4个相同外边距，也可以分别设置4个不同外边距
• 内外边距的百分比数值是相对于其父元素的 width 计算的
• 设置元素水平居中： margin:x auto
• margin负值让元素位移及边框合并
• 垂直方向外边距合并。即两个盒子一个设置下外边距，一个设置上外边距，取设置较大的值
• padding会影响盒子可见框大小

块元素margin居中（水平方向）

基本原理

• 块元素盒子在其父元素中水平方向的位置由width，左右padding，左右border，左右margin 共同决定
• 块元素在其父元素中，水平方向必须满足 width+左右padding+左右border+左右margin = fu父元素内容区宽度
• 若是这几个属性的和小于父元素内容区宽度，浏览器会自动加margin
• 基于以上原理，块元素设置左右margin为auto，浏览器会自动调整左右margin使块元素居中
• 行内元素和行内块由于不会独占一行，浏览器不会自动加margin，所以不会居中

实践案例‘

• 父元素内容区宽度为800，其内块元素width为200，其他均未设置
• 0+0+0+200+0+0+0 = 800，显然不成立，此时浏览器会将右margin设置为auto，那么右margin为600
• 200+0+0+auto+0+0+200=800，那么width为400
• auto+0+0+200+0+0+auto = 800，那么左右margin为300，实现盒子居中
• -200+0+0+200+0+0+0 = 800，将左margin设为-200，盒子左移并超出父盒子200xp，此时浏览器会将右margin设为auto即800以满足等式
• 0+0+0+auto+0+0+auto = 800 如果将width和右margin都设置为auto，则优先width设为最大，右margin为0

元素溢出（垂直方向）

• 子元素是在父元素内容区中排列的，如果子元素的大小超过父元素，则会从父元素中溢出
• 即使子元素从父元素中溢出，但是子元素并没有影响到父元素的高度（设置了高度），因此并不会影响父元素在文档流的排版
• 可以使用 overflow 属性来设置父元素如何处理溢出的子元素

块元素垂直外边距合并（垂直方向） link

• 外边距合并指的是，当两个垂直外边距相遇时，它们将合并成一个外边距（只有垂直方向有）
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
• 结论，只要 margin 直接接触，就会发生合并

兄弟元素

兄弟元素的外边距重叠对于开发是有利的，所以我们不需要进行处理

• 上下margin直接接触，发生重叠，取较大者
• 如果相邻外边距一正一负，直接接触，则取两者的和
• 如果相邻外边距都是负值，直接接触，则取绝对值较大者

父子元素（诡异）

父子元素的外边距重叠会影响到页面布局，所以我们需要进行处理

• 父子元素 (父元素无padding和border)，由于外边距直接接触，发生外边距合并，显示效果就好像给父元素添加一个上外边距
• 根本原因是 margin 直接接触，发生了外边距合并

父子元素解决方法（margin-top 塌陷）

• 外部盒子设置一个border 或 padding，不让 margin 直接接触
• 外部盒子设置 overflow:hidden
• 外部盒子使用伪元素类：（最常用）

.clearfix:before{
    content: '';
    display:table;
}

行内元素盒子模型

细节总结

• 行内元素不支持设置宽高，宽高由内容撑开
• 不会独占一行，与其他行内元素一行显示，从左到右排列
• 代码换行，行内元素之间会产生间距
• 行内元素可以设置padding，但垂直方向上的padding不会影响页面布局
• 行内元素可以设置border，但垂直方向上的border不会影响页面布局
• 行内元素可以设置margin，但垂直方向上的margin不会影响页面布局，而且由于margin默认透明，视觉上相当于上下margin没起作用

解决行内元素间隙的方法

• 去掉行内元素之间的换行
• 将行内元素的父级设置font-size为0，行内元素自身再设置font-size

padding测试

margin测试

display 属性 link

html可以将元素分类方式分为行内元素、块元素和行内块元素三种，使用display属性能够将三者任意转换

• none 此元素不会被显示
• display:inline;转换为行内元素
• display:block;转换为块元素
• display:inline-block;转换为行内块元素
• 还有很多值，但不常用，如 table 等

行内块状特征

• 支持全部样式
• 可以设置宽高，如果不设置，行内块元素的宽高就是内容撑开的宽高
• 不会独占一行，与其他行内元素一行显示
• 默认排列方式为从左到右
• 代码换行，行内块元素之间会产生间距

盒子模型补充

盒子的大小

• 默认情况下，盒子的可见框大小由内容区，内边距，边框共同决定

• box-sizing 属性可设置为盒子可见框大小是否由 height 和 width 决定

盒子轮廓

• outline用来设置元素的轮廓线，用法和border一样
• outline不会影响布局，轮廓线可能会覆盖其他元素，border会增大盒子的占用空间影响布局
• outline用的不多，常用在伪元素鼠标移入时显示轮廓线

盒子阴影 link

• box-shadow，设置盒子阴影，不会影响页面布局
• 如果不设置偏移量则阴影在盒子正下方，视觉上看不到
• 前两个值代表偏移量，可以是负值
• 第三个值代表阴影的模糊半径，越大越模糊

盒子圆角

• border-radius 属性设置盒子圆角
• 值为圆角半径，可以将盒子变为圆形，50%
• 可以分别指定四个角的圆角半径