一、块元素block
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5:header、section、article、footer等等
块级元素的特点
1.块级元素独占一行,当没有设置宽高时,它默认设置为100%
2.块级元素允许设置宽高,width、height、margin、padding、border都可控制
3.块级元素可以包行内元素、块级元素
(二)、行内元素inline(内联函数)及行内块元素inline-block
(1)
span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup,strong、u
button(display:inline-block)
行内元素的特点
1.行内元素不能独占一行,与其他行内元素排成一行
2.行内元素不能设置width、height、margin、padding
3.行内元素默认宽度为其content宽度
4.行内元素只能包括文字或行内元素、行内块元素,不能包括块级元素
5.display:inline-block:行内块元素与行内元素属性基本相同即不能独占一行,但是可以设置width及height
(2)有一些特别的行内元素可以设置宽高
替换元素:、、、、
这些元素与其他行内元素不同的是,它有内在尺寸。因为它像是一个框,比如img元素,他能显示出图片是由于src的值,在审查元素时就不能直接看到图片,而input是输入框或是复选框也是因为其type的不同。
这种需要通过属性值显示的元素,其本身是一个空元素,像一个空的框架。
二、将行内元素分行显示或将块级元素同行显示
display:block -- 显示为块级元素(块级元素默认样式)
display:inline -- 显示为行内元素(行内元素默认样式)
display:inline-block -- 显示为行内块元素,表现为同行显示并可修改宽高内外边距等属性(行内块元素默认属性)
我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。