理解盒模型和文本溢出

一：概念

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;

转载于:https://www.cnblogs.com/xcswkr/p/6083152.html