CSS——盒子模型

1. 盒子模型的介绍

1.1. 盒子的概念

• 页面中的每一个标签，都可看做是一个"盒子"，通过盒子的视角更方便的进行布局
• 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

1.2. 盒子模型

• CSS 中规定每个盒子分别由：内容区域（ content )、内边距区域（ padding )、边框区域（ border )、外边距区域（ margin ）构成，这就是盒子模型

如下图去理解盒子模型：

2. 内容的宽度和高度

• 作用：利用 width 和 height 属性默认设置是盒子内容区域的大小
• 属性： width / height
• 常见取值：数字＋ px

3. 边框（ border )

3.1. 边框（ border )-连写形式

• 属性名： border
• 属性值：单个取值的连写，取值之间以空格隔开

如： border :10px solid red ;（边框粗细 边框样式 边框颜色）

3.2. 边框（ border )﹣单方向设置

• 场景：只给盒子的某个方向单独设置边框
• 属性名： border ﹣方位名词
• 属性值：单个取值的连写，取值之间以空格隔开

3.3. 边框（ border )﹣单个属性

• 作用：给设置边框粗细、边框样式、边框颜色效果
• 单个属性：

作用	属性名	属性值
边框粗细	border - width	数字＋ px
边框样式	border - style	实线 solid 、虚线 dashed 、点线 dotted
边框颜色	border - color	颜色取值

3.4. 盒子实际大小

4. 内边距（padding）

5. 外边距(margin)

6. 盒子模型实际所遇到的问题

6.1. CSS3盒模型（自动内减）

• 问题：给盒子设置 border 或 padding 时，盒子会被撑大，如果不想盒子被撑大？
• 解决方法①：手动内减

操作：自己计算多余大小，手动在内容中减去

缺点：项目中计算量太大，很麻烦

• 解决方法②：自动内减

操作：给盒子设置属性 box - sizing : border - box ；即可

优点：浏览器会自动计算多余大小，自动在内容中减去

6.2. 清除默认内外边距

• 场景：浏览器会默认给部分标签设置默认的 margin 和 padding ，但一般在项目开始前需要先清除这些标签默认的 margin 和 padding ，后续自己设置
• 比如： body 标签默认有 margin :8px

p 标签默认有上下的 margin

ul 标签默认由上下的 margin 和 padding - left……

• 解决方法：

方法一（京东代码）
*{
margin:0;
padding:0;
}
方法二（淘宝网代码）
blockquote, body, button, dd, dl, dt, fieldset, form,
h1,h2,h3,h4,h5,h6, hr, input, legend, li, ol, p, pre, 
td, textarea, th, ul{
margin:0;
padding:0;
}  

6.3. 版心（盒子div）居中（版心：网页有效的内容）

margin:0 auto;

6.4. 外边距折叠现象﹣合并现象

• 场景：垂直布局的块级元素，上下的 margin 会合并
• 结果：最终两者距离为 margin 的最大值
• 解决方法：避免就好

只给其中一个盒子设置 margin即可

6.5. 外边距折叠现象﹣塌陷现象

• 场景：互相嵌套的块级元素，子元素的 margin - top 会作用在父元素上
• 结果：导致父元素一起往下移动
• 解决方法：

a.给父元素设置 border - top 或者 padding - top （分隔父子元素的 margin - top )

b.给父元素设置 overflow : hidden

c.转换成行内块元素

d.设置浮动

6.6. 行内元素的内外边距的问题

• 如果想要通过 margin 或 padding 改变行内标签的垂直位置，无法生效
• 行内标签的 margin - top 和 bottom 不生效
• 行内标签的 padding - top 或 botttom 不生效