领取淘宝天猫优惠券:优惠淘 | 欢迎使用随心而码微信小程序,微信搜一搜【随心而码】可直接搜到。

CSS-display 属性——网页布局绕不开的坎

html&css Hicoder 726℃ 0评论

如果不对html中的内容进行布局,也就是排版,那么所有的内容将堆砌在一起,严重影响阅读。
说到网页布局,不得不谈css的display属性。

display属性

dispaly是css中非常重要的控制布局的属性。每一个html元素都具有该属性。该属性决定了每一个元素的在网页中将如何呈现。通常大多数的元素默认display的值为blockinline


div { display: block; }

block

display值为block的元素我们称之为块级元素。最常见的块级元素有 div。其他还有 p 、form、header、footer 等元素。

块级元素最显著的特征:独占一行,尽可能撑满容器。表现为另起一行开始,而且其后的元素也必须另起一行显示。

inline

inline元素我们称之为行内元素。标准的行内元素有 span 元素, a 元素也是常用的行内元素。

一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。即可以和其他行内元素位于同一行。

none

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它,例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。


document.getElementById("id_name").style.dispaly = "none";

它和 visibility 属性不一样。两者都能隐藏元素。把 display 设置成 none 元素不会占据它本来应该显示的空间。但是设置成 visibility: hidden; 元素还会占据空间。

值得一提的是,虽然每个元素都有其默认的display属性值,我们依然可以通过css修改其display属性值,比如将 block 修改为 inline,以获取我们需要的布局效果。

转载请注明:随心而码 » CSS-display 属性——网页布局绕不开的坎

喜欢 (2)