【前端笔记6】CSS进阶2 盒子模型

本文是基于课程 前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 P91-节的笔记总结，便于前端零基础小白（我）学习查找。

---

一、CSS的盒子模型概念

盒子简介

盒子的概念：

1. 可指页面的标签，通过盒子视角可方便布局
2. 可指网页的各个矩形区域

模型构成：

• 内容区域、内边距区域、边框区域、外边距区域
• content、padding、border、margin
  

设内容区域：width/height: (值)px;

注：border会撑大盒子，注意按需减去border尺寸，或"自动内减"。

属性名：width / height
属性值：值 ＋ px ;

设边框 border: 粗细值px 线形 颜色;

注：border 是 复合属性

属性名：border

单方向设置边框：border - 方位名词
(up、down/bottom、left、right)

属性值：粗细值(px) 线形 颜色

属性连写：不分顺序，空格隔开

线型属性值	效果
solid	实线
dashed	虚线
dotted	点线

单个属性设置（了解，不常用，会累死）

* 设计编码思路：宽高背景色、内容位置、文字细节

宽高背景色：

• width
• height
• background-color

内容位置

• text-alignt
• text-height

文字细节

• font-size
• color
• text-decoration
• hovor悬停效果

设内边距 padding(-方向名词): (值)px

注：会撑大盒子，即添加padding后，盒子尺寸可能发生变化

属性名：padding
属性值：padding(-方向名词): (值)px;

(四值)复合使用时的设置顺序：

• padding: 上、右、下、左

(三值)复合使用时的设置顺序：

• padding: 上、左右、下

(二值)复合使用时的设置顺序：

• padding: 上下、左右

设置顺序：顺时针，有空补对面值

优化：去掉盒子宽度width，添加padding撑大盒子，使文字居中，盒子展示美观。

自动内减 box-sizing:border-box;

CSS3及以上支持该功能。

作用：在已知盒子尺寸，当盒子被撑大后，自动去掉撑大的尺寸。
操作：给盒子添加属性 box-sizing:border-box;
效果：浏览器自动计算多余大小，自动在内容中减去。

*设外边距 margin(-方向名词): (值)px

与padding设置方式一致

清除默认内外边距 *{}

*{
	margin:0;
	padding:0;	
}

版心居中 margin:0 auto;

版心：网页的有效内容

浏览器计算过程：左右外间距 = (页面宽度 - 盒子宽度) / 2
属性值： margin:0 auto;

外边距折叠现象

1.合并现象
场景：垂直布局__的__块级元素，上下的margin会合并
结果：两者距离为margin的最大值；
如下图：两个盒子的外边距重叠，两盒子间距为100px.

2.塌陷现象
场景__互相嵌套__的__块级元素__，子元素的margin-top会作用在父元素上
结果：父元素一起向下移动，子元素仍在父元素的原位置
解决办法

• 子元素使用padding-top属性，而不是margin-top；
• 父元素添加：overflow:hidden
• 转换成行内块元素
• *设置浮动

行内元素 的 内外边距问题

行内标签的 __垂直位置__无法直接改变。
解决：增加行高

---

---

若对本文有任何建议或意见欢迎在评论区提出~十分感谢！
Ending