原文网址:CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客
简介
本文介绍CSS的块级元素(block)、内联元素(inline)和内联块元素(inline-block)的区别。
对比
特殊的元素
几个特殊的块元素只能包含内联元素而不能包含块级元素:h1~h6、p、dt。
li可以包含div标签
将ul元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。
替换元素与非替换元素
替换元素(空元素)
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。例如:img、input、textarea、select、object。
这样的元素也称为:空元素,因为这些元素没有实际的内容。例如:<img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
例1:img
浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容。
例2:input
根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
不可替换元素(非空元素)
html 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。
例如:<p>段落的内容</p>段落<p>是一个不可替换元素,文字“段落的内容”全被显示。
元素转换
1.display
块元素:默认display:block;内联非替换元素(a,span):默认为display:inline;内联替换元素(input):默认为display:inline-block;
display:none;/*不显示该元素,也不会保留该元素原先占有的文档流位置。*/
display:block;/*转换为块级元素。*/
display:inline;/*转换为行内元素。*/
display:inline-block; /*转换为行内块级元素。其实仍为行内元素,但可以设置width及height等*/
2.float
当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了之间的莫名空白。
3.position
为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。
块元素大全
内联元素大全
可变元素大全
可变元素为根据上下文语境决定该元素为块元素或者内联元素。