HTML--盒模型01(文字溢出处理+伪元素妙用)

一、什么是盒模型

任何元素在页面中都会形成一个矩形区域，称为盒
display属性值决定盒的类型：
1.行盒：
 不独占一行，不可设置宽高，margin(上下)、padding(上下)无效。
2.块盒：独立成行，可设置宽高。
3.行块盒：不独占一行，可设置宽高。常用于切换页面

二、盒的组成部分

标准盒子由内之外：
content：标准盒子设置宽高的区域（蓝色区域）
padding：内边距，文字到盒子边缘的距离（绿色区域）
border：边框，盒子的描边（黄色区域）
margin：外边距，盒子距其他元素的距离

• 在工作中我们发现设计师给的图片测量尺寸后，设置宽高，再加一些边框或内边距会使盒子所占尺寸变大。为了改变这一现象，我们可以通过改变盒子尺寸来实现：

padding-box：填充盒，内容区+填充区。
box-sizing属性值：
content-box：内容盒，标准盒的计算方式。
border-box：边框盒，IE盒子/怪异盒子计算方式；即程序员所写的width值和height值包含了content、padding、border的值。

三、文字溢出处理

1.overflow：控制内容溢出边框盒后的处理方式，一般隐藏（hidden）
2.word-break：文字截断位置；CJK和其他国家文字截断位置不同。
3.white-space：文字的空格处理；