盒模型和文本溢出

目录
一、认识盒子模型
二、盒模型的组成部分
三、学习盒子模型的相关元素
四、文本溢出

---

一、认识盒子模型

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

---

二、盒模型的组成部分

2.1 css盒子模式的属性
	内容（content）、填充（padding）、边框（border）、边界（margin）

2.2 说明
	内容（content）盒子里装的东西
	填充（padding）就是怕盒子里装的东西损坏而添加的泡沫或者其他抗震的辅料
	边框（border）盒子本身
	边界（margin）盒子与盒子之间的空隙，或者是大盒子与嵌套在里面的小盒子之间的空隙

---

三、盒模型的相关元素

3.1 border（边框）
	3.1.1 语法
		{border：边框宽度 边框颜色 边框风格}例如：{border：5px #f00 solid；}
	3.1.2 说明
		表框：border，网页中很多修饰性线条都是由边框来实现的。
		边框宽度：border-width
		边框颜色：border-color
		边框样式：border-style：solid（实线）bashed（虚线）dotted（点划线）double（双线）
	3.1.3 补充
		也可单独设置一个方向的边框，如border-left border-right 等
		border-style的值也很多除了以上四种还有：groove（槽边）ridge（岭边）inset（凹边）ouset（凸边）none（无边框，默认）hidden（无边框）
	3.1.4 边框设置四种例子
		同时设置4个边框
			border：边框宽度 边框颜色 边框风格
		单独设置下边框
			border-bottom：边框宽度 边框颜色 边框风格
		设置右边无边框
			border：边框宽度 边框颜色 边框风格
			border-right：none
		设置上下无边框
			border：边框宽度 边框颜色 边框风格
			border-width：0 边框宽度
3.2 padding（填充）
	3.2.1 padding结构
		padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域

	3.2.2 说明
		padding（填充），在设定页面中一个元素内容（content）到元素的边缘（边框）之间的距离。也成补白
	3.2.3 用法
		用来调整内容在容器中的位置关系
		用来调整子元素在父元素中的位置关系 padding属性需要添加在父元素上
		padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性
	3.2.4 属性值的4种方式
		四个值：上 右 下 左{padding：value  value value value；}value指属性值
		三个值：上 左右 下{padding：value value value；}
		两个值： 上下 左右{padding：value value；}
		一个值：四个方向{padding：value；}
		可以单独设置一个方向的padding值，如：padding-top padding-left 等
		注意：padding不可以为负值
3.3 margin（边界）
	3.3.1 margin结构
		margin（边界）也叫外边距，在元素外边的空白区域，被称为边距。
		margin区域不应用背景；css中margin默认值为0

	3.3.2 属性值的4种方式
		四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右 一个值：四个方向
		当给元素设置{margin：0 auto}时，元素会在浏览器中横向居中
		可以单独设置一个方向的margin值，如：margin-top marging-left 等

块级元素的宽如果没有设置，其宽是从父级继承的宽度。系统会为某些元素设置默认的margin值或者padding值，这对于我们以后尺寸的计算有影响，所以在以后的开发过程中，首先清除掉所有元素的margin和padding值。  可以在 css界面首行代码敲： *{margin：0；padding：0；}

margin的坑点：
相邻兄弟元素在垂直方向上的margin值会出现融合的情况，融合后会去两个元素里较大的值作为融合后的值。 如何解决该问题：{display：inline-block}
当父级子级元素都设置了margin时，子级的margin值会传递到父级。解决方法： 给父级加一个边框、给父级使用overflow：hidden、给父级或子级或两者都加{display：inline-block}

---

四、文本溢出

4.1 溢出属性
	4.1.1 语法
		{overflow：visidle hidden scroll auto inherit；}
	4.1.2 说明
		visible（默认值）hidden（隐藏）scroll（隐藏并出现滚动条）auto（根据内容自动显示滚动条）inherit（继承父元素overflow值）
4.2 空白空间
	4.2.1 语法
		{white-space：normal pre nowarp pre-warp pre-line inherit}
		该属性用来设置如何处理元素内的空白
	4.2.2 说明
		normal（常规）
		pre（不合并文字间的空白距离，当文字超出边界时不换行）
		pre-warp（不合并文字间的空白距离，当文字碰到边界时发生换行）
		pre-line（保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行）
		nowarp（强制在同一行内显示所有文本，直到文本结束或者遭遇br对象）
		inherit（规定继承父元素white-space值）IE浏览器都不支持此属性值
4.3 文本溢出
	4.3.1 语法
		{text-overflow：clip ellipsis}
		clip 不显示省略号，而是简单的裁切
		ellipsis 当对象文本溢出时，显示省略号
	4.3.2 说明
		text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其他的样式属性定义，要实现溢出时产生省略号的效果，还需要定义
		1容器宽度
		2强制文本在以行内显示：white-space：nowarp；
		3溢出的内容为隐藏：overflow：hidden
		4溢出的文本显示省略号：text-overflow：ellipsis
4.4 拓展内容
	多行文本出现省略号
	webkit浏览器或移动端的拓展css，只对webkit有效
	js方案
	：after选择器 p:after{content：“...”}
	一个标记可以设置多个class名 如：<标记 class="名称1 名称2"></标记>