CSS盒子模型

目录

盒子模型

1.1 看透网页布局的本质

1.2 盒子模型（box model）组成

1.3 边框border

 1.3.1 表格的细线边框

1.3.2 边框会影响盒子的实际大小

1.4 内边距padding

1.5 外边距 margin

1.5.1 块级盒子水平居中

1.5.2 外边距合并

1.6 清除内外边距（CSS首写）

---

盒子模型

1.1 看透网页布局的本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子Box
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

1.2 盒子模型（box model）组成

把HTML页面中的布局元素看作是一个矩形的盒子

包括：边框（border），外边距（margin），内边距（padding），实际内容（content）

1.3 边框border

border可以设置元素的边框。由三部分组成：边框宽度（粗细），边框样式（实心），边框颜色

border：border-width || border-style || border-color ；

border-width：定义边框粗细，单位是px

border-style ：边框的样式，是实心还是...solid实线边框 dashed虚线边框  dotted点线边框

border-color：边框颜色

 边框简写： border：1px pink solid ； 没有顺序

 边框分开写法

 1.3.1 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，可以控制相邻单元格的边框

border-collapse：collapse；  //是合并的意思，表示相邻边框合并在一起

1.3.2 边框会影响盒子的实际大小

     边框会增加盒子的实际大小，因此我们有两种解决方案：

1. 测量盒子大小的时候，不量边框
2. 测量的时候包括了边框，width和height需要减去边框宽度

1.4 内边距padding

         用于设置内边距，即边框与内容之间的距离

        padding-left:20px;    //左内边距 right右边  top上边 bottom 下边

        

         padding的简写属性：顺时针来转

 padding内边距会影响盒子实际大小：让宽度width和高度height减去内边距大小即可

如果盒子本身没有指定width、height属性，此时padding不会撑开盒子大小

1.5 外边距 margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

 margin简写跟padding一样

1.5.1 块级盒子水平居中

外边距可以让块级盒子水平居中：

1. 盒子必须指定了宽度（width）
2. 盒子左右的外边距都设置为auto

        width:900px;   margin:0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中 给其 父亲元素添加 text-align：center ；即可 

1.5.2 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

主要有：①相邻块元素垂直外边距的合并  ②嵌套块元素垂直外边距的塌陷

相邻块元素垂直外边距的合并（上下）

      当上下两个相邻的块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是之和，而是取两个值中的较大者为他们之间的距离

        解决方案：只给一个盒子添加外边距margin值

嵌套块元素垂直外边距的塌陷（里外)

         对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值，子元素不变

        解决方案：

1. 可以为父元素定义上边框   /* border: 1px solid transparent; */

2.  可以为父元素定义上内边距    /* padding: 1px; */

3. 给父元素添加overflow：hidden   

1.6 清除内外边距（CSS首写）

        网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。所以我们在布局前，首先要清楚下 网页元素的内外边距。

        这是我们CSS的首行要写的代码 去除内外边距

        * {
            margin: 0;
            padding: 0;
        }

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

1.7 margin用于块与块之间，可以用来调上下边距