每天一句：说到和做到，是完全不一样的两个层次，不要质疑，只有踏踏实实的把每一件小事做好，才会有骄傲的资本。
一、盒子模型
盒模型: 是CSS的基石，指定标签如何显示。它规定了网页元素如何显示以及元素间相互关系。 页面上的每个元素都被当成一个矩形盒子、占据一定的页面控件，这个盒子由内容(content)、内边距(补白/填充/padding)、边框(border)和外边距(margin)组成；
【padding一般用于调整内容位置，margin一般用于调整盒子位置】
快递包裹
盒子模型
盒子模型具体显示
二、填充padding
填充:
padding，在设定页面中一个元素内容到元素的边缘(边框)之间的距离，也称之为补白；
用法:
> 用来调整内容在容器中的位置关系;
> 用来调整子元素在父元素中的位置关系;
注: padding属性需要添加在父元素上;
> padding值是额外加载元素原有大小之上的，如果想要保证元素大小不变(盒子大小)，即元素宽高上减去添加的padding属性值;
说明：
可单独设置方向填充，如：
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
属性值的4种方式：
四个值：上 右 下 左 { padding: 10px 20px 30px 40px; } 注: 起点在12,顺时针方向
三个值：上 左右 下 { padding: 10px 20px 30px;}
二个值：上下 左右 { padding: 10px 20px;}
一个值：四个方向 { padding: 2px; }定义元素四周填充为2px
三、边框border
简写方式:
border: 3px solid red; // 粗细(数值+单位) (solid/dashed/dotted/double) 颜色
说明:
右边框：border-right:线型（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
左边框: border-left:线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
上边框: border-top:线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
下边框: border-bottom:线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
备注:
border-width 边框的粗细
border-style 边框的线型
border-color 边框的颜色
solid:实线，dashed:虚线，dotted:点状线，double:双线
四、外边距margin
边界:
margin，在元素外边的空白区域，被称之为边距;
说明:
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
属性值的4种方式：
四个值：上 右 下 左 {margin: 10px 10px 10px 10px;}
三个值：上 左右 下 {margin: 10px 20px 10px;}
二个值：上下 左右 【margin: 0 auto; 即表示上下边距为0，左右边距为自动】
一个值：四个方向 margin:2px; 定义元素四边边界为2px
五、溢出属性overflow
语法:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
说明:
visible:默认值，内容不会被修剪，会成现在元素框之外;
hidden:内容会被修剪，并且其余内容是不可见的;
scroll:内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto:如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit: 规定应该从父元素继承overflow属性的值(父级元素是什么属性值，它就是什么属性值)；
问题1: 如果大盒子中嵌套小盒子，为了防止小盒子在设置margin时，大盒子受到的影响(小盒子顶部没有任何的效果)，解决方式是在大盒子中添加overflow:hidden;属性;
问题2: 同级盒子中，如果出现都添加margin值，在重合位置中(上下)，会有问题，只有最大值有效(而不是两个值之和margin-bottom + margin-top);
六、文本溢出属性text-overflow
语法:
text-overflow: clip / ellipsis
说明:
clip:不显示省略号(...)，而是简单的裁切;(不显示省略号)
ellipsis:当对象内文本溢出时，显示省略标记;(显示省略号)
text-overflow属性,当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度: width:value;(px、%，都可以);
2、强制文本在一行内显示: white-space:nowrap; // nowrap属性:文本不会换行，文本会在同一行上继续，直到遇到
标签为止(pre和nowrap样式一样);
3、溢出内容为隐藏: overflow:hidden;
4、溢出文本显示省略号: text-overflow:ellipsis;
