CSS基础知识（七）盒子模型

一、盒子模型

1.网络布局要学习三大核心，盒子模型，浮动和定位
2.网页布局的核心本质：利用CSS摆盒子
3.网页布局过程：
a. 先准备好相关网页元素，网页元素基本都是盒子
b.利用CSS设置好盒子样式，然后摆放到相应位置
c.往盒子里面装内容
4.盒子模型（Box Model）组成
a.CSS盒子模型本质上是一个盒子，封装周围的HTML元素
b.边框（border）内容（content） 内边距（padding）外边距（margin）

二、边框（border）

语法  border：boder-width | border-style | border-color

1.边框粗细（border-width）

定义边框粗细，单位为px

2.边框样式（border-style）

属性值	样式
none	默认值，没有
solid	实线边框
dashed	虚线边框
dotted	点线边框
double	双线边框

3.表格细线边框（border-collapse）

border-collapse：collapse;

• border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
• collapse是合并的意思，表示相邻边框合并在一起
• 

4.边框的复合型写法

border：1px solid red; (无顺序）

5.边框分开写法

border-top：5px solid red;

6.层叠性

上边为红色，其余三边为蓝色，可用就近原则

注意：边框会影响盒子实际大小

三、内边距（padding）

• 设置内边距，即边框与内容之间的距离
• padding-left是左内边距，padding-right是右内边距，padding-top是上内边距，padding-top是上内边距，padding-bottom是下内边距
• padding简写

语法	表示含义
padding：5px;	上下左右都有5px内边距
padding：5px 10px;	上下内边距为5px,左右内边距为10px
padding:5px 10px 20px	上内边距为5px,左右为10px,下为20px
padding:5px 10px 20px 30px;	上内边距为5px, 右为10px,下为20px,左为30px(顺时针）

• padding影响盒子实际大小
• 若盒子已经有了宽或高，此时再指定内边框会撑大盒子；若盒子本身没有指定宽或高，则此时padding不会撑开盒子
• 当字数不同时可以给盒子一个padding值
  

四、外边距（margin）

• 设置外边距，即控制盒子和盒子之间的距离

• 左外边距（margin-left）右外边距（margin-right）上外边距（margin-top）下外边距（margin-bottom）

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

• 

• 外边距可以让块级盒子水平居中，但必须满足两个条件：
  a.盒子必须指定宽度
  b.盒子左右的外边距都设为auto
  此方法让块级元素水平居中，行内元素或行内块元素水平居中要给其父元素添加text-align:center即可