CSS day4

Follow_浩弟

已于 2023-08-14 17:55:47 修改

阅读量63

点赞数

分类专栏： CSS 文章标签： css 前端

于 2023-08-13 21:57:52 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132266079

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浮动

<!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>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* left元素向左浮动right元素向右浮动 */
            /* 给了某一个元素浮动之后他就会脱离标准文档流：也不再占用自己原来的位置 */
            float: left;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background: skyblue;
            float: left;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: purple;
            /* 右浮 */
            float: right;
        }
    </style>
</head>

<body>
    <!-- <h1>1231</h1>
    <p>123</p> -->
    <!-- 有个概念叫脱离标准文档流
            某一块元素不再受约束，不在受标准文档流的控制
    -->
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <h1>东京一店长闻到煤气味后点了根烟</h1>
</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>
        .content {
            width: 1200px;
            height: 134px;
            margin: 100px auto 0px;
            background-color: pink;
            height: 300px;
        }

        .content div {
            width: 291px;
            height: 134px;
            /* 给每一个div元素都加上float浮动那么就会使所有的div都排列在一行且没有缝隙 */
            float: left;
            margin-right: 12px;
        }

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

        .content div img {
            width: 100%;
            height: 100%;
        }

        .news {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 100px auto 0px;
        }

        .news div {
            width: 25%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        /* leftright */
        .news .left {
            float: left;
        }

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

<body>
    <div class="content">
        <div>
            <img src="https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210113/239381533097800.png" alt="">
        </div>
        <div>
            <img src="https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210113/239381533097800.png" alt="">
        </div>
        <div>
            <img src="https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210113/239381533097800.png" alt="">
        </div>
        <div class="last">
            <img src="https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210113/239381533097800.png" alt="">
        </div>
    </div>

    <div class="news">
        <div class="left">头条热榜</div>
        <div class="right">换一换</div>
    </div>
    <h1>东京一店长闻到煤气味后点了根烟</h1>
</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>
        /* 1.解决浮动的第一种办法 给父元素加宽高 */
        .father {
            /* width: 300px;
            height: 300px; */
            border: 1px solid red;
            /* 3.给浮动元素的父元素加overflow 属性 值只要不是visible 都可以解决 */
            /* overflow: hidden;
            overflow: auto;
            overflow: scroll; */
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 2.给被影响的元素加 clear:both;clear属性 both */
            /* clear: both; */
        }


        /* 4.写一个伪类选择器 并将这个类名给予浮动元素的父元素，清除浮动 */
        /* after在。。。之后 向标签的后面插入内容 */
        /* :after css3里面新增的选择器 */
        /* .box2::after{
            content: "这是向后面插入的内容";
        } */
        .clear::after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <!-- 浮动带来的影响：加了浮动的元素会盖着 标准文档流里面的元素。 -->
    <!-- 清除浮动：清除浮动并不是清除浮动的效果，而是把浮动带来的影响清除 -->
    <div class="father clear">
        <div class="box"></div>
    </div>
    <!-- 一个元素允许拥有多个类名 -->
    <div class="box2">123123123</div>
</body>

</html>

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 默认值 不进行定位 */
            position: static;

            /* relative 相对定位 */
            /* absolute 绝对定位 */
            /* fixed 固定定位 */
            /* sticky 粘性定位 */


             /* 相对定位 相对于自身原本的位置进行定位,保留自身原本位置，不脱离标准流 */
             position: relative;
            /* 偏移量 */
            top: 30px;
            left: 50px;


            /* 绝对定位  相对于已有定位的父元素进行定位（如果都没有，则相对于页面进行定位），不保留原位置，脱离标准流 */
            /* 子绝父相 */
            position: absolute;
            /* 偏移量 */
            top: 30px;
            left: 50px;


            /* 固定定位  相对于窗口进行定位，不保留原本位置，脱离标准流 */
            position: fixed;
            top: 300px;
            left: 50px;



            /* 粘性定位 (而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。) */
             position: sticky;
            /* top: 50px; */
            left: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

z-index 调整元素的层级

<!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>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            position: absolute;
            top: 200px;
            left: 100px;
            z-index: -2;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            position: relative;
            top: 100px;
            left: 100px;
            /* z-index可以调剂元素的层级  它的值是数字*/
            /* 注意只有加了定位的元素才能使用z-index */
            z-index: -1;
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: springgreen;
        }
    </style>
</head>
<body>
    <!-- 层级 -->
    <!-- 标准文档流里面的元素默认层级为0 -->
    <!-- 加了定位的元素层级为1 -->
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></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: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        .content {
            width: 1000px;
            height: 800px;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 10px;
            margin: 100px auto;
        }

        .content .nav {
            width: 200px;
            height: 800px;
            background-color: white;
        }

        .content .nav ul {
            width: 100%;
            height: 100%;
            /* 相对定位 */
            position: relative;
        }

        .content .nav ul li {
            width: 100%;
            height: 70px;
            line-height: 70px;
            text-align: center;
        }

        .content .nav ul li .box {
            width: 800px;
            height: 800px;
            background-color: pink;
            /* 元素的显示模式 */
            /* 将此元素隐藏 并且不占用位置 */
            display: none;
            /* 绝对定位 */
            position: absolute;
            left: 200px;
            top: 0px;
        }

        /* :hover只能控制自己和自己的子元素 */
        .content .nav ul li:hover {
            background-color: orange;
            color: white;
        }

        /* 当鼠标放在li上面的时候 li的子元素box应用一些样式 */
        .content .nav ul li:hover .box {
            /* 元素的显示模式 */
            /* 将元素转换成块元素，将元素由隐藏转换为显示 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="nav">
            <ul>
                <li>
                    美容护肤
                    <div class="box">
                        第一个
                    </div>
                </li>
                <li>
                    手机数码
                    <div class="box">
                        第二个
                    </div>
                </li>
                <li>
                    食品零食
                    <div class="box">
                        第三个
                    </div>
                </li>
                <li>
                    厨房用品
                    <div class="box">
                        第四个
                    </div>
                </li>
                <li>
                    家电家居
                    <div class="box">
                        第五个
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>