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;