块级元素是容器级的,行内元素是文本级的。
4点区别
块级元素独自占一行且默认宽度会占满父元素宽度,即使设置宽度也还是独占一行, 行内元素不会独占一行,相邻行内元素可以排在同一行。
块级元素可以设置weith和height,行内元素设置width和height无效。
块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的如padding-top和margin-bottom不会产生边距效果
最后是块级元素和行内元素的相关属性:display,其中块级元素对应display:block,行内元素对应display:inline。可以通过修改元素的display属性来切换行内元素和块级元素。
自由转换
行内元素和块级元素可以自由转换,
给任何一个元素,设置→display:block;它将转为块级元素,拥有块级元素的所有性质;
相反的,给任何一个元素,设置→display:inline;它将转为行内元素,拥有行内元素的所有性质;
块级元素有哪些
div -最常用的块级元素
dl -和dt dd搭配使用的块级元素
form -表单交互
h1 -大标题
hr -水平分隔符
ol -排序列表
ul -非排序列表
p -段落
More
内联元素有哪些
a -锚点
b -粗体
br -换行
img -图片
input -输入框
label -label标签
select
small -小字体文本
strong -粗体强调
span -常用的内联容器,定义文本内区块
textarea -多行文本输入框
More