css 小總結

先區份內斂標籤、塊級標籤、內聯塊級標籤

塊級標籤特色：

一、使元素變成塊元素，元素獨自佔一行，在不設置本身的寬度的時候 ，默認佔滿父元素的寬度。
二、可以改變元素的height，width的值。
三、能夠設置padding，margin的各個屬性值，top，left，bottom，right都可以產生邊距效果。

內斂標籤的特色：

一、使元素變成內聯元素，元素橫向排列，沒有寬度和高度，寬度和高度爲本身包裹內容的大小。 二、不可以改變元素的height，weight的值。
三、能夠設置padding的垂直方向屬性值，和margin的水平方向的屬性值。

內斂塊級標籤的特色：

一、使元素變成內聯元素，元素獨自佔一行。
二、可以改變元素的height，width的值。
三、能夠設置padding，margin的各個屬性值，top，left，bottom，right都能產生邊距效果。

幾種能夠水平居中的方式

一、子元素爲內聯元素，從父元素上居中 ；先看父元素是否是塊級元素，若是是直接在父元素上添加：text-align:center 若是父元素不是塊級元素先轉換爲塊級元素，而後再添加：text-align：center。
二、子元素爲塊級元素，分爲定寬度和不定寬度：當寬度給定的狀況下，可從本身居中；margin:{0 auto;}當子元素的默認寬度和父元素同樣時，咱們能夠把子元素轉換成爲內聯元素，而後轉換成1的作法。
三、使用flex佈局，這種佈局不須要考慮寬度，只須要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;

幾中能夠垂直居中的方式

一、要居中的子元素爲單行的內聯元素，可讓他的行高等於他的高度就能夠了。
二、要居中的子元素爲多行的內聯元素時，能夠在他的父元素上設置display：table,子元素上設置display：table-cell；和vertical-align:middle
三、要居中的子元素爲塊級元素時，可使用flexbox佈局，只須要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;