4.盒子模型

黄土地
78 阅读4分钟

1.结构伪类选择器，伪类元素选择器

day05-盒子模型.png

结构伪类选择器是跟类选择器是一样的是权重是10.
伪类元素选择器和标签选择器是一样的权重是1.

结构伪类选择器
<!-- ul>li{我是第$个小li}*8 -->
1.结构伪类选择器 结构关系查找元素。 第几个，第几个。
<!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>
        ul li:first-child{
            color: saddlebrown;
        }

        ul li:last-child{
            color: red;

        }

        ul li:nth-child(2){
            color: green;

        }
        /* 偶数是2n ,奇数是2n+1/2n-1 ,5的倍数是5n,-n+5 5之前的数不包含第5个  n+5 5之后的数包含第5个 */
        ul li:nth-child(2n) {
            color: blanchedalmond;
        }
        /* 因为伪元素选择器和类选择器是一样的，所以这里权重是一样的，权重一样的情况下后面的会覆盖前面的颜色 */
        ul li.lisecond {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个li</li>
        <li class="lisecond">我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
        <li>我是第11个li</li>
        <li>我是第12个li</li>
        <li>我是第13个li</li>
        <li>我是第14个li</li>
        <li>我是第15个li</li>
        <li>我是第16个li</li>
        <li>我是第17个li</li>
        <li>我是第18个li</li>
        <li>我是第19个li</li>
        <li>我是第20个li</li>
    </ul>
</body>
</html>


伪元素选择器
<!-- content 设置伪元素的内容，如果没有内容 伪元素默认是行内显示模式，权重和标签选择器是相同的1。类和伪类是10 

    ::before

    ::after

    -->
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 伪元素选择器的权重跟标签选择器的权重是一样的1 
        类标签跟伪元素的选择器是一样的10 一个冒号是伪类选择器，两个冒号是伪元素选择器-->
    <style>
        .div::before {
            content: "前";
            background-color: yellow;
        }
        .div::after {
            content: "后";
            background-color: blue;
        }
        .div {
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <div class="div">我的div的内容</div>
</body>
</html>

2.边框线 border

<!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 {
            /* 边框线的宽度，样式 和颜色 
            solid dashed dotted:直线，虚线，小点*/
            border: 1px dashed #000;
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

        input {
            width: 100px;
            height: 30px;
            border: 1px dashed #fff;
            border-bottom: 1px solid #000;
              /* bt bl br */
        }


    </style>
</head>
<body>
    <div class="box"></div>
    <input type="text">
</body>
</html>

3.padding

  <!-- 内容+padding+border  = 盒子的宽高。
        可以使用手动，或者box-sizing:border-box
    -->
    <style>
        .div1 {
            width: 160px;
            height: 160px;
            background-color: yellow;
            padding: 10px;
            /* padding 一个数值指的是上下左右，两个数值也是上下左右，三个数值是上左右下，四个数值是上右下左 */
            border: 10px solid #000;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #000;
            box-sizing: border-box;
        }
        .input{
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div class="div1">盒子1</div>
    <div class="div2">盒子2</div>
    <input type="text" class="input" placeholder="请输入">
</body>
</html>

4.margin

<!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> 
        .div1{
            width: 100px;
            height: 100px;
            background-color: teal;
            margin-bottom: 10px;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
        .content {
            margin: 0 auto;
            /* 左右auto 版心才能居中对齐，如果是上下auto 板块不能居中对齐 */
            width: 800px;
            height: 1000px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="div1">我是div1</div>
    <div class="div2">w shi div2</div>
    <div class="content">

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

3.清除默认样式

    <title>Document</title>
    <!-- 清除默认样式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul li {
            list-style: none;
        }
        
    </style>
</head>
<body>
    <div>清除默认样式</div>
    <ul>
        <li>hahhah</li>
        <li>hahhah</li>
        <li>hahhah</li>
        <li>hahhah</li>
        <li>hahhah</li>
        <li>hahhah</li>
    </ul>
</body>
</html>

4.外边距合并

<!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>
    .box1,.box2 {
        width: 200px;
        height: 200px;
    }
    .box1 {
        background-color: yellow;
        margin-bottom: 50px;
    }
    .box2{
        background-color: blue;
        width: 200px;
        height: 200px;
        margin-top: 40px;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

5.元素的溢出

    <!-- overflow 元素的溢出 
        1.溢出隐藏hidden scroll溢出滚动，
        2.无论是否溢出都显示滚动条位置。
        3.auto 只有溢出才显示滚动条。
    -->
    <style>
        div{
            width: 100px;
            height: 200px;
            background-color: yellowgreen;
            overflow: scroll;
            /* hidden  scroll auto */
        }
    </style>
</head>
<body>
        <div>福布斯不服的方式报复就是得不到副驾驶的奋笔疾书的部分基本都是加班
           单独啊
        </div>
</body>
</html>

6.盒子的塌陷

    <!-- 塌陷存在于父子的盒子 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            background-color: red;
            width: 100px;
            height: 100px;
            /* overflow: hidden; */
            /* border: 1px solid transparent; */
            padding-top: 20px;
        }
        .child{
            width: 50px;
            height: 50px;
            background-color: blue;
            /* 设置距离父亲位置10 会使父亲塌陷，解决方式1,父亲设置overflow:hidden,或者2.父亲设置边框 边框设置透明3.或者删除子类padding 父亲padding*/
            /* margin-top: 10px; */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

        </div>
    </div>
</body>

7.行内元素不能改变垂直距离。

  <!-- 行内元素不能改变元素垂直位置 margin padding 
        可以用lineheight来设置垂直位置-->
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        span {
            /* margin: 20px; */
            background-color: yellowgreen;
            line-height: 60px;
        }
    </style>

8. 圆角： 圆形，胶囊

<!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>
        .div {
            width: 100px;
            height: 200px;
            background-color: red;
            border-radius: 100px;
        }
        img {
            /* 半径 如果是一个圆角这里是左上，右上 右下，左下*/
            /*  */
            /* border-radius: 20px; */
            /* border-radius: 0px 20px; */
             /* border-radius: 0 20px 30px; */
             border-radius: 0 20px 40px 60px;
        }
    </style>
</head>
<body>
     <div class="div">我是div</div>
     <img src="../../css/images/1.jpg" alt="">
</body>
</html>

9.盒子阴影

  img{
       border-radius: 50%;
       box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
     }
     <img src="../../css2/background/images/1.png" alt="">
avatar
文章
阅读
粉丝