css盒子模型与文字溢出学习笔记
第一章笔记
11盒子模型
1. border-style:solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
2. padding 内容区域距离边框
3. padding会撑开原有盒子的宽、高所以我们要减去padding的长度
4. padding的属性值4种方式：上 右 下 左、上 左右 下、上下 左右、 一个值四个方向（可以单独设置某一边）
5. 如果出现边框塌陷那么：overflow:hidden；
12盒子模型
1. margin 块与块之间的位置
2. margin: 0 auto
3. margin-top;设置时，如果子父都设置了margin，子的margin会传递到父的margin，例如：
解决方法：在父元素加入：overflow:hidden；
4. margin与padding
1. margin框架与框架之间、块与块之间、盒子与盒子、
2. padding盒子内部
13文本溢出
1. 语法{
overflow:visible/hidden/scroll/auto/inherit;}
说明：
visible:默认值，内容不会被修剪，会出现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的；
sorcll:内容会被修剪，但浏览器会显示滚动条，以便查看其余的内容；
auto:如果内容被修剪，则浏览器会显示滚动条，以便看见其他的内容；
inherit:规定应该从父元素继承overflow属性的值。
2. 语法{
white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}
normal:默认。空白会被浏览器忽略。
pre:空白会被浏览器保留。
nowrap:文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
pre-wrap:保留空白符序列，但是正常的进行换行
pre-line：合并空白符序列，但保留换行符。
inherit：规定应该从父元素继承white-space属性的值。
14文本溢出
1. 语法{
text-overflow:clip/ellipsis;}
clip：不显示省略号，而是简单的裁剪。
ellipsis：当对象内文本没有溢出时，显示省略标记。
2. 使用ellipsis时需要配合下面：
width:10px;容器的宽，
white-space:nowrap;强制文本在一行内显示，
overflow:hidden; 溢出内容为隐藏，
text-overflow:ellipsis; 溢出文本显示省略号，
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ell{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px #000 solid;
}
.box{
width: 200px;
border: 1px #000 solid;
text-overflow: clip;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="ell">ellipsis：当对象内文本没有溢出时，显示省略标记。</div>
<div class="box">ellipsis：当对象内文本没有溢出时，显示省略标记。</div>
</body>
</html>