HTML+CSS 学习笔记四：块元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素

1. 块级元素在浏览器显示时独占一行，能改变宽度和高度
2. 内联元素在显示时不独占一行，往后排，不能设置宽高
3. 内联-块级元素在显示时不独占一行，但是能设置宽高
4. 相互转换

isplay: none;        /*隐藏标签*/
display: inline       /*转成内联标签*/
display: block        /*转成块级标签*/
display: inline-block /*转成内联-块级标签*/

标签居中

水平居中

margin:0 auto;      /*块级标签*/
text-align:center;  /*内联标签，内联-块级标签*/

垂直居中

1. 利用行高

line-height:(=height)

2. 基线对齐

vertical-align:middle;   /*把此元素放置在父元素的中部*/

vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

值	描述
top	把元素的顶端与行中最高元素的顶端对齐
bottom	把元素的底端与行中最低的元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐

3. 定位