HTML5+CSS3基础（day12）

最新推荐文章于 2024-08-30 15:33:13 发布

澈如冬雪^

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量67

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_52372037/article/details/128606855

版权

一、CSS浮动

1.浮动导读

在这里插入图片描述

2.传统网页布局三种方式

在这里插入图片描述

3.为什么需要浮动

在这里插入图片描述

示例

<title>行内块中间有缝隙</title>
    <style>
        div {
            float: left;
            width: 150px;
            height: 200px;
            background-color: pink;
            /* display: inline-block; */
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

4.什么是浮动

在这里插入图片描述

示例

<title>什么是浮动</title>
    <style>
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>

5.浮动特性

在这里插入图片描述

（1）浮动特性-脱标

在这里插入图片描述

示例

<title>浮动特性1-脱标</title>
    <style>
        /* 设置了浮动（float）的元素会：
        1.脱离标准普通流的控制（浮）移动到指定位置（动）。
        2.浮动的盒子不在保留原先的位置 */
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

（2）浮动特性-浮动元素一行显示

在这里插入图片描述

示例

 <title>浮动特性-浮动元素一行显示</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .two {
            background-color: purple;
            height: 249px;
        }

        .four {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

（3）浮动特性-浮动元素具有行内块特性

在这里插入图片描述

示例

<title>浮动特性-浮动元素具有行内块元素特点</title>
    <style>
        /* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */
        span,
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        /* 如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度 */
        p {
            height: 200px;
            background-color: purple;
            float: right;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>
    <div>div</div>
    <!-- 有了float之后没指定宽度就不再是父元素的 宽度 内容多宽就有多宽 -->
    <p>p</p>
</body>

6.浮动元素经常搭配标准流的父元素

在这里插入图片描述

7.浮动布局练习1

在这里插入图片描述

示例

 <title>浮动元素搭配标准流父盒子1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            width: 230px;
            height: 460px;
            background-color: purple;
            float: left;
        }

        .right {
            width: 970px;
            height: 460px;
            background-color: skyblue;
            /* 左侧浮动和右侧浮动都可以 */
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

8.浮动布局练习2

在这里插入图片描述

示例

<title>浮动元素搭配标准流父盒子2</title>
    <style>
        /* ul和li有默认的内外边距 div是没有的 所以要先清除内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* li默认有小圆点 清除小圆点 */
        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }

        /* .last不行 因为权重是10 而.box li 的权重是11 */
        /* 现在的权重是20 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <!-- ul.box>li*4 -->
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

9.浮动练习-手机模块

在这里插入图片描述

示例

<title>浮动布局练习3-手机模块</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            width: 234px;
            height: 615px;
            background-color: purple;
            float: left;
        }

        .right {
            width: 992px;
            height: 615px;
            background-color: skyblue;
            float: left;
        }

        .right>div {
            width: 234px;
            height: 300px;
            background-color: pink;
            float: left;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <!-- div*8{$} -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

10.常见的网页布局

在这里插入图片描述

示例

<title>常见的网页布局</title>
    <style>
        /* 虽然div没有内外边距 但是不写以后很麻烦 */
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            width: 237px;
            height: 300px;
            background-color: gray;
            float: left;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子（和浏览器一样宽）不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            /* 盒子与盒子之间的距离是通过margin来调整的 */
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- .top+.banner+.box+.footer -->
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <!-- 放四个div行 放四个li也行 -->
        <!-- ul>li*4{$} -->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

11.浮动的两个注意点

在这里插入图片描述

示例

<title>浮动注意点</title>
    <style>
        /* 如果一个子元素浮动了，尽量其他盒子也浮动，这样保证这些子元素一行显示  */
        .box {
            width: 900px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }

        .damao {
            width: 200px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 150px;
            background-color: red;
            /* float: left; */
        }

        .sanmao {
            width: 300px;
            height: 240px;
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="sanmao">三毛</div>
    </div>
</body>

12.为什么清除浮动

在这里插入图片描述

示例

<title>为什么要清除浮动</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>

13.清除浮动方法

在这里插入图片描述

（1）清除浮动本质之额外标签法

在这里插入图片描述

示例

 <title>清除浮动本质之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <!-- 把浮动元素隔开 -->
        <div class="clear"></div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <!-- <span class="clear"></span> -->
    </div>
    <div class="footer"></div>
</body>

（2）清除浮动之父元素overflow

在这里插入图片描述

示例

<title>清除浮动之父元素overflow</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            /* overflow: auto也行 */
            /* 清除浮动 */
            /* 外边距合并的时候我们也是通过overflow: hidden去解决的 */
            overflow: hidden;
        }

        /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 大毛和二毛的父亲是box -->
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <!-- 把浮动元素隔开 -->
        <div class="clear"></div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <!-- <span class="clear"></span> -->
    </div>
    <div class="footer"></div>
</body>

（3）清除浮动之after伪元素

在这里插入图片描述

示例

<title>清除浮动之after伪元素</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* clearfix这个名字可以改 只是习惯用clearfix */
        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
            /* overflow: auto也行 */
            /* 清除浮动 */
            /* 外边距合并的时候我们也是通过overflow: hidden去解决的 */
            overflow: hidden;
        }

        /* 不设置父亲高度 让子盒子去撑开父盒子 父亲高度会变成为0 影响下面的盒子  */
        .damao {
            width: 300px;
            height: 200px;
            background-color: purple;
            float: left;
        }

        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>

澈如冬雪^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3基础（day12）

title > 什么是浮动 < style > .left,.right {} .right {} < body > < div class = " left " > 左青龙 < div class = " right " > 右白虎什么是浮动 < style > .left,.right {
复制链接

扫一扫