【css盒子模型】

盒子模型

页面布局主要学习三大核心：盒子模型、浮动、定位
1.看透网页布局的本质：利用css摆盒子
网页布局过程：

1）准备好相关的网页元素，网页元素基本都死盒子box
2) 利用css设置盒子样式，然后放到相应位置
3）往盒子里面装内容

2.盒子模型的组成

盒子模型：把html页面布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

css盒子模型本质是一个盒子，封装周围的html元素，包括：边框、外边距、内边距和实际内容

元素	元素
border	边框
content	内容
padding	内边距
margin	外边距

3.边框
border可以设置元素的边框，边框有3部分组成：边框宽度（粗细）、边框样式、边框颜色

border： border-width||border-style||border-color;

style属性	作用
solid	实线
dashed	虚线
dotted	点线

边框的复合写法(即简写）：

border：1px soloid pink;

边框的分开写法：

border-top:1px soloid pink;

4.表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
语法格式：

border-collapse: collapse;

• collapse是合并的意思 border-collapse: collapse；
• 表示相邻边框合并在一起

5.边框会影响盒子实际大小

• 测量盒子大小的时候不量边框
• 如果测量的时候包含了边框，则需要width/height减去边框宽度

6.内边距

padding属性用于设置内边距，即边框与内容之间的距离 padding-left/right/top/bottom 即左/右/上/下

1）padding复合属性

属性	意义
padding：x y z w;	顺时针即上x右y下z左w
padding：x y z ;	上x 左右y下z
padding：x y;	上下x左右y
padding：x ;	上下左右x

2）padding注意点

• 内容和边框有了距离，添加了内边距
• padding影响盒子实际大小，则会撑大盒子
• 解决方案：用width/height减去padding

3）padding不会影响盒子大小的情况

盒子本身没有指定width/height情况，则此时padding不会撑开盒子大小

7.外边距（margin)
1）相邻块元素垂直外边距的合并
margin属性用于设置外边距，即控制盒子和盒子之间的距离
margin-left/right/top/bottom 即左/右/上/下外边距
maigin简写方式与padding完全一致
外边距可以让块级盒子水平居中的条件：

• 盒子必须指定了宽度
• 盒子外边距都设置为auto

常见写法： margin-left:auto; margin:auto; margin:0 auto;
注：此种写法只针对块元素

行内元素或者行内块元素水平居中给其父添加text-aligent：center即可

2）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：

• 为父元素定义上边框
• 为父元素定义上内边距
• 为父元素添加over-flow:hidden;
  
  

8.清除内外边距
网页元素带有很多默认的内外边距，不同浏览器默认也不一致
语法格式：

* {
     margin：0；
     padding:0;
  }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了