块状元素 和 内联元素
块状元素
常见元素:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 等等
特点:
1)独占一行
2)高度、行高、外边距和内边距都可以单独设置
3)宽度默认是容器的100%;
4)可以容纳内联元素和其他的块级元素
内联元素
常见元素:<a>,<span>,<button> 等等
特点:
1)相邻元素在一行
2)设置高度和宽度无效,但水平方向padding和margin可以设置,垂直方向无效
3)默认快读就是它本身的宽度
4)只能容纳出文本或者其他行内元素(a标签除外)
行内块级元素
常见元素:<img>,<input>,<td>
特点:
1)和相邻的行内(或者行内块级)元素在一行上
2)默认的宽度就是本身内容的宽度
3)宽度、高度、内边距和外边距都可以设置
显示模式的转换
转行元素: display: inline
转块级元素:display: block;
转行内块级元素:display: inline-block;