块元素,行元素,行内块元素
块元素特点:
1.内容独占一行
2.块元素可以设置宽高
3.如果不设置宽高,宽度就等于父元素的宽度,高度就等于内容的高度
4.块元素可以设置内外边距
5.多个块元素之间上下排列
常见的块元素:div,section,p,h1-h6,hr,ul,li等
块元素可以通过margin:0 auto;实现定宽居中的效果(先定宽,再居中)
行元素的特点:
1.行元素不能独占一行,而是在一行显示,如果宽度大于父元素的宽度,才会自动换到第二行显示
2.行元素不能设置宽高
3.宽高取决于内容的宽高
4.多个行元素左右排列,如果右边宽度不够,就自动换行
常见的行元素:span,a,b,s,del
行内块元素的特点:
1.不能独占一行,多个行内块元素按照从左往右的顺序排列,如果右边宽度不够,自动换行显示
2.可以设置宽高
3.不设置宽高时,它的宽高取决于内容的宽高
常见的行内块元素:img,button,input等
img标签不设置宽高时,图片有多大,它就有多大,如果只设置宽或者高,那么对应的宽或者高会等比例进行放大或缩小,如果设置宽高不成比例,那么图片就会变形
块元素,行元素,行内块元素,它们之间可以通过display来相互转换:
display:block;块
display:inline;行
display:inline-block;行内块