CSS盒模型和文本溢出

学习目标

认识盒子模型
盒子模型的组成部分
学习盒子模型的相关元素margin padding
文本溢出相关的属性

一、认识盒子模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。Css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

二、盒子模型的相关元素

1、padding的使用方法

说明：

填充：padding，在设定页面中一个元素内容到元素的边缘（边框）之间的距离。也称补白。

用法：

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

属性值的4种方式：

四个值：上右下左{padding：0px 0px 0px 40px；}

三个字：上左右下{padding：10px 20px 30px；}

二个值：上下左右{padding：10px 20px；}

一个值：四个方向padding：2px；/*定义元素四周填充为2px*/

说明：可单独设置一方向填充，如：上方向padding-top：10px；右方向padding-right：10px；下方向padding-bottom：10px；左方向padding-left：10px；

2、margin的使用方法

说明：

边界：margin，在元素外边的空白区域，被称为边距。

Margin-left：左边界

Margin-right：右边界

Margin-top：上边界

Margin-bottom：下边界

属性值的4种方式：

四个值：上右下左

三个值：上左右下

二个值：上下左右

一个值：四个方向margin：2px；/*定义元素四边边界为2px*/

Margin：0 auto；/*一个有宽度的元素在浏览器中横向居中*/。

定义元素上、下边界为2px，

说明：可单独设置一方向边界，如：margin-top：10px；

三、盒子的实际大小

宽=左右margin+左右border+左右padding+width，

高=左右margin+左右border+左右padding+height，

例如：一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，

宽=margin2+border2+content.width=202+12+102+200=262px，

高=margin2+border2+content.width=202+12+102+50=112px，

四、文本溢出相关的属性

1、溢出属性（容器的）

Overflow：visible/hidden(隐藏)/scroll/auto(自动)/inherit

Visible:默认值，内容不会被修建，会成现在元素框之外；

Hidden：内容会被修剪，并且其余内容是不可见的；

Scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容；

Auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其它的内容；

Inherit：规定应该从父元素继承overflow属性的值。

2、空余空间（了解）

说明：

White-space：normal/nowrap/pre/pre-wrap/pre-line/inherit该属性用来设置如何处理元素内的空白；

3、省略号显示

说明：

Text-overflow：clip/ellipsis

Clip:不显示省略号（...），而是简单的裁切；

Ellipsis：当对象内文本溢出时，显示省略标记；

Text-overflow：属性仅是...，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义。

要实现单行文本溢出时产生省略号的效果还需定义：

1、容器宽度：width：value；

2、强制文本在一行内显示：white-space：nowrap；

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis；