CSS 布局网页

原创已于 2022-04-14 18:23:19 修改 · 601 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

于 2022-04-13 22:42:29 首次发布

HTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS的三种传统布局方式：普通流、浮动和定位。普通流中，块级元素从上到下排列，行内元素从左到右排列。浮动常用于实现元素一行显示，`float`属性使元素脱离标准流并允许它们在一行内对齐。定位则通过`position`属性实现，如绝对定位结合`transform`可以实现盒子居中。对于网页布局，浮动和标准流是关键策略。

文章目录

CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）
盒子居中

CSS 提供了三种传统布局方式（简单说就是盒子如何进行排列）

普通流（标准流）

标签按照规定好的默认方式排列。
1、块级元素会独占一行，从上向下顺序排列。
2、行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

浮动

在一行排列，宽高生效，浮动后的标签具备行内块特点。

浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动！

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

div {
    float: left;
}

浮动特性：
1、浮动元素会脱离标准流（脱标）
2、浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

定位

盒子居中

    <style>
        .box {
            /* 绝对定位的盒子不能使用左右 margin auto 居中 */
            position: absolute;
            /* 标准流居中 */
            margin: 0 auto;
            /* left: 50%，整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 将盒子向左侧移动：自己宽度的一半 */
            /* margin-left: -150px; */

            top: 50%;
            /* margin-top: -150px; */

            /* 位移：自己宽度高度的一半 */
            transform: translate(-50%, -50%);

            width: 300px;
            height: 300px;
            background-color: hotpink;
        }
    </style>