HTML + CSS 核心笔记（五）

俸涛努力学前端

于 2024-10-06 22:01:38 发布

阅读量378

点赞数 12

分类专栏： HTML+CSS 文章标签：笔记开发语言 css 前端

本文链接：https://blog.csdn.net/2301_80115241/article/details/142730992

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

标准流

也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个

浮动（了解）

作用：让块元素水平排列。

属性名： float

属性值

• left ：左对齐（表示左浮动）

• right ：右对齐（表示右浮动）

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置
父级宽度不够，浮动的子级会换行

清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果

方法一：额外标签法（了解，谢谢）

• 在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

 <style>
        .top {
            margin: 10px auto;
            width: 1200px;
        /*当父元素没高度时，子元素就会脱离文档流，飘起来了*/
            /* height: 300px; */
            background-color: pink;
           
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right {
            float: right;
            width: 950px;
            height: 300px;background-color: orange;

        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
        /*一般用 clearfix 标注  ，设CSS 属性 clear: both 消除浮动带来的影响*/
        .clearfix {
            clear:both
}
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    <!--在父元素内容的最后添加一个块级元素-->
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

方法二：单伪元素法

/*单伪元素法的相关代码*/
.clearfix::after {
content: "";
display: block;
clear: both;
}

style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /*当果父级没有高度，子级无法撑开父级高度，就要清除浮动*/
            /* height: 300px; */
            background-color: pink;
           
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right {
            float: right;
            width: 950px;
            height: 300px;background-color: orange;

        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
        /*需要再父元素中 加一个 clearfix 类名*/
        .clearfix::after {
                /*content 必须有*/
                content: "";
                display: block;
                clear: both;
}
    </style>
</head>
<body>
    <!--就决定是你了-->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

方法三：双伪元素法（推荐）

/*双伪元素法相关代码*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}

<style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
           
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right {
            float: right;
            width: 950px;
            height: 300px;background-color: orange;

        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
        /*双伪元素法 听说你很厉害 有点不好理解 就多练*/
        /*before 作用 解决外边距塌陷问题*/
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
        /*after 清除浮动*/
        .clearfix::after {
            clear: both;
        }

    </style>
</head>
<body>
    <!--老规矩，给父元素加 clearfix -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

方法四：overflow（小白推荐）

父元素添加 CSS 属性 overflow: hidden

<style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
            /*一小段话就秒了，我也不知道为啥，还有些非人哉的方法*/
            overflow:hidden;
           
        }
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
        .right {
            float: right;
            width: 950px;
            height: 300px;background-color: orange;

        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

拓展：浮动本质作用是实现图文混排效果

Flex 布局（主流）

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活

Flex – 组成

设置方式：给父元素设置 display: flex ，子元素可以自动挤压或拉伸

组成部分：

• （父元素为）弹性容器

•（子元素为）弹性盒子：沿主轴方向排列

• 主轴：默认在水平方向

• 侧轴 / 交叉轴：默认在垂直方向

主轴对齐方式

属性名： justify-content

/*父级剩余的尺寸分配成间距，弹性盒子之间的间距相等*/
justify-content:space-between;

/*间距出现在弹性盒子的两侧*/
/*视觉效果 ： 弹性盒子之间的间距是两端间距的2倍*/
justify-content:space-around;

 /*各个间距都相等*/
justify-content: space-evenly;

侧轴对齐方式

属性名

• align-items ：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

• align-self ：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

/*弹性盒子在侧轴方向没有尺寸才能拉伸， 即弹性盒子没有高度*/
align-items:stretch;

 align-items: center;

align-items: flex-end;

以上面这个图为标准，我想要2号盒子在自己的最上方，阁下该如何应对呢

/*第二个 div ,侧轴居中对其*/
.box div:nth-child(2) {
            align-self:flex-start;
}

就问你想到没，哈哈，成品展示

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名： flex-direction

属性值

/*修改主轴方向变为垂直方向，那侧轴自动变换到水平方向*/
flex-direction:column;
/*主轴在垂直，视觉效果：垂直居中*/
justify-content:center;
/*侧轴在水平，视觉效果：水平居中*/
align-items:center;
/*注意轴的位置*/

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸

属性名： flex

属性值：整数数字，表示占用父级剩余尺寸的份数

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性名： flex-wrap

属性值

• wrap ：换行

• nowrap：不换行（默认）

行对齐方式

属性名： align-content

属性值

注意：该属性对单行弹性盒子模型无效

人生之路要么孤独，要么平庸，你会怎么选