CSS盒模型和文本溢出

CSS盒模型和文本溢出

学习目标

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

一、认识盒子模型

盒模型是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；