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）

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影响盒子实际大小

• 若盒子已经有了宽或高，此时再指定内边框会撑大盒子；若盒子本身没有指定宽或高，则此时padding不会撑开盒子

• 当字数不同时可以给盒子一个padding值

四、外边距（margin）

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

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

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

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