CSS详细基础教程-03-盒子模型

css盒子模型

目标

注：目标后三项，写于CSS详细基础教程-04-圆角边框、盒子阴影、文字阴影

盒子模型

页面布局要学习三大核心，盒子模型、浮动和定位。

学习好盒子模型能非常好的帮助我们布局页面

1. 看透网页布局的本质

   网页布局过程

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

   网页布局的核心本质：就是利用css摆盒子

2. 盒子模型组成

   包括：边框、外边距、内边距和实际内容

3. 边框（border）

   边框的三部分组成：边框宽度（粗细） 、边框样式、边框颜色

   • border-width 单位是px
   • border-style ：none | solid（实线边框）| dashed（虚线边框）| dotted（点线）
   • border-color 边框的颜色

   边框的复合写法（简写）：

   边框可以分开写：

4. 表格的细线边框

   border-callapse：表示相邻边框合并在一起

5. 边框会影响盒子的大小

   

6. 内边距

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

   padding-left、right、top、bottom

   属性值简写：

   

   注：内边距会影响盒子的实际大小；需要让width、height减去多出来的内边距大小；盒子本身没有指定width、height属性，则此时padding不会撑开盒子大小

7. 盒子模型的外边距

   外边距，即控制盒子与盒子之间的距离

   margin的简写方式代表的意义与padding完全一致

• 外边距典型应用

  1. 外边距可以让块级盒子水平居中，必须满足两个条件：

     盒子必须指定了宽度width

     盒子左右的外边距都设置为auto

     

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

8. 外边距合并

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

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

     解决方案：

     可以为父元素定义上边框

     可以为父元素定义上内边距

     可以为父元素添加overflow：hidden

     使用浮动、定位、绝对定位等

9. 清除内外边距

   这是css的第一行代码

   

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

​

​