每天一句：说到和做到，是完全不一样的两个层次，不要质疑，只有踏踏实实的把每一件小事做好，才会有骄傲的资本。

一、盒子模型

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