Day19CSS-CSDN博客

本文链接：https://blog.csdn.net/yuanlcj/article/details/114223908

4、盒子模型

4.1什么式盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lLUEyQBL-1614495530411)(C:\Users\lcj\AppData\Roaming\Typora\typora-user-images\image-20210223091515549.png)]

margin：外边距

margin:0 全部为0
margin:0 1px 上下为0 左右为以
margin：0 1px 2px 0 上 左 下 右

padding：内边距

border：边框

border-radius: 20px 2px/*左上   右下*/
border-radius: 20px 2px 3px 4px/*左上 右上  右下 左下*/

4.2

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wa{
            width: 300px;
            height: 309px;
            /*粗细 样式 颜色*/
            border: 1px solid gainsboro;
        }
        h2{
            font-size: 19px;
            line-height: 1;
            text-align: center;
            background: #eae2e2;
            width: 300px;
        }
        form div{
            line-height: 2;
            text-indent: 2em;
            border: 1px solid red;
        }
        div  :nth-of-type(1) input{
            border: 2px solid green;
            background: #21D4FD;
        }


    </style>
</head>
<body>
<div class="wa">
    <div>
        <h2>会员登录</h2>
    </div>
    <hr>

    <form action="#">
        <div class="i1">
            <span>账号：</span><input type="text">
        </div>
        <div>
            <span>密码：</span><input type="password">
        </div>




    </form>
</div>

</body>
</html>

4.3阴影

box-shadow:10px 10px 100px yellow/*往右 往下  模糊大小 颜色*/

4.4display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*行类元素 inline
            块元素  block
            既是行内元素，右保留这块元素的  inline-block
            不显示   none*/
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /*display: block;*/
            display:inline-block;
        }
    </style>
</head>
<body>
<div>我是块元素</div>
<span>我是行内元素</span>
</body>
</html>

QQ会员导航练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .t1{
            background: black;
        }
        li a{
            text-decoration: none;
            color: white;

        }
        li{
            display: inline-block;
            margin-left: 25px;
        }
        li:nth-of-type(1){
            margin-left: 170px;
            vertical-align: middle;
        }
        li:nth-of-type(2){
            margin-left: 100px;
            vertical-align: middle;
        }
        .d1{
            margin-left:110px;
            border: 1px yellow solid;
            border-radius: 20px;
            padding: 10px 30px;
        }
        .d1 a{
            color: yellow;
        }
        .d2{
            background: yellow;
            border-radius:20px ;
            padding: 10px 30px;
            margin-left: 5px;


        }
        .d2 a{
            color: #915355 ;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<div class="t1">
    <div>
        <ul>
            <li> <img width="150" height="90" src="../images/QQ超级会员-不做大多数_files/logo.png "alt="QQ会员首页"title="QQ会员首页"> </li>
            <li><a href="#">靓号站</a></li>
            <li><a href="#">功能特权</a></li>
            <li><a href="#">游戏特权</a></li>
            <li><a href="#">装饰装扮</a></li>
            <li><a href="#">成长体系</a></li>
            <li><a href="#">年费专区</a></li>
            <li><a href="#">免流量专区</a></li>

            <li class="d1"><a href="#">登录</a></li>
            <li class="d2"><a href="#">开通超级会员</a></li>



        </ul>
    </div>
</div>
</body>
</html>

浮动

float:right;
clear:both;

父级边框塌陷

解决方法

给父类添加高度

height:800px

增加一个div标签清除浮动

clear:both;
margin:0;
padding:0;

在父类标签添加一个overflow

overflow:hidden;

给父类添加伪类after

#father:after{
    content:'';
    display:block;
    clear:both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="c1">
    <div class="c2"><img src="images/1.png" alt="#"></div>
    <div class="c3"><img src="images/logo.png" alt=""></div>
    <div class="c4"><img src="images/logo_b.png" alt=""></div>
    <div class="c5">浮动可以左滑右滑</div>
    <div class="c6"></div>
</div>
</body>
</html>

.c1{
    border: 1px solid red;
    /*overflow: hidden;  给父类标签添加一个overflow：hidden*/
    /*height: 1000px;   给父类添加高度*/
}
/*.c1:after{*/
/*    content: '';*/
/*    display: block; 给父类添加一个伪类*/
/*    clear: both;*/
/*}*/
.c2{
    border: 1px solid red;
    display:inline-block;
    float: left;
    clear: both;
}
.c3{
    border: 1px solid red;
    display:inline-block;
    float: left;
}
.c4{
    border: 1px solid red;
    display:inline-block;
    /*float: left;*/
}
.c5{
    border: 1px solid red;
    display:inline-block;
    /*float: right;*/
}
div{
    margin: 10px;
    padding: 15px;
}
.c6{
    /*clear: both;!*最后添加空的div标签*!*/
}

5、定位

5.1相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            border: 1px solid red;
            padding: 0;
            margin: 0;
        }
        .first{

            border: 1px dashed black;
            background:rebeccapurple ;
            position: relative;/*相对定位*/
            bottom: 16px;
            left: 22px;
        }
        .second{
            border: 1px dashed black;
            background: #21D4FD;
            position: relative;
            bottom: 9px;
        }
        .third{
            border: 1px dashed black;
            background: #6bc633;
            position: relative;
            top: 30px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="first">我是第一</div>
    <div class="second">我是第一</div>
    <div class="third">我是第一</div>
</div>
</body>
</html>

相对原来的位置指定的偏移，它任然在标准文档流中，他原来的位置任然被保留

5.2绝对定位

定位：基于xxx定位，上下左右

没有父级元素的定位前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对父级元素进行定位
在父级元素范围内移动

position:absolute;/*绝对定位*/

原来位置消失

固定定位任何情况下始终保持原来的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 10000px;
        }
        div:nth-of-type(1){
            width: 300px;
            height: 300px;
            background: blue;
            position: absolute;/*绝对定位  父类没有定位时相对于窗口定位*/
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 100px;
            background: yellow;
            position: fixed;/*固定定位始终在一个位置*/
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>hello</div>
<div>hello</div>
</body>
</html>

5.3z-index

表示图层越大越在上面

z-index:0;/*表示在最底层*/
opacity:0.5;/*背景透明度*/