CSS必知|重点属性display|实践技巧|温故知新

学海无涯，不要沉浸在知识的海洋里，迷失自己。

要知道自己想要什么，抓住重点，不忘初心。

这个世界上百分之20的人，掌握着百分之80的财富。

接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。

往期知识点回顾：

重点属性-media

重点属性-position

重点属性-float

重点属性-flex

重点属性-overflow

重点属性-background

一、重点属性display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline

span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none

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

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

其他 display 值

还有很多的更有意思的 display 值，例如 list-item 和 table 。之后我们会讨论到 inline-block 和 flex 。

额外知识点

就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

面试题：

1.常用的dispaly属性值有哪些？

block、inline、inline-block、flex、table、list-item........

2.display:none 与visibility: hidden 有什么区别？

把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

3.行内元素和块元素的区别？

一般来说，html的元素分为两种，即块级元素和行内元素。

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。

行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；

常见内联元素有：em,strong,span,button,input,label,code,select,img,textarea

两者之间的区别：

区别：

1.块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里除非放不下，才会挤到新的一行

2.块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的

3.块级元素可以包含块级元素和内联元素，而内联元素只能包含文本

4.块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用。

需要敲代码练习的地方：

熟悉对块级元素和行内元素

对块级元素和行内元素的区别进行实践练习

对块级元素和行内元素width 和 height 的要求

块级元素和行内元素对设置margin和padding属性的要求

display:none 与visibility: hidden 属性的区别

参考文献：https://developer.mozilla.org/en-US/docs/Web/CSS/display