加载中…行内元素和块状元素的区别
(2018-03-09 15:48:04)| 分类： html css |
一、定义
块状元素，一般都是从新行开始，它可以容纳行内元素和其他块状元素，常用的块状元素有div/p/ul/li/h1...
行内元素也叫内联元素，一般都是语义级别的基本元素，内联元素一般只能容纳文本或者其他内联元素（行内元素的宽高由行内元素的内容决定），比如span/strong/input/textarea...
二、行内元素和块级元素的区别，各自的特点
1、块状元素，总是在新行上开始，默认宽度是它容器的100%，也可以设定宽度和高度，内联元素，和其他元素在一行，设置宽度和高度不起作用。
2、块状元素能容纳其他块状元素或者内联元素。内联元素只能容纳文本或其他内联元素（如果内联元素容纳块状元素都会显示怪异）。
3、块状元素和内联元素一些样式属性不同。
块状元素可以设置width/height/line-height/margin/padding>
行内元素设置width/height无效，设置line-height样式怪异，设置margin和padding的时候左右有效果，上下没有效果。
三、常见的块状元素和行内元素
1、块状元素
| div | 定义文档中的分区或节 |
| h1,h2,h3,h4,h5,h6 | 定义标题 |
| ul,li | 定义无序列表 |
| ol,li | 定义有序列表 |
| p | 定义段落 |
| form | 定义表单 |
| hr | 定义水平线 |
| pre | 定义预格式化的文本 |
| table,tr,td... | 定义表格 |
| dl,dt,dd | 定义列表 |
2、行内元素
| a | 定义链接 |
| b | 字体加粗 |
| code | 定义计算机代码文本 |
| em | 定义为强调的内容 |
| img | 定义图片 |
| input | 输入框 |
| label | 为input元素定义标记 |
| span | 组合文档中的行内元素 |
| strong | 语气更强的强调内容 |
| sub | 定义下标文本 |
| sup | 定义上标文本 |
| textarea | 定义多行输入框 |
四、块状元素和内联元素之间的相互转换
1、display
display:block转换为块状元素
display:inline转换为行内元素
display:inline-block转换为行内块状元素
注意：如果把一个div设置成inline也要遵守行内元素的特点。
2、float
当把行内元素设置为float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了中间莫名的空白。
3、当为行内元素进行定位时，absolute(绝对定位)与fixed(固定定位)都会使原先的行内元素变成块级元素。
参考链接：https://www.jianshu.com/p/d69878549d92
喜欢
0
赠金笔