前端入坑第七弹——CSS的特性、盒子模型

最新推荐文章于 2022-03-03 21:32:31 发布

这辈子不飞线

最新推荐文章于 2022-03-03 21:32:31 发布

阅读量292

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_55354258/article/details/122329801

版权

因为期末复习所以耽误了很久，但是由于疫情导致现在也没考试，所以就先来更新了。

今天主要谈的是CSS的三大特性、网页设计中的盒子模型，顺便说一说CSS3中阴影和圆角的小技巧。

CSS的三大特性

1. 层叠性

其实层叠性说白了就是就近原则，例如：

<!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>层叠性</title>
</head>
<style>
    /* div的background-color被修饰了两次，就近原则 */
    div {
        background-color: blue;
        height: 100px;
    }
    div {
        background-color: red; 
        width: 100px;
    }   
</style>
<body>
    <div></div>
</body>
</html>

对于div，有两个元素选择器都在修饰它的颜色。此时的结果是这样的：

也就是它显示了红色，这是为什么呢？

这就是层叠性在作怪。层叠性，说白了就是后面的内容会覆盖掉前面的内容，也可以简单理解为就近原则。

如果对调了这两个选择器，结果会是怎样呢？

<!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>层叠性</title>
</head>
<style>
    /* div的background-color被修饰了两次，就近原则 */
    
    div {
        background-color: red; 
        width: 100px;
    } 
    div {
        background-color: blue;
        height: 100px;
    }
</style>
<body>
    <div></div>
</body>
</html>

结果正如我们所想，这个盒子变为了蓝色。

2. 继承性

所谓继承性，就是子元素能够继承父元素中的一些特性，主要是文字、文本方面的特性。

<!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>继承性</title>
</head>
<style>
    .nav {
        color: blue;
        font-size: large;
    }
</style>
<body>
    <!-- li继承了nav的颜色和字体大小特性 -->
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

这里用一个类选择器来修饰类"nav",那么其中的li的显示效果会怎么样呢？

很显然，li拥有了nav的颜色和字号特性，这种性质就是继承性。

在继承行高的时候，有这样的写法：

<!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>继承行高</title>
</head>
<style>
    body {
        color: purple;
        font:12px/2.5 'Microsoft Yahei'
    }
    div {
        font-size: 15px;
    }
    a {
        font-size: 18px;
        text-decoration: none;
    }
</style>
<body>
    123
    <div>123</div>
    <a href="#">123</a><br>
    <a href="#">选课</a>
</body>
</html>

在父元素中，设置了行高是字号大小的2.5倍。在子元素的继承中，仅仅设置了字号大小，这时候同样可以继承行高是字号大小2.5倍的特点。

3.优先级与优先级叠加

前面介绍过很多种的选择器，如果同时用它们来修饰某一种元素，会有怎样的效果呢？

<!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>优先级</title>
    <style>
        div {
            height: 100px;
            width: 100px;
        }
        /* 继承的权值0，0，0，0 */
        body {
            background-color:red;
        }
        /* 元素选择器权值0，0，0，1 */
        div {
            background-color: orange;
        }
        /* 类选择器权值0，0，1，0 */
        .nav {
            background-color: yellow;
        }
        /* id选择器权值0，1，0，0 */
        #abc {
            background-color: green;
        }
        /* !important权值无穷大 */
        div {
            background-color: purple!important;
        }
    </style>
</head>

<body>
    <!-- 行内样式style的权值1，0，0，0 -->
    <div class="nav" id="abc" style="background-color: blue">123</div>
</body>
</html>

就像这段代码，用了六种不同的选择器修饰盒子的颜色。那么盒子的颜色最终的颜色会是怎样的？

也就是说，!important这个选择器的权值是最大的。它的权值是无穷大。

如果注释掉这一段，接下来会是怎样的呢？

接下来,行内选择器起了效果。行内选择器的权值是1，0，0，0。

接下来依次注释掉权重高的选择器，有如下的展示效果：

简单选择器的权值都在代码的注释里，复合选择器的权值只需要进行叠加就行了（叠加不可进位）。

盒子模型

在网页设计中，我们可以把网页元素看作一个一个的盒子进行设计。

这个盒子由四部分组成：内容、内边距、边框、外边距。

边框设置

边框的主要设置有三个参数宽度、颜色、样式。

<!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>边框</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border-color: blue;
        /* 常用参数：solid（实线）、dashed（虚线）、dotted（点线） */
        border-style: solid;
        border-width: 20px;  
       
        
    }
    
</style>
<body>
    <div></div>
    <div></div>
    
</body>
</html>

上面这段代码分别设置了边框的颜色、样式和宽度，分别用border-color、border-style、border-width来进行修饰。

可以得到下面的效果：

边框的样式主要有solid（实线）、dashed（虚线）、dotted（点线）等常用形式。

当然如果分三行写觉得比较繁琐的话，可以把它们写在同一行，就像这样。

<!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>边框</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        
        border:blue solid 20px; 
        
        
    }
    
</style>
<body>
    <div></div>
    <div></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>边框</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border-color: blue;
        /* 常用参数：solid（实线）、dashed（虚线）、dotted（点线） */
        border-style: solid;
        border-width: 20px;  
        
        /* 设置其中一条边 */
        border-top:red dashed 30px;
        
    }
    
</style>
<body>
    <div></div>
    <div></div>
    
</body>
</html>

根据层叠性，上边框变为红色和虚线样式，并且宽度也进行了调就会得到整。那么你可能会问到其它的边框怎么办呢？由于其它边框没有这样的修饰，所以保持不变。就像这样：

有的小伙伴这个时候会问到，既然边框有宽度，如果遇到表格那样的有没有可能出现边框宽度叠加的情况？答案是肯定的。这个时候我们需要合并边框来解决这个问题。

如果合并了以后会是什么样呢？

会发现边框交接处的宽度从2倍变为1倍。我们用border-collaspe来进行设置：将值设置为collaspe就可以达到这一的效果。

<!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>边框</title>
</head>
<style>
    
    table,th,tr {
        /* 合并或分离两条相邻边 */
        border-collapse: collapse;  
        border:black solid 10px;
    }
</style>
<body>
    
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>4</th>
                <th>5</th>
                <th>6</th>
            </tr>
            <tr>
                <th>7</th>
                <th colspan="2">8</th>
            </tr>
        </tbody>
    </table>
</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>内边距</title>
</head>
<style>
    div {
        width: 300px;
        height: 200px;
        border:orange solid 20px;
        padding-left: 10px;
        padding-right: 20px;
        padding-top: 30px;
        padding-right: 40px;
        /* 上下内边距 */
        padding: 50px;
        /* 上下内边距、左右内边距 */
        padding: 50px 50px;
        /* 上内边距、左右内边距、下内边距 */
        padding: 50px 50px 50px;
        /* 上、右、下、左 */
        padding: 50px 50px 50px 50px;
    }
</style>
<body>
    <div>12345678</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>相同左右内边距的盒子</title>
    <style>
        a {
            display: inline-block;
            height: 100px;
            padding: 0 20px;
            line-height: 100px;
            text-decoration: none;
            color:black;
            background-color: lightgrey;
        }
        a:hover {
            color: blue;
            background-color: gray;
        }
    </style>
</head>
<body>
    <a href="#">一</a>
    <a href="#">二三</a>
    <a href="#">四五六</a>
    <a href="#">七八九十</a>
</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>外边距</title>
    <style>
       div {
           height:100px;
           width:100px;
           border-top:red solid 10px;
           border-bottom: blue dotted 20px;
           border-left:yellow dashed 30px;
           border-right: green solid 40px;
           padding: 40px 10px 30px 20px;
           /* 上下外边距 */
           margin: 50px;
           /* 上下外边距、左右外边距 */
           margin: 50px 50px;
           /* 上外边距、左右外边距、下外边距 */
           margin: 50px 50px 50px;
           /* 上、右、下、左 */
           margin: 50px 50px 50px 50px;
           margin-bottom: 20px;
           margin-top:30px;
       }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

得到下面这种奇形怪状的盒子。

利用外边距，我们可以将我们的盒子进行居中。这个时候有两个条件，一是给盒子设置宽度，二是将左右外边距设置为auto。同时，将盒子中的内容居中，只需要在其父元素（盒子）的选择器中设置文本居中即可。

 <!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>居中</title>
     <style>
         /* 盒子居中的条件：1.设置盒子的宽度 2.将左右外边距设置为auto */
         div {
             width: 100px;
             height: 100px;
             margin: 0 auto;
             background-color: purple;
             /* 将盒子里的内容也居中：在父类（盒子）中设置text-align：center */
             text-align: center;
         }
     </style>
 </head>
 <body>
     <div>123</div>
 </body>
 </html>

这时候有细心的小伙伴发现，很多时候我们的盒子并没有紧贴屏幕的左边缘，那是因为盒子有自带的内外边距，只要消除了内外边距就可以实现和屏幕左边缘的无缝衔接。

现在我们想要让这个有序列表和左边缘无缝衔接，用一个通配符选择器将其内外边距设置为0就可以了。

<!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>清除内外边距</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>
<body>
    123
    <ol>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>
</body>
</html>

可以得到这样的效果：

圆角和阴影

圆角

CSDN写文章的三个按钮，它们的左右边框是圆弧形的，类似这种效果怎么设置呢？

先从简单的说起，我们现设置一个圆角矩形。

类似这样的形状我们应当如何设置？这时候就要用到border-radius属性。而这个属性的值，可以写绝对的圆角半径值，也可以写先对于矩形变长的相对值（百分比）。

很显然，如果这个矩形是一个正方形，将border-radius的值设置为50%,就可以得到这个正方形的内切圆。如果相对值大于50%是一样的效果。那么如果是长方形，我们写一个相对值会出现什么情况呢？这时候就会出现椭圆角，设置为50%的时候就可以得到长方形的内切椭圆。

当然，我们可以对于四个顶角分别进行设置，从前到后依次是左上角、有伤角、右下角、左下角。就像下面这个：

当border-radius只有两个参数值时，第一个是主对角线两个角的圆角半径，第二个是副对角线两个角的圆角半径。

那么回到我们最开始的问题，圆边矩形怎么得到呢？很简单，将圆角半径设置为高度的一般就可以了。

上面几个图形的代码如下所示：

<!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>圆角</title>
    <style>
        /* 正常的四个圆角 */
        .one {
            height: 100px;
            width: 100px;
            border-radius: 10%;
            background-color: #3e3e;
            margin-bottom: 20px;
        }
        /* 利用正方形画圆 */
        .two {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background-color: #2a2a3b;
            margin-bottom: 20px;
        }
        /* border-radius相对法取值范围0-50% */
        .three {
            height: 100px;
            width: 100px;
            border-radius: 100%;
            background-color: #ddd33e;
        }
        /* 主对角线上变为圆角 */
        .four {
            margin-top: 20px;
            height: 100px;
            width: 100px;
            border-radius: 10% 0;
            background-color: #111cde;
        }
        /* 左右边变为圆弧 */
        .five {
            height: 100px;
            width: 500px;
            border-radius: 50px;
            background-color: #387;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        /* 四个角不同，顺时针依次增大 */
        .six {
            height: 100px;
            width: 100px;
            border-radius: 10% 20% 30% 40%;
            background-color: #eef23c;
        }
        /* 椭圆 */
        .seven {
            height: 100px;
            width: 500px;
            border-radius: 50%;
            background-color: #387;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></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>阴影</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: #3a4b;
            margin:0 auto;
            /* 参数：x方向的阴影长度（允许负值）、y方向的阴影长度（允许负值）、模糊程度、阴影大小、颜色 */
            box-shadow: 10px 10px 10px 10px gray;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

我们利用box-shadow属性，其后又六个参数需要设置，其中前两个（x方向和y方向的阴影长度）是必选参数。模糊程度、阴影大小和颜色等参数都是可选参数。

今天的分享就到这里，希望大家能够提出宝贵的意见和建议，下次一定尽快更新。