前端-CSS-display常见属性

display:none；

此元素不会被显示。

隐藏该区域，不占实际空间。但对后台来说真实存在，可以获取被隐藏的元素。

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。（网页占位）

display: none----将元素的显示设为无，即在网页中不占任何的位置。（网页不占位）

使用visibility属性设置元素的隐藏属性，并不能减少打开网页的速度，因为这个元素总是会随着页面一起下载。而通过display属性设置的却不一样，该元素相当于在页面中不存在，因此能够缩短页面加载时间。

display: flex；

flex是一种弹性布局属性。注意，设flex布局以后，子元素的float、clear和vertical-align属性将失效。

主要属性有两大类：容器属性和项目的属性

display:block;

块状显示。类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。(将元素转为块状元素，使该元素拥有块状元素的特点；)

设置元素为块状元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。

当元素设置了float属性后，就相当于给该元素加了display:block;声明​​​​​​​

display:inline；

内联显示。在元素后面删除换行符，多个元素可以在一行内并列显示。多个内联元素占同一行，直到放不下才换行。（元素转换为内联元素）设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效；元素的宽度就是它包含的文字或图片的宽度，不可改变。

display:inline-block；

行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input(行内块元素)。此元素前后没有换行符，可以设置宽高