元素的分类——dispaly

1.元素的显示属性

display 元素以什么⽅式显示(以下为常⽤显示⽅式)

display: block; 以块级元素⽅式显示

display: inline; 以内联元素⽅式显示

display: inline-block; 属于⾏内元素，但以块级显示，俗称⾏内块

display: none; 不显示

display: table; 以table⽅式显示

2.内联元素

内联元素也可以叫⾏内元素

设置宽度⾼度⽆效（⾏内块级显示元素除外）

和其他内联元素横向从左向右排列

设置上下内、外边距⽆效 常⻅的⾏内元素 span a 等

3.inline-block 行内块元素

它是⾏内元素的⼀种

不⾃占⼀⾏横向从左向右排列

可以设置宽度、⾼度以及内外边距

常⻅的⾏内块级显示元素 img button input

会出现幽灵空⽩节点

      a.把img标签变成块级元素 display: block;

      b.⽗级元素 font-size: 0; 去掉空⽩节点

4.块级元素

每个元素都⾃占⼀⾏，后⾯的元素也只能另起⼀⾏
元素的宽度、⾼度以及内外边距都可以设定
块级元素宽度不设定，为⽗级元素宽度
⾼度不设定为内容⾼度，如果没有内容，⾼度为0
常⻅的块级元素 div,p,h1,ul,li,table

5. 显示和隐藏属性

1. display:none
    display：none; 使元素消失，脱离⽂档流的消失
    display：block; 使元素出现，元素显示为块级元素
2. visibility: hidden
    visibility: visible; 元素显示
    visibility: hidden； 元素隐藏，占据⾃身位置
3. opacity: 0;
    opacity属性代表元素的透明度，取值范围是0-1之间的数字,0 代表完全透明,1 代表不透明
    缺点是，元素内的⼀切都会随着透明度改变

     display和visibility的区别：visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。