CSS盒模型

第一节 盒模型

1、盒模型

概念：
如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么我们可以形象地将其看作是一个盒子。

CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性（内容、填充、边框、边界），可以控制各个盒子乃至整个HTML文档的变现效果和布局结构。

虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无所不在的一个重要组成部分。

2、盒模型的组成

CSS盒子模型都具备这些属性：
内容（content）、填充（padding）、边框（border）、边界（margin）

盒模型

3、盒模型的相关属性

1）border的使用方法
border：边框宽度 边框风格 边框颜色；
例如：{borde:5px solid #f00;}
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)

可单独设置一方向边框，如：
底边框：border-bottom：边框宽度 边框风格 边框颜色
左边框：border-left：边框宽度 边框风格 边框颜色
右边框：border-right：边框宽度 边框风格 边框颜色
上边框：border-top：边框宽度 边框风格 边框颜色

2）padding的使用方法
padding设定页面中一个元素内容(content)到元素的边缘(border)之间的距离。背景色和背景图像会覆盖到padding和content组成的区域
用法：

• 用来调整内容在容器中的位置关系。
• 用来调整子元素在父元素中的位置关系。
  注：padding属性需要添加在父元素上。
• padding值是额外加载元素原有大小之上的，如果保证元素大小不变，需从元素宽或高上减掉后添加的padding属性。

属性值得4种方式：
四个值：上 右 下 左 {padding:10px 20px 30px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px;}
二个值：上下 左右 {padding:10px 20px;}
一个值：四个方向 {padding:2px;}
可单独设置一个方向填充，如：
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

3）margin的使用方法
外边距(margin)在border之外，margin区域不应用背景；
CSS中margin默认值为0
属性值得4种方式：
四个值：上 右 下 左 {margin:10px 20px 30px 40px;}
三个值：上 左右 下 {margin:10px 20px 30px;}
二个值：上下 左右 {margin:10px 20px;}
一个值：四个方向 {margin:2px;}
{margin:0 auto;}在浏览器中横向居中。
可单独设置一个方向边界，如：margin-top:10px;

• 注意事项
  1、系统会为某些元素设置默认的margin值或者padding值。这对于我们以后尺寸的计算有影响，所以在以后的开发过程中，首先清除掉所有元素的margin和padding值。
  css首行代码： *{margin:0; padding:0;}
  2、相邻兄弟元素在垂直方向上的margin值会出现融合的情况，融合后会去两个元素较大的值为融合后的值。
  3、当父级子级元素都设置了margin时，子级的margin值会传递到父级。margin传递解决办法：给父级使用overflow:hidden属性

第二节 文本溢出

1、overflow属性

overflow属性：定义溢出元素内容区的内容会如何处理
语法：{overflow:visible/hidden/scroll/auto/inherit;}
说明：
visible：默认值，内容不会被修剪，会出现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容；
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其它的内容；
inherit：规定应该从父元素继承overflow属性的值。

2、white-space属性

white-space属性：设置如何处理元素内的空白
语法：{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}
说明：
normal：默认。空白会被浏览器忽略；
pre：空白会被浏览器保留；
nowrap：文本不会换行，文本会在同一行上继续，直到遇到
标签为止；
pre-wrap：保留空白符序列，但是正常地进行换行；
pre-line：合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承white-space属性的值。

3、text-overflow属性

text-overflow属性：规定当前文本溢出包含元素时发生的事情
语法：{text-overflow：clip/ellipsis;}
说明：
clip：不显示省略号，而是简单的裁切；
ellipsis：当对象内文本溢出时，显示省略标记；
说明：要实现溢出时产生省略号的效果还需要定义：

1. 容器宽度：withd：value；（px、%，都可以）
2. 强制文本在一行内显示：while-space：nowrap；
3. 溢出内容为隐藏：overflow：hidden；
4. 溢出文本显示省略号：text-overflow：ellipsis；