首先我们要知道什么是块级元素和行内元素有什么区别;
承接上篇文章:(浅谈HTML和body标签)
块级元素:浏览器解析为独占一行的元素(例如:div、table、ul等。),浏览器会在该元素的前后显示拆行(也就是所谓的加个换行符);
行内元素:浏览器解析为独立元素(例如:img、a、span等),不会自动拆行。
tip:块元素和行内元素可以相互转换,这个要依具体情况而定。有时候块级元素很难实现的效果转化成行内元素会收获不一样的效果。
ok;我们了解了什么是块元素什么是行内元素了,那我们知道他们是通过什么方式转化的么。不要急,请接着看下文。
这时候我们就不得不介绍一个我们很容易犯错,但是只会用个别值的一个属性,display;
display顾名思义是显示的意思;所以属性有了那么值是什么呢?又代表着什么含义呢?对,就是以何种方式显示;
-
块元素的display默认属性是block;所以会显示成独占一行。
-
行内元素display默认属性是inline;所有会渲染成没有换行的元素;
除此之外:最常用的两个属性就是none;其实我们经常会用display:none;来隐藏元素。
一下列出的属性为最新浏览器兼容的属性;