Open felix-cao opened 6 years ago
块级元素是容器级的，行内元素是文本级的。
块级元素独自占一行且默认宽度会占满父元素宽度，即使设置宽度也还是独占一行， 行内元素不会独占一行，相邻行内元素可以排在同一行。
块级元素可以设置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
块级元素是容器级的，行内元素是文本级的。
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