display属性详解
1 block、inline、inline-block2 flow-root3 table、inline-table4 flex、inline-flex5 none6 list-item7 contents8 grid、inline-grid
1 block、inline、inline-block
display: block;，使用之后生成一个块级元素盒，在标准文档流中，该元素之前和之后产生换行。 display: inline;，使用之后生成一个内联元素盒，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。 display: inline-block;，在内联和块之间提供了一个中间状态，使用之后生成一个内联块元素，该元素width和height属性会生效，padding，margin，以及border会推开其他元素。但是，它不会跳转到新行。
块级盒子与内联盒子的行为：
块级盒子会表现出以下行为： 1、盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽 2、每个盒子都会换行 3、width和height属性可以发挥作用 4、内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开” 5、除非特殊指定，诸如标题(
等)和段落(
)默认情况下都是块级的盒子。
内联盒子会出现以下行为： 1、盒子不会产生换行。 2、width和height属性将不起作用。 3、垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开。 4、水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。 5、用做链接的元素、以及都是默认处于inline状态的。
2 flow-root
无论是内联元素还是块级元素，使用之后都会变成块级元素，同时会建立一个新的块级格式化上下文（BFC），定义格式化上下文的根元素。
BFC的作用有：①布局；②清除浮动；③去除margin合并现象，因此，display: flow-root;也有类似的作用。
用盒子塌陷举个例子，为父元素规定了宽度，子元素规定宽度和高度，并设置浮动，这样的子元素脱离了文档流，导致父元素没有高度撑起来，从而盒子塌陷，因此只能看到子元素的效果：
如果给父元素设置display: flow-root;，触发BFC，那么它就会把浮动元素的高度计算上，从而达到清除浮动的效果：
3 table、inline-table
display: table;的行为类似于HTML的
| 和 | 此元素会作为一个表格单元格显示table-caption 示例：写一个成绩表 XXX成绩表
姓名
语文
数学
张三
100
100
李四
99
99
4 flex、inline-flex 该属性会将元素变为弹性盒子（或内联的弹性盒子），它能够扩展和收缩容器内的元素，以最大限度地填充可用空间。与Flexbox 是一个更强大的方式，主要表现在： 在不同方向排列元素重新排列元素的显示顺序更改元素的对齐方式动态地将元素装入容器 它与以下属性搭配使用： 属性说明属性值flex-direction设置布局方向row：默认值，主轴为水平方向（水平布局），起点在左端，从左向右排列row-reverse：主轴为水平方向（水平布局），起点在右端，从右向左排列column：主轴为垂直方向（垂直布局），起点在上沿，从上往下排列column-reverse：主轴为垂直方向（垂直布局），起点在下沿，从下往上排列flex-wrap设置元素环绕效果nowrap：默认值，表示不换行wrap：换行wrap-reverse：换行，第一行在下方justify-content水平对齐方式flex-start：默认值，左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间的间隔相等space-around：项目两侧的间距相同，项目之间的间距比两侧的间距大一倍align-items交叉轴对齐方式flex-start：交叉轴的起点对齐flex-end：交叉轴的终点对齐center：交叉轴的中点对齐baseline: 项目的第一行文字的基线对齐stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度align-content轴线对齐方式flex-start：与交叉轴的起点对齐flex-end：与交叉轴的终点对齐center：与交叉轴的中点对齐space-between：与交叉轴两端对齐，轴线之间的间隔平均分布space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍stretch：默认值，轴线占满整个交叉轴order项目的排列顺序，数字越小排列越靠前，默认为0。数字flex综合属性设置flex属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值为0，1，auto。 5 none display: none;使元素不再显示，其对布局不会有影响（文档渲染得好像这个元素并不存在）。所有的后代元素也不会再显示。 6 list-item list-item的单独值将导致元素的行为类似于一个列表元素。其可以与list-style-type和list-style-position一起使用。 示例代码： 1111111111
2222222222
3333333333
7 contents 使用display: contents;后，元素自身不会产生特定的盒子，但是它保留其子代元素的正常展示。它的样式规则使div元素不产生任何边界框，因此元素的背景、边框和填充部分都不会渲染。然而，继承的属性如颜色（color）和字体（font）却能照常影响到子元素。 例如下面的html结构： 首先为其添加这样的样式： .d1 { width: 200px; height: 100px; background: pink; } .d2 { border: 2px solid red; padding: 20px; } .d3 { border: 2px solid purple; padding: 20px; } 如果我们为中间的盒子添加display: contents;，可以看到中间的盒子好像不存在了，但是它的子元素可以正常的渲染： .d2 { display: contents; border: 2px solid red; padding: 20px; } 根据这样的特性，这个属性适用于那些充当遮罩的元素，这些元素本身没有什么作用，是可以被忽略的布局场景。 8 grid、inline-grid display: grid;：行为类似块级元素并且根据网格模型布局（Grid布局）它的内容 display: inline-grid;：行为类似于内联元素并且它的内容根据网格盒模型布局 grid布局即网格布局，是一种 CSS 二维布局，布局需要配合以下属性来完成： 属性说明示例grid-template-columns设置列宽，有几列就写几列的宽度grid-template-columns: 100px 100px 100px;显示为三列每一列宽度100pxgrid-template-rows设置行高，有几列就写几列的高度grid-template-rows: 100px 100px 100px;显示为三行每一行高度100pxrow-gap设置行间距row-gap: 10px;行间距为10pxcolumn-gap设置列间距column-gap: 15px;列间距为15pxgrid-template-areas定义区域，一个区域由多个单元格组成为需要布局的div添加grid-area属性起名，例如grid-area: a，该区域就叫agrid-template-areas: "a a b" "a a c" "d e e";abcde字母就代表定义的区域justify-items主轴方向项目对齐justify-items: start | end | center | stretch;align-items交叉轴方向项目对齐align-items: start | end | center | stretch;justify-content主轴内容对齐，控制整个内容区域在容器里面的水平位置justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content交叉轴内容对齐，控制整个内容区域的垂直位置align-content: start | end | center | stretch | space-around | space-between | space-evenly; 简单的使用示例： ✨ 相关作品
网上365不给提款的解决办法
口袋妖怪mega进化图鉴大全(所有mega进化)
Bet体育365第二次提款要多久
2024年最新十大免费杂志阅读软件排行榜
Bet体育365第二次提款要多久
夏朝君王大禹是怎么死的？大禹的死因是什么？🌟 友情链接 |
|---|