一个 HTML 盒子元素以样什么方式显示是否独占一行能否设置宽高内部子元素该如何排列。全都由display这个属性决定。display是 CSS 最核心、最常用的属性之一。而它的几个孩子也有着不同于彼此的属性。用一个表格来讲。display 值会不会换行能否设置宽高用途block会能大容器、段落、标题inline不会不能文字高亮、链接inline-block不会能按钮、导航、图标none隐藏-隐藏元素flex父控制子能现代灵活布局相信上面的表格已经让你对display这个属性有了基础的认识下面我们通过代码和一些注意事项对他进行更深一步的认识吧。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title盒子的display属性控制元素的性质/title style #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; /* 隐藏元素 */ /* display: none; */ /* 强行设置为普通行内元素 宽高不能自行设置其宽高仅由内容撑起 */ /* display: inline; */ /* 强行设置为行内块元素通过配置成inline-block 宽高可以自行设置 */ /* display: inline-block; */ } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; /* 行内元素宽高不能设置只能有默认的宽高 */ /* display: inline; */ /* 强行设置为行内块元素通过配置成inline-block 宽高可以自行设置 */ /* display: inline-block; */ } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; /* 强行设置为行内块元素通过配置成inline-block 宽高可以自行设置 */ /* display: inline-block; */ } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; /* 强行设置为行内块元素通过配置成inline-block 宽高可以自行设置 */ /* display: inline-block; */ } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; /* 强行配置为块元素宽高可以设置 */ /* display: block; */ /* 强行设置为行内块元素通过配置成inline-block 宽高可以自行设置 */ /* display: inline-block; */ } /style /head body div classcontainer !-- 普通块元素 -- div iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子4/div !-- 普通行内元素 -- b盒子5/b b盒子6/b /div /body /html运行效果如图这时有人会问了。为什么盒子56的行高和宽度没有变化呢代码中的b元素不是已经给他们设置了吗这不 注意事项就来了display默认是inline行内元素行内元素是无法直接设置宽高的那我们要怎么解决呢我们可以设置块内元素来强行控制它。代码如下display: block;如此我们便可以得到这样整整齐齐的盒子了。而我们不仅可以让他竖着来也可以让他横着来。/* 强行设置为行内块元素通过配置成inline-block 宽高可以自行设置 */ display: inline-block;下面我们来介绍一下display一个比较特殊的孩子Flex。Flex容器父元素给父标签加 display: flex它就变成Flex容器能控制所有子元素的排列方式Flex项目子元素容器里的所有直接子标签会自动遵循Flex规则排列不再是默认的垂直流式布局同时要记住两条轴线所有对齐、排列都靠这两条线主轴默认水平左右方向子元素默认顺着主轴从左到右排交叉轴默认垂直上下方向和主轴相互垂直!DOCTYPE html html langzh-CN head !-- 【Flex 布局核心概念与机制】 Flexbox 是 CSS3 引入的一种一维布局模型旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。 其核心概念包括 容器与项目采用 Flex 布局的元素称为 Flex 容器其内部的子元素称为 Flex 项目。 主轴与交叉轴Flex 容器有两根轴主轴由flex-direction定义交叉轴垂直于主轴。 对齐方式justify-content 控制主轴对齐align-items 和 align-content 控制交叉轴对齐。 空间分配通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。 -- meta charsetUTF-8 titleFlex布局示例1 - 基本容器按照默认规则排列/title style .container { /* Flex 容器默认规则不写属性时的默认值 1. flex-direction: row → 主轴方向水平从左到右 → 项目会水平排列成一排 2. flex-wrap: nowrap → 不换行默认 → 项目会被压缩以适应容器宽度除非设置 flex-shrink: 0 → 如果想换行需要设置: flex-wrap: wrap; 3. justify-content: flex-start → 主轴对齐方式项目靠主轴起点左对齐 → 其他值: flex-end(右) | center(居中) | space-between | space-around 4. align-items: stretch → 交叉轴对齐方式项目会拉伸填满整个交叉轴方向 → 前提项目没有设置 height或者 height 为 auto → 其他值: flex-start | flex-end | center | baseline 5. align-content: normal (在单行时无效) → 多行项目在交叉轴方向的对齐方式 项目item的默认规则 6. flex-grow: 0 → 默认不自动放大当容器有剩余空间时 → 如果想自动放大: flex-grow: 1; 7. flex-shrink: 1 → 默认会自动收缩当项目总宽度超过容器时 → 注意只有 width/flex-basis 参与收缩margin/padding/border 不会收缩 → 如果不想收缩: flex-shrink: 0; 8. flex-basis: auto → 项目的基础尺寸默认取 width 值 → 也可以设置为具体像素: flex-basis: 100px; */ /* 通过 display:flex 将此元素强制转换为 Flex 容器 */ display: flex; /* 下面是可自行配置的灵活规则 */ /* flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; */ border: 2px solid #aaa; width: 600px; height: 300px; padding: 10px; } .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; text-align: center; } /style /head body h3Flex容器示例项目按照容器默认规则排列/h3 div classcontainer !-- 块元素从上到下文档流排列 -- div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div div classitem项目1/div div classitem项目2/div div classitem项目3/div div classitem项目1/div /div /body /html主轴对齐方式!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleFlex布局示例3 - justify-content主轴对齐方式/title style /* justify-content 属性详解 作用控制所有项目在主轴水平方向上的对齐方式和间距分布 前提只有在主轴方向有剩余空间时才会生效 可选值 1. flex-start → 项目靠主轴起点左边对齐默认值 2. flex-end → 项目靠主轴终点右边对齐 3. center → 项目在主轴方向居中对齐 4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等 5. space-between → 项目之间间距相等但首尾项目紧贴容器边缘 6. space-around → 项目两侧的外边距相等项目之间间距是边缘间距的2倍 */ .container { display: flex; border: 2px solid #a00; padding: 10px; height: 100px; } /* 项目样式 简单设置项目的尺寸和外观 */ .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; /* margin: 5px; padding: 20px; */ text-align: center; } /style /head body h1justify-content控制主轴对齐方式/h1 !-- justify-content属性的六种取值控制项目在主轴上的对齐方式和间距分布。 -- h3justify-content: flex-start 项目在容器中以主轴起点对齐默认值/h3 div classcontainer stylejustify-content: flex-start; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: flex-end 项目在容器中以主轴终点对齐/h3 div classcontainer stylejustify-content: flex-end; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div !-- h3justify-content: center 项目在容器中以主轴居中对齐/h3 div classcontainer stylejustify-content: center; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: space-evenly 项目在容器中均匀分布/h3 div classcontainer stylejustify-content: space-evenly; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: space-between 项目在容器中均匀分布但首尾项目紧贴容器边缘/h3 div classcontainer stylejustify-content: space-between; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div h3justify-content: space-around 项目在容器中均匀分布但每个项目两侧外边距相等/h3 div classcontainer stylejustify-content: space-around; div classitem项目1/div div classitem项目2/div div classitem项目3/div /div -- /body /html多行项目在容器交叉轴方向上的对齐方式!DOCTYPE html html head meta charsetUTF-8 titleFlex布局示例6 - 多行项目在容器交叉轴方向的对齐方式含换行控制/title style /* align-content 属性详解 作用控制多行项目在交叉轴垂直方向上的对齐方式 重要前提 1. 必须先使用 flex-wrap: wrap 换行产生多行 2. 只有一行时align-content 无效 3. 只有在交叉轴方向有剩余空间时才会生效 可选值 1. flex-start → 所有行靠交叉轴起点顶部对齐 2. flex-end → 所有行靠交叉轴终点底部对齐 3. center → 所有行在交叉轴方向居中对齐 4. space-between → 行之间间距相等首行靠顶末行靠底 5. space-around → 行上下间距相等整体与容器边缘也有间距 6. stretch → 默认值行拉伸填满剩余空间行内项目也会被拉伸 */ /* flex-wrap 属性说明 可选值 1. nowrap (默认) → 不换行项目会被压缩以适应容器 2. wrap → 换行项目超出容器时自动换到下一行 3. wrap-reverse → 换行但反向显示第一行在底部 */ /* 定义flex容器的基础样式 */ .container { /* 将容器设置为flex布局 */ display: flex; /* 容器宽度固定控制换行效果 */ width: 500px; /* 容器高度固定为交叉轴留出空间 */ height: 250px; /* 容器边框方便观察整体范围 */ border: 2px solid #333; /* 容器之间的外边距避免拥挤 */ margin: 10px; /* 强制换行当项目总宽度超过容器时自动换行产生多行 */ flex-wrap: wrap; } /* 项目样式 注意本示例中项目没有 margin所以 flex-shrink 可以正常压缩 如果项目有 marginmargin 不会参与压缩可能导致溢出 */ .item { /* 项目宽度 */ width: 160px; /* 项目高度 */ height: 40px; /* 项目边框 */ border: green solid 1px; /* 文字颜色 */ color: red; /* 文字水平居中 */ text-align: center; /* 项目外边距注释掉为了让 flex-shrink 正常压缩*/ /* margin: 5px; */ } /* 标题样式 */ p { margin: 20px 0 5px 10px; } /style /head body !-- align-content vs align-items 区别 本页面展示了 align-content 的效果 注意由于 flex-wrap 被注释掉项目没有真正换行 所以本示例中 align-content 实际上不生效只有一行。 如果想看真正的多行对齐效果需要取消注释 flex-wrap: wrap; 重要区别 - align-items: 作用于单行内的所有项目垂直方向的对齐 - align-content: 作用于多行整体多行作为一个整体在容器中的对齐 换行相关属性 - flex-wrap: nowrap (默认) → 不换行 - flex-wrap: wrap → 换行 -- h1多行项目在容器交叉轴方向上的对齐方式/h1 !-- 第一个容器没有设置 align-content所以使用默认值 stretch 由于没有换行flex-wrap 被注释所以 align-content 实际不生效 -- palign-content: flex-start所有行整体靠交叉轴起点/顶部/p div classcontainer stylealign-content: flex-start; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div !-- 2. align-content: center -- !-- 效果所有行作为一个整体在容器垂直方向居中 -- palign-content: center所有行整体在交叉轴中间/垂直居中/p div classcontainer stylealign-content: center; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div !-- 3. align-content: flex-end -- !-- 效果所有行靠容器底部对齐 -- palign-content: flex-end所有行整体靠交叉轴终点/底部/p div classcontainer stylealign-content: flex-end; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div !-- 4. align-content: space-between -- !-- 效果第一行靠顶最后一行靠底行之间间距相等 -- palign-content: space-between行与行之间间距相等第一行靠顶最后一行靠底/p div classcontainer stylealign-content: space-between; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div !-- 5. align-content: space-around -- !-- 效果每行上下间距相等整体与容器边缘也有间距 -- palign-content: space-around行上下都有相等间距整体与容器边缘也有间距/p div classcontainer stylealign-content: space-around; div classitem1/div div classitem2/div div classitem3/div div classitem4/div div classitem5/div div classitem6/div div classitem7/div div classitem8/div /div /body /html