【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别

display属性

根据css规范的规定,每一个网页元素都有一个display属性
用于确定改元素的类型,每一个元素都有默认的display属性值
比如div元素,它的默认值display属性值为"block",称为块元素
而span元素的默认值display属性值为"inline",称为行内元素

块元素与行元素是可以转换的,也就是说
display的属性值可以由我们自己改变

display常见属性值

  1. none:隐藏对象
  2. inline:指定对象为内联元素
  3. block:指定对象为块元素
  4. inline-block:指定对象为内联块元素
  5. table-cell:指定对象作为表格单元格
  6. flex:弹性盒

任何元素浮动后,display将失效

接下来我们来看案例

  <style>
    div,span{
      width: 200px;
      height: 200px;
    }
    div{
      background: rgb(180, 135, 135);
    }
    span{
      background: rgb(95, 164, 182);
    }
  style>
head>
<body>
  
<div>这是块状元素div>
  
<span>这是行内元素span>
body>

浏览器显示结果
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第1张图片
可以看见这是正常的显示结果
接下来我们来添加代码,让块元素和行元素进行互换

 div,span{
   width: 200px;
   height: 200px;
 }
 div{
   background: rgb(180, 135, 135);
   /* 设置为行内元素 */
   display: inline;
 }
 span{
   background: rgb(95, 164, 182);
   /* 设置为块级元素 */
   display:block;
 }

浏览器显示结果
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第2张图片
接下来我们看这样的一个例子
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第3张图片
浏览器显示结果
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第4张图片
这就是设置了inline-block之后,具有宽高属性,并且不会独占一行

我们也可以设置为单元格来处理

display:table-cell

【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第5张图片
浏览器显示结果:
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第6张图片
接下来我们来看看none
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第7张图片
当我们加上了 display:none;

浏览器显示结果
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第8张图片
说明它不会占据原来的物理空间

上面那一种是一种隐藏方式

还有一种是 visibility: hidden;
浏览器显示结果
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第9张图片
注意这一种是会占据原有的空间的哦

如果元素是使用visibility设置的隐藏方式,那么只能用visibility:visible的方式来让元素显示

visibility:visible

【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第10张图片
小结
visibility:设置元素是否显示

  • visible:显示
  • hidden:隐藏

注意:visibility和display:none的区别

  • visibility的隐藏方式仅隐藏了内容的显示 其占用的空间依旧占用

  • display:none的隐藏方式是隐藏改元素的内容和位置

visibility: hidden和display:none和opacity:0的区别

1. visibility: hidden和opacity:0会将元素隐藏,但是物理空间实际存在
2. display:none隐藏元素,不保留物理空间
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第11张图片
【DIV + CSS 标准化页面布局实战】display属性,块元素与行元素互换,visibility: hidden和display:none和opacity:0的区别_第12张图片
可以发现:opacity:0会将元素隐藏,但是物理空间实际存在

你可能感兴趣的:(css)