文章目录

display属性
- dispaly属性的作用
- display的分类
- - display-outside(外部值)
  - display-inside(内部值)
  - 使用flex实现上下左右居中：
  - 使用flex实现两列或三列布局：
- display-listitem（列表值）不常用
- display-internal（属性值）不常用
- display-box（显示值）
- display-legacy（混合值）
- global（全局值）

display属性

dispaly属性的作用

在CSS中display属性表示"显示框类型"，即不同的盒模型。简单来说，可以把块级盒子转成内联盒子，也可以把内联盒子转换为块级盒子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{display: block;background-color: skyblue;}.box2{display: inline;background-color: pink;}</style>
</head>
<body><div class="box1">块元素</div><div class="box1">块元素</div><span class="box2">行内元素</span ><span class="box2">行内元素</span >
</body>
</html>

展示效果如下：

可以看到，div具备了内联盒子的特性，而span则具备了块级盒子的特性。（块级元素和行内元素的区别）但是display远比这个复杂的多，其中弹性布局、网格布局等都是跟display有着紧密关系。

display的分类

display-outside(外部值)

外部值就是定义自身元素的外部表现，而不影响其内的子元素。

block：将元素表示为块级元素
inline：将元素表示为内联盒子
run-in：实际是块元素和行内元素的混合，可以使某些元素成为下一个块级框元素的行内部分。实验性质的属性，浏览器兼容不好

display-inside(内部值)

和外部值相反，内部值就死定义子元素布局的。像flex，grid这些都会影响到子元素的布局形式。

flow-root：一个BFC的块级盒子（注：BFC后面小节会讲解）
table：带有内部表格布局的块级盒子。
flex：带有内部弹性布局的块级盒子
grid：带有内部网格布局的块级盒子

flex布局和grid网格布局都是强大的布局属性，在当下的网页布局中，大多数是采用这两种布局。常用的flex布局就不多说了，下面是grid布局的基本使用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.grid{box-shadow: 0 0 1px  #f6f;width: 300px;height: 300px;background-color: aqua;display: grid;grid-template-columns:repeat(3,100px);grid-template-rows:repeat(3,100px);}.grid div{line-height: 100px;text-align: center;}</style>
</head><body><div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
</html>

展现效果：main元素被划分成了五个小方块，其中grid-template-columns是定义列宽；grid-template-rows是定义行宽的。

以下是flex布局的常用的使用方法：

使用flex实现上下左右居中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 300px;height: 200px;background: skyblue;display: flex;align-items: center;justify-content: center;}.box{width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="main"><div class="box"></div></div>
</body>
</html>

实现效果：

使用flex实现两列或三列布局：

两列布局：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {height: 100vh;background: skyblue;display: flex;}.box1 {width: 200px;background: pink;}.box2 {width: 100px;background: tan;flex-grow: 1;}</style>
</head><body><div class="main"><div class="box1"></div><div class="box2"></div></div>
</body></html>

展示效果：

三列布局：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {height: 100vh;background: skyblue;display: flex;}.box1 {width: 200px;background: pink;}.box2 {width: 100px;background: red;flex-grow: 1;}.box3 {width: 100px;background: purple;}</style>
</head><body><div class="main"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>
</html>

展现效果：

display-listitem（列表值）不常用

list-item-属性就是生成一个容纳内容和单独列表行内元素盒的块级盒子，目的是为了用div去代替

display-internal（属性值）不常用

一些和table布局，ruby搭配一起控制页面布局的属性值。

display-box（显示值）

contents：只影响其内容的样式生效，比如：字体带大小，文本颜色等；但像背景色、边框是不会生效的。设置了display: contents的元素本身不会被渲染，但是其子元素能够正常被渲染。
none：从盒子树中移除，包括其所有后代元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content{width: 500px;height: 500px;display: contents;background-color: aqua;}.content div{width: 100px;height: 100px;background-color: blue;font-size: 20px;text-align: center;}</style>
</head><body><div class="content"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

展现效果如下：

可以看出，对父元素content设置的样式完全不生效，相当于将content元素变成了一个仅供包裹的"无用"元素。

display-legacy（混合值）

inline-block：对外表现成内联盒子，对内表现成块级盒子
inline-table：对外表现成内联盒子，对子元素表现成表格盒子
inline-flex：对外表现成内联盒子，对子元素表现成弹性盒子
inline-grid：对外表现成内联盒子，对子元素表现成网格盒子

global（全局值）

inherit：继承父元素的display属性
initial：不管父元素怎么设定，恢复到浏览器最初始时的display属性
unset：unset混合了inherit和intial。如果父元素设置值了，就用父元素的设定，如果父元素没设置值，就用浏览器的缺省设定。

【CSS知识点】——display属性详解相关推荐

display属性详解及用法
display属性详解 1 block.inline.inline-block 2 flow-root 3 table.inline-table 4 flex.inline-flex 5 none 6 ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
CSS中margin属性详解
margin属性概述 margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位,可以是像素.英寸.毫米或 em. 相关属性 margin 可以单独改变元素的上 ...
css 的 hover属性详解
css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素.同级元素.相邻元素的样式 .hover 属性可以应用于任何元素,不仅仅是链接 .使用 hover ...
CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...

【CSS知识点】——display属性详解