Dotcpp  >  编程教程  >  CSS语法  >  CSS元素显示类型(display)

CSS元素显示类型(display)

点击打开在线编译器,边学边练

display 属性是 CSS 中最重要的属性之一,主要用来控制元素的布局,通过 display 属性您可以设置元素是否显示以及如何显示。

一、display 属性的作用

1. display 属性可以设置元素的 内部和 外部 显示类型

(1)外部显示类型:

a.元素的外部显示类型有 block块、inline内联等。

b.外部显示类型将决定该元素在流式布局中的表现。

(2)内部显示类型:

内部显示类型flex 布局、grid 网格布局、流式布局等。

元素的内部显示类型可以控制其子元素的布局方式。

2. 流式布局(文档流 或 常规流):

“文档流” 或 “流式布局” 是在对布局进行任何更改之前(默认情况下),在页面上显示 “块” 和 “内联” 元素的方式。

简单直白点来说,他是一种排版方式,这种排版方式规定了块级和内联元素在页面中如何排版显示。 

(1)流式布局中 - 块级元素排版方式:

块级盒子会从包含块的顶部开始,按序垂直排列。

同级盒子间的垂直距离会由“margin”属性决定。

相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠 

(2)流式布局中 - 内联元素排版方式:

盒子会从包含块的顶部开始,按序水平排列。

只有水平外边距、边框和内边距会被保留。

这些盒子可以以不同的方式在垂直方向上对齐:可以底部对齐或顶部对齐,或者按文字底部进行对齐

二、元素外部显示类型

1. splay 通过以下属性值来指定元素的显示类型

(1)block 块级

(2)inline-block 行内块

(3)inline 行内

2. 元素显示类型分为:块级 和 内联 等

3. 内联(行内)元素又分为:inline 内联元素和 inline-block 行内块元素

(一)diblock 块级元素

1. 常见的块级元素有:

<p>、<div>、<ul>、<ol>、<li>、<h1>~<h6>、<dl> 等

2. 块级元素的特点:

(1)独占一行

(2)可以设置 width、height 属性。

(3)在不设置宽情况下,宽默认为父元素内容区宽。

(4)块级元素里可以放任意类型元素,但是文字类元素标签内不能放其它块元素

(5)p 标签里不能放 p 和 div 标签。

(6)h1-h6 标签里不能放 p 和 div 标签。

(二)inline-block 行内块元素

1. 以下元素具有行内块元素的特性:

<img>、表单类元素、<video>、<audio> 等,这些元素本质上叫 可替换元素(归类归到行内元素) 

2. 行内块元素的特点:

(1)相邻的行内块(或行内)元素会在一行显示,放不下会换行。

(2)相邻的行内块元素之间会有空白间隙。

(3)可设置 width、height 属性,元素默认宽为它本身内容宽

(三)inline 内联(行内)元素

1. 常见的行内元素有:

<a>、<strong>、<span>、<i>、<del> 等

2. 行内元素特点:

相邻的行内元素会在一行显示,放不下时会换行显示

设置 width、height 属性是无效的。其宽高随其内容大小而撑开。

行内元素里只能放文本或其它行内元素

3. 注意:

<a>标签中不能再放<a>标签,但<a>标签中可以放块级元素

实际开发中,在某些情况下会把<a>标签转换为块级元素

三种元素类型对比

元素类型排列方式设置宽高效果内容
块级(block)独占一行width、height 有效任意元素
行内块(inline-block)一行可显示多个width、height 有效行内或行内块元素
内联(inline)一行可显示多个width、height 无效行内或文本元素

三、行内元素和块级元素的互相转换

我们只需要给对应的元素添加对应display属性值,就可以把元素转换为对应的元素类型。

(1)使用 display: block; 即可将元素转换为块级元素。

举例:

<!DOCTYPE html>
<html>
<head>
    <style>
        a{
            display: block;
            width: 150px;
            height: 50px;
            background-color: #ACC;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="">dotcpp编程链接</a>
</body>
</html>

运行结果:

display: block

(2)使用 display: inline; 即可将元素转换为行内元素。不过将元素转换为行内元素的应用不多见

(3)使用 display: inline-block; 即可将元素转换为 行内块元素

四、隐藏元素方法

属性功能描述
display:none;隐藏元素可以将元素隐藏,子孙元素全部隐藏不可见,并且没有任何办法可见。元素隐藏后不会占空间。
visibility:hidden;隐藏元素将元素隐藏,子孙元素全部不可见,但是给子孙加上 visibility: visible;时,子孙可见。 隐藏后仍占其位置,会留下空白的一块区域。(基本不用)

补充:

(1)display 除 none 以外的值,均为显示元素。

(2)visibility:visible; 为显示元素

举例:

display 的属性值 none 可以用来隐藏元素,与visibility: hidden;功能相似,不同的是display: none;在隐藏元素的同时,它还会将元素所占的位置一并隐藏。display: none;通常会与 JavaScript 结合使用来隐藏或显示某个元素,下面通过一个示例来演示一下:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 350px;
            height: 100px;
            background-color: #AAA;
        }
    </style>
</head>
<body>
    <div id="box"> </div>
    <button onclick="change_box(this)">隐藏</button>
    <script>
        function change_box(obj){
            var box = document.getElementById('box');
            if(box.style.display == 'none'){
                box.style.display = "";
                obj.innerHTML = "隐藏";
            }else{
                box.style.display = "none";
                obj.innerHTML = "显示";
            }
        }
    </script>
</body>
</html>

运行结果:

display: none;display: none;


五、两种隐藏方法的区别

区别display: nonevisibility: hidden
空间占据性不占据空间占据原空间
回流与渲染性会产生回流与重绘不会产生回流,只会产生重绘
对子元素影响子孙元素全部隐藏不可见。并且只要父元素隐藏,子孙没有任何办法可见子孙元素全部不可见,但是给子孙加上 visibility: visible;时,子孙可见。

六、去掉行内块元素默认的空白间隙

行内块元素间会默认产生空隙。

产生间隙原因:

(1)元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理

(2)根据 white-space 的处理方式(默认是 normal,合并多余空白),原来 HTML 代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。

(3)这些元素之间的间距会随着字体的大小而变化

解决办法:

(1)给父元素添加 font-size: 0px; 同时子元素重写 font-size

font-size 属性有继承性,所以父元素 font-size:0; 会继承到子元素 span,则子元素需要重新设置 font-size 大小

(2)给元素添加 float

元素添加 float 后,会脱离文档流,父元素未添加高度时,会出现高度塌陷问题,则需要清除浮动造成的问题。

(3)图片间空隙,给图片添加 display:block;

加了 display:block 之后,图片成为块级元素,独占一行


本文固定URL:https://www.dotcpp.com/course/1152

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)