Day06CSS浮动

最新推荐文章于 2024-08-28 23:58:56 发布

瑜～

最新推荐文章于 2024-08-28 23:58:56 发布

阅读量63

点赞数

分类专栏：前端技术学习h5+css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_52284271/article/details/131551698

版权

前端技术学习h5+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

结构伪类选择器
伪元素

伪元素通过css创建标签, 装饰性的不重要的小图
找父级, 在这个父级里面创建子级标签
伪元素通过css创建标签, 装饰性的不重要的小图
伪类标签内容 content必须添加
伪类标签默认是行内元素，宽高不生效，需要dispiay转换
标准流

浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离,用浮动来解决
浮动
作用：（1）图文环绕（2）网页布局，块级标签在同一行显示
特点

浮动标签是顶对齐的，浮动后的标签具备行内块标签特点
通栏的盒子宽度和浏览器宽度一样大

CSS书写顺序: 浏览器执行效率更高
浮动 / display
盒子模型: margin border padding 宽度高度背景色
文字样式
如果父级宽度不够，子集会自动换行
小米导航综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清楚浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1226px;
            height: 614px;
            /* background-color: palegoldenrod; */
            /* 版心居中 */
            margin: 0 auto;
        }
        .left {
            float: left;

            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        .right {
            float: right;
            width: 978px;
            height: 614px;
            /* background-color: green; */
        }
        /* 清除列表样式 */
        ul {
            list-style: none;
        }
        .right li {
            float: left;

            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: #87ceeb;
        }
        /* 如果父级的宽度不够, 子级会自动换行,第四个li和第八个li右侧间距清除 */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

效果图
在这里插入图片描述
小米导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }
        .nav ul {
            list-style: none;
        }
        .nav li {
            float: left;
        }
        .nav li a {
            /* 显示模式 */
           display: block;
            /* 盒子 */
           width: 80px;
            height: 50px;
            /* 文字 */
            text-align: center;
            line-height: 50px;
            font-size: 16;
            color: #fff;
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #008000;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">新闻1</a></li>
            <li><a href="#">新闻2</a></li>
            <li><a href="#">新闻3</a></li>
            <li><a href="#">新闻4</a></li>
            <li><a href="#">新闻5</a></li>
            <li><a href="#">新闻6</a></li>
            <li><a href="#">新闻7</a></li>
            <li><a href="#">新闻8</a></li>
        </ul>
    </div>
</body>
</html>

效果图
在这里插入图片描述

清除浮动

①给父级加高度

不止能清除浮动，也能解决外边距问题

/*  .clearfix::before 作用: 解决外边距塌陷问题
            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
        */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }

在这里插入图片描述

瑜～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Day06CSS浮动

浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离,用浮动来解决。/* 如果父级的宽度不够, 子级会自动换行,第四个li和第八个li右侧间距清除 */伪类标签默认是行内元素，宽高不生效，需要dispiay转换。伪元素通过css创建标签, 装饰性的不重要的小图。伪元素通过css创建标签, 装饰性的不重要的小图。浮动标签是顶对齐的，浮动后的标签具备行内块标签特点。/* 清楚浏览器默认样式 *//* 清除列表样式 *//* 清除默认样式 *//* 版心居中 *//* 显示模式 */
复制链接

扫一扫

专栏目录