一:概念
CSS将网页中的每一个元素所占据的矩形空间看成一个盒子,CSS围绕着这些盒子产生了一种“盒子模型”的概念,用相关的盒子属性content(内容)、padding(内边距)、border(边框)、margin(外边距)来描述页面中的每个元素在页面中所占据的空间大小,通过控制各个盒子来美化网页的表现效果。注意:实际上CSS中没有盒子这个单独的属性对象。
标准盒模型示例图如下:
在标准盒模型中,我们通常设置的width和height只是内容区域的宽度和高度,并不是整个元素盒子的宽度和高度。
IE怪异盒子模型如下
在IE盒子模型中,IE认为我们通常所设置width宽度和height高度应该包含border及border内部的所有区域。
二:盒子大小的实际计算公式
宽=左右margin+左右border+左右padding+width
高=上下margin+上下border+上下padding+height
三:margin使用时需要主要的地方:
1:相邻兄弟元素在垂直方向上的margin值会出现融合,融合后会取两个元素里较大的值作为融合后的值。
2:当父级子级都设置了margin时,子级的margin值会传递到父级
margin传递解决办法:
a:给父级加一个边框
b:给父级使用overflow:hidden属性
c:给父级或子级或两者都加display:inline-block解决。
四:文本溢出
溢出属性(容器的)
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
属性值详解:
visible:默认值,内容不会被修剪,会出现在元素框之外
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条,以显示其余的内容
inherit:规定应该从父元素继承overflow属性的值。
五:空白空间
white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;
该属性用来设置如何处理元素内的空白;
六:文本溢出
text-overflow:clip/ellipis
clip:不显示省略号(...),而是简单的裁剪;
ellipsis:当对象内文本溢出时,显示省略标记;
text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号还需定义:
1、容器宽度: width:value;(px、%、都可以)
2、强制文本在一行内显示:white-space:nowrap;
3、溢出内容为隐藏:overflow:hidd;
4、溢出文本显示省略号:text-overflow:ellipsis;