CSS的盒子模型

1.盒子模型

页面布局的三大核心：盒子模型、浮动、定位

1.1 看透网页布局的本质

网页布局的过程

1. 先准备好想管的网页素材网页元素基本上都是BOX
2. 利用CSS设置好盒子样式，摆放到相应位置
3. 往盒子内装内容

核心：设置盒子的CSS的样式

1.2 盒子模型 (box model) 组成

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

border 边框 蓝色区域

content 内容 橙色区域

padding 内边距 黄色区域

margin 外边距 绿色区域

1. 边框（border）

边框有三部分组成

border: border-width | border-style | border-color

border-width 边框粗细，一般用px做单位

border-style 边框样式，设置边框虚线、实线之类的参数（none，solid实线、dashed 虚线等、dotted 点线）

border-color 边框颜色

边框的符合写法

border: width style color 没有先后顺序，通常按照以上写法写

PS:

border: 1px solid red

4条边框可以分开写

border-top   #上边框
border-bottom#下边框
border-right#右边框
border-left    #左边框

表格的细线边框

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

border-collapse:collapse;
# 合并相邻边框

1.3.1 边框会影响盒子实际大小

1. 测量的时候不带边框
2. 测量的时候测量边框，按照实际大小

2. 盒子内边距(padding)

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

padding-top   #上内边距
padding-bottom#下内边距
padding-right#右内边距
padding-left    #左内边距

值的个数	表达意思
padding:5px;	一个值，上下左右都是5像素内边距
padding:5px 10px;	两个值，上下边距都是5像素，左右内边距是10像素
padding:5px 10px 20px;	三个值，上内边距5px，下内边距20px，左右内边距10px
padding:5px 10px 20px 30px;	四个值，上5像素、右10px，下20px，左30px，顺时针

如果盒子已经有大小，再增加内边距会撑大盒子

解决方法：width/height减去内边距

如果未指定width/height则padding不会撑开盒子

3. 外边距（Margin）

margin 设置外边距，即边框与边框之间的距离

margin-top   #上内边距
margin-bottom#下内边距
margin-right#右内边距
margin-left    #左内边距

margin的简写方式和padding完全一致

1.3 块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足2个条件

1. 盒子必须指定了宽度

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

   .header {
       width:960px;
       margin:0 auto;
   }

行内元素、行内块元素无法使用。想对齐，需要使用text-align: center;

1.4 外边距合并

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

嵌套盒子——外边距塌陷问题

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

无法避免

解决方案

1. 父元素指定边框
2. 父元素定义上内边距
3. 父元素添加 overflow:hidden

还有其他方法，例如 浮动、固定、绝对定位

1.4 清除盒子的内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。

因此在布局前，首先要清除下网页元素的内外边距。

* {
    padding:0; /* 清除内边距 */
    margin:0;/* 清除外边距 */
}
​
/* CSS的第一行代码 */

注意∶行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

但是转换为块级和行内块元素就可以了