每天一句：說到和做到扭勉，是完全不一樣的兩個(gè)層次鹊奖，不要質(zhì)疑，只有踏踏實(shí)實(shí)的把每一件小事做好涂炎，才會(huì)有驕傲的資本忠聚。
一、盒子模型
盒模型: 是CSS的基石唱捣，指定標(biāo)簽如何顯示两蟀。它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系。 頁面上的每個(gè)元素都被當(dāng)成一個(gè)矩形盒子震缭、占據(jù)一定的頁面控件赂毯，這個(gè)盒子由內(nèi)容(content)、內(nèi)邊距(補(bǔ)白/填充/padding)拣宰、邊框(border)和外邊距(margin)組成党涕；
【padding一般用于調(diào)整內(nèi)容位置，margin一般用于調(diào)整盒子位置】
二巡社、填充padding
填充:
padding膛堤，在設(shè)定頁面中一個(gè)元素內(nèi)容到元素的邊緣(邊框)之間的距離，也稱之為補(bǔ)白晌该；
用法:
> 用來調(diào)整內(nèi)容在容器中的位置關(guān)系;
> 用來調(diào)整子元素在父元素中的位置關(guān)系;
注: padding屬性需要添加在父元素上;
> padding值是額外加載元素原有大小之上的肥荔，如果想要保證元素大小不變(盒子大小)，即元素寬高上減去添加的padding屬性值;
說明：
可單獨(dú)設(shè)置方向填充朝群，如：
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
屬性值的4種方式：
四個(gè)值：上 右 下 左 { padding: 10px 20px 30px 40px; } 注: 起點(diǎn)在12,順時(shí)針方向
三個(gè)值：上 左右 下 { padding: 10px 20px 30px;}
二個(gè)值：上下 左右 { padding: 10px 20px;}
一個(gè)值：四個(gè)方向 { padding: 2px; }定義元素四周填充為2px
三燕耿、邊框border
簡寫方式:
border: 3px solid red; // 粗細(xì)(數(shù)值+單位) (solid/dashed/dotted/double) 顏色
說明:
右邊框：border-right:線型（solid/dashed/dotted/double） 粗細(xì)（數(shù)值+單位） 顏色;
左邊框: border-left:線形（solid/dashed/dotted/double） 粗細(xì)（數(shù)值+單位） 顏色;
上邊框: border-top:線形（solid/dashed/dotted/double） 粗細(xì)（數(shù)值+單位） 顏色;
下邊框: border-bottom:線形（solid/dashed/dotted/double） 粗細(xì)（數(shù)值+單位） 顏色;
備注:
border-width 邊框的粗細(xì)
border-style 邊框的線型
border-color 邊框的顏色
solid:實(shí)線，dashed:虛線潜圃，dotted:點(diǎn)狀線缸棵，double:雙線
四、外邊距margin
邊界:
margin谭期，在元素外邊的空白區(qū)域堵第，被稱之為邊距;
說明:
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
屬性值的4種方式：
四個(gè)值：上 右 下 左 {margin: 10px 10px 10px 10px;}
三個(gè)值：上 左右 下 {margin: 10px 20px 10px;}
二個(gè)值：上下 左右 【margin: 0 auto; 即表示上下邊距為0，左右邊距為自動(dòng)】
一個(gè)值：四個(gè)方向 margin:2px; 定義元素四邊邊界為2px
五隧出、溢出屬性overflow
語法:
overflow:visible/hidden(隱藏)/scroll/auto(自動(dòng))/inherit;
說明:
visible:默認(rèn)值踏志，內(nèi)容不會(huì)被修剪，會(huì)成現(xiàn)在元素框之外;
hidden:內(nèi)容會(huì)被修剪胀瞪，并且其余內(nèi)容是不可見的;
scroll:內(nèi)容會(huì)被修剪针余，但是瀏覽器會(huì)顯示滾動(dòng)條饲鄙，以便查看其余的內(nèi)容;
auto:如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條圆雁，以便查看其他的內(nèi)容;
inherit: 規(guī)定應(yīng)該從父元素繼承overflow屬性的值(父級(jí)元素是什么屬性值忍级，它就是什么屬性值)；
問題1: 如果大盒子中嵌套小盒子伪朽，為了防止小盒子在設(shè)置margin時(shí)轴咱，大盒子受到的影響(小盒子頂部沒有任何的效果)，解決方式是在大盒子中添加overflow:hidden;屬性;
問題2: 同級(jí)盒子中烈涮，如果出現(xiàn)都添加margin值朴肺，在重合位置中(上下)，會(huì)有問題坚洽，只有最大值有效(而不是兩個(gè)值之和margin-bottom + margin-top);
六戈稿、文本溢出屬性text-overflow
語法:
text-overflow: clip / ellipsis
說明:
clip:不顯示省略號(hào)(...)，而是簡單的裁切;(不顯示省略號(hào))
ellipsis:當(dāng)對(duì)象內(nèi)文本溢出時(shí)讶舰，顯示省略標(biāo)記;(顯示省略號(hào))
text-overflow屬性,當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記鞍盗，并不具備其它的樣式屬性定義，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還需定義：
1跳昼、容器寬度: width:value;(px橡疼、%，都可以);
2庐舟、強(qiáng)制文本在一行內(nèi)顯示: white-space:nowrap; // nowrap屬性:文本不會(huì)換行，文本會(huì)在同一行上繼續(xù)住拭，直到遇到
標(biāo)簽為止(pre和nowrap樣式一樣);
3挪略、溢出內(nèi)容為隱藏: overflow:hidden;
4、溢出文本顯示省略號(hào): text-overflow:ellipsis;
滔岳。
