CSS3学习（五）：display 属性

display 属性是用于控制布局的最重要的 CSS 属性。

display 属性

display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

block 为块级元素（block element）
- 块级元素总是从新行开始，并占据可用的全部宽度
inline 为行内元素（inline element）
- 内联元素不从新行开始，仅占用所需的宽度。

display: none;

display: none;通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。
默认情况下，<script> 元素使用 display: none;。

覆盖默认的 display 值

如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。
将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。
一个常见的例子是为实现水平菜单而生成行内的 li 元素：

li {display: inline;
}

设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

隐藏元素

通过将 display 属性设置为 none 可以隐藏元素。

visibility:hidden; 也可以隐藏元素。

区别：

display: none; 该元素将被隐藏，并且页面将显示为好像该元素不在其中。
visibility:hidden; 该元素将被隐藏，但该元素仍将占用与之前相同的空间，仍会影响布局。

CSS3学习（五）：display 属性相关推荐

CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS学习之display属性与浮动
1>display display属性主要是用来控制HTML元素的显示和隐藏与块级元素与行内元素的转换的. display的值,如下 --> block(块级元素 ) block元素 ...
HTML5+CSS3的学习(五)
HTML5+CSS3的学习(五) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
display属性_前端基础：Grid 布局教程，重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...

CSS3学习（五）：display 属性

CSS3学习（五）：display 属性

display 属性

display: none;

覆盖默认的 display 值

隐藏元素

CSS3学习（五）：display 属性相关推荐

最新文章

热门文章