css基础知识3（盒模型文本溢出）

1.盒模型概念

如果css对html文档元素生成了一个描述该元素在html文档布局中所占空间的矩形元素框（element box），则可形象的看作为为一个盒子。css围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列盒子相关的属性（内容、填充、边框、、便捷），可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。虽然css中没有盒子这个单独的属性对象，但它却是css中无处不在的一个重要组成部分。

2.盒模型的组成

css盒子模型具备的属性：内容（content）、填充（padding）、边框（border）、边界（margin）
用日常生活中的盒子来理解这4个属性：
内容（content）盒子里装的东西；
填充（padding）防止盒子里的东西损坏而添加的泡沫等其他防震材料;
边框（padding）盒子本身;
边界（margin）盒子与盒子之间的空隙，或者是大盒子与嵌套在里面的小盒子之间的空隙。

3.盒模型的相关属性

border的使用方法
border：边框高度 边框风格 边框颜色；
例如：{border：5px solid #000;}
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线）/dashed（虚线）/dotted（点划线）/double（双线）
可单独设置一方向边框，如：
底边框：border-bottom：边框宽度 边框风格 边框颜色
左边框：border-left：边框宽度 边框风格 边框颜色
右边框：border-right：边框宽度 边框风格 边框颜色
上边框：border-top：边框宽度 边框风格 边框颜色

padding的使用方法
padding设定页面中一个元素内容（content）到元素的边缘（border）之间的距离。背景色和背景图像会覆盖padding和content组成的区域。
用法：
1）用来调整内容在容器中的位置关系
2）用来调整子元素在父元素中的位置关系。padding属性需要添加在父元素上。
3）padding值是额外加载元素原有大小之上的。如果想保证元素大小不变，需要从元素宽或高减掉后添加的padding属性。
属性值的4种方式：
四个值：上 右 下 左{padding：10px 20px 30px 40px;}
三个值：上 左右 下{padding：10px 20px 30px;}
两个值：上下 左右{padding：10px 20px;}
一个值：四个方向{padding:20px;}
可单独设置一方向填充，如：padding-top：10px;padding-right:10px;padding-bottom:10px;padding-left:10px;

margin的使用方法
外边距（margin）在border之外，margin区域不应用背景；css中margin默认值为0
属性值的4种方式：
四个值：上 右 下 左{margin：10px 20px 30px 40px;}
三个值：上 左右 下{margin：10px 20px 30px;}
两个值：上下 左右{margin：10px 20px;}
一个值：四个方向{margin:20px;}
{margin：0 auto；}在浏览器中横向居中；
可单独设置一方向边界，如：margin-top：10px;
注意事项：
1）系统会为某些元素设置默认的margin值或者padding值。在以后的开发中，首先要清楚所有元素的margin和padding值。css首行代码：*{margin：0；padding：0；}
2）相邻兄弟元素在垂直方向上的margin值会出现融合的情况，融合后会取两个元素里较大的值作为融合后的值。
3）当父级子级元素都设置了margin时，子级的margin值会传递到父级。解决方法是给父级使用overflow:hidden属性。

4 文本溢出

1.overflow属性

定义溢出元素内容区的内容会如何处理。
语法{overflow:visible/hidden/scroll/auto/inherit;}

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

2.white-space属性

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

3.text-overflow属性

规定当文本溢出包含元素时发生的事情
语法：{texxt-overflow:clip/ellipsis;}
说明：clip:不显示省略号，而是简单的裁切；
ellipsis:当对象内文本溢出时，显示省略标记；
注意：要实现溢出时产生省略号的效果还需定义：
1）容器宽度；width：value；（px、%,都可以）；
2）强制文本在一行内显示：white-space：nowrap；
3）溢出内容为隐藏：overflow:hidden;
4)溢出文本显示省略号:text-overflow:ellipsis;