CSS中的display属性总结

主要写一些笔者在学习display 属性时遇到的知识点，文末会添加一些拓展阅读。

---

display:block

常用标签：div、p、form、header、footer、section。
每个元素会换行，默认从左到右撑满整个容器，但是允许设置宽高。

.test {
display:block;
height:100px;
width:100px;
background-color:salmon;
padding:10px;
border:10px solid;
}

默认

值得一提的是此时的div的实际宽高是140px。
但是我们可以在全局中添加box-sizing属性。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

设置了box-sizing: border-box;之后

这样div的实际宽高是100px，就是你设定的值。

---

display:inline

常用标签：a、span、label、input。
不会换行。不能设置宽度和高度，text-align属性，宽高随着内部内容和padding改变。

---

display:inline-block

不会换行同时可以自定义宽高。

---

display:none

不显示该元素，不占用空间。visibility: hidden;同样都是隐藏元素，但是会导致占用空间。

---

display:flex

参照阮一峰老师的博客，介绍的非常全面

---

拓展阅读：一些常用的语义化标签

html5引入了许许多多的语义化标签，用来替代我们原先滥用的div span等等元素。使用合理能使得代码的可读性大大加强。同时使得搜索引擎或者屏幕阅读器能更加方便的找到页面上的元素。

<header> 页眉

通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息，起到引导与导航的作用。默认display:block。

<nav> 导航

表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。默认display:block。

<section> 区块

实现比如文章的章节，标签式对话框中的各种标签页等功能。默认display:block。

<aside> 侧边栏

实现比如升式引用、侧边栏、相关文章的链接、广告、友情链接等功能。默认display:block。

<footer> 页脚

和 <header> 标签对应，可以实现比如附录、索引、版权页、许可协议等功能。默认display:block。