Css4规范（Css4规范）



CSS布局技术允许开发者拾取网页中的元素，控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置，布局技术主要包括常规流布局、弹性盒子、网格、浮动、定位、多列布局，每种技术都有独特的用途，各有优缺点，相互辅助，通过理解各个布局方法的设计理念，构建网页布局方案。

常规流布局是在没有改变布局规则情况下的页面元素布局方式，即在开发者未曾应用CSS规则改变网页中元素的展现方式时，元素会按照常规流布局组织页面。常规流布局的设计初衷在于构建易读、合理的文档，开发者应该遵循这样的指引原则，在对布局做出改动时与常规流布局协同，而不是与之对抗。默认地，块级元素按照基于其父元素的书写模式（默认值“horizontal-tb”）的块流动方向（block flow direction）放置，每个块级元素会在上一个元素下面另起一行，以指定的外边距分隔；行内元素不会另起一行，只要父级块级元素的宽度内有足够的空间，会与其他行内元素放在同一行，空间不够时，溢出的内容会下移到新的一行，代码示例如下。

如图3-2-2-1所示。

（1）什么是弹性盒子

弹性盒子是一种按行或按列布局的一维布局方式，元素可以膨胀以填充额外的空间，收缩以适应更小的空间。在使用弹性盒子时，指定元素的布局为flexible，给这些flexible元素的父元素的“display”属性设置为“flex”,或者将“display”属性设置为“inline-flex”，但是这种情况下元素的行为类似于行内元素。代码示例如下。

设置了“display：flex;”的父元素被称之为flex容器（flex container），在flex容器中表现为弹性的盒子的元素被称之为flex项（flex item），如图3-2-3-1所示。

当元素表现为flex框时，元素沿着两个轴来布局。

（2）使用弹性盒子

在将元素设置为弹性盒子之后，可以通过一些属性定义弹性子元素如何在弹性容器内布局。

应用在弹性盒子父元素上的属性如下。

应用在弹性子元素上的属性如下。

以下是一个简单示例，其中“.flex-container”是Flexbox的父容器，“.flex-item”应用于所有子元素，每个子元素平分可用空间，且第二个子元素占据的空间是其他子元素的两倍，代码示例如下。

💡 注意：

大多数浏览器都支持弹性盒子，诸如 Firefox、Chrome、Opera、Microsoft Edge 和 IE 11，较新版本的 Android/iOS 等等，但是仍旧有被人使用的老浏览器不支持弹性盒子（或者只支持老版本的弹性盒子），弹性盒子的浏览器兼容性如下图所示。

网格布局（Grid Layout）是CSS中一种强大的布局系统，允许开发者以二维网格的方式对元素进行布局，同时在两个维度上对元素进行定位和对齐，以下是网格布局中常用的一些属性。

📌 网格布局的浏览器兼容性如下图所示。

浮动（Float）可以使元素脱离其正常的文档流，向左或向右移动，直到元素的外边缘碰到包含框或另一个浮动元素的边缘，浮动元素之后的元素将围绕它，浮动元素之前的元素不会受到影响，要使用浮动，可以通过为元素设置“float”属性来实现， 有三个取值，“none”（默认值，不浮动）、“left”（向左浮动）、“right”（向右浮动）。浮动的影响如下。

由于浮动可能导致父容器高度塌陷等问题，因此通常需要清除浮动，清除浮动主要有以下几种方式。

① 使用伪元素清除浮动，通过为父容器添加一个伪元素，并设置“clear: both;”属性来清除浮动，示例代码如下。

② 设置父容器“overflow”属性，为父容器设置“overflow: hidden;”或“overflow: auto;”也可以清除浮动。

③ 为浮动元素后的元素设置“clear”属性，直接在浮动元素后面的元素上设置“clear: left;”或“clear: right;”或“clear: both;”，这通常不是最推荐的做法，因为它依赖于文档结构。

💡 注意：

在现代布局技术中，虽然浮动在CSS布局中仍然有用，但现代CSS提供了更强大和灵活的布局工具，因此，在创建新的Web项目时，建议优先考虑使用Flexbox或Grid布局，而不是浮动。

定位允许开发者精确控制元素在页面上的位置，通过“position”属性实现，有多个取值，每种取值对应不同的定位方式，结合“top”、“bottom”、“left”、“right”四个属性改变定位元素位置，以下是CSS布局中主要的定位方式及其特点。

🔔 注意：

Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 “-webkit- prefix”。

元素的定位与文档流无关，所以定位后的元素可以覆盖页面上的其他元素，“z-index”属性指定了一个元素的堆叠顺序（哪个元素应该放在前面或后面），取值可以为正值或负值，具有更高堆叠顺序的元素在较低的堆叠顺序元素的前面，如果两个定位元素重叠，且没有指定“z-index”属性，最后定位在HTML代码中的元素将被显示在最前面。

多列布局是一种将内容分割成多个列并排显示的方法，这种布局方式非常适合于报纸、杂志、博客文章等内容的展示，因为多列布局可以自动处理内容的流动和列之间的平衡，多列布局的基本属性如下。

🔔 注意：

创作说明

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/14699.html