一、块元素
特点
- 自己单独占一行,就像一个段落
- 能随时设置宽度和高度
常见块元素
ul
li
form
h1-h6
hr
p
div
二、内联(行内)元素
特点
- 不会自己独立占一行,就好像一个单词,一直往后排
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
常见内联元素
a,big,br,em,img,label,span
三、内联(行内)-块级元素
- 多个内联(行内)-块级元素可以在一行
- 能设置宽度和高度
常见内联-块级元素
input
selelct
textarea
四、块元素与内联元素相互转换:
把内联元素转成块元素
display:block -- 显示为块级元素
把块元转成内联元素
display:inline -- 显示为内联元素
转为内联块元素
dipslay:inline-block
-- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性