CSS进阶内容——盒子和阴影详解

CSS进阶内容

在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章

当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 – 博客园

CSS三大特性

首先我们先来了解CSS的三大特点,以便于我们下面知识点的讲解
CSS三大特性包括:

  • 层叠性
  • 继承性
  • 优先级

层叠性

当相同的选择器设置相同的样式,却含有不同的样式值时,此时一个样式就会覆盖掉另一个冲突的样式,层叠性就是为了解决这个问题

层叠性原理:

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
  • 当样式不冲突时,不发生层叠性

下面给出代码示例:

<!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>

    <!-- 对于下方div我们给出两个div的css设置 -->


    <style>
        /* 下面这种情况,颜色就出现了层叠性,因就近原则,这里div呈blue色 */
        /* 同时,font-size因未发生冲突,不产生层叠性 */
        div{
            color: black;
        }
        
        div{
            color: blue;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>

继承性

CSS中的继承:

  • 当子类未设置对应属性时,子类继承成父类的某些样式(例如:字体颜色,字体大小等)
  • 恰当使用可以简化代码,降低css复杂性
  • 子元素只能够继承父类的某些样式(text-,font-,line-这些元素开头的,以及color属性)

下面给出代码示例:

<!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>

    <!-- 当我们不设置p属性仅设置div属性时,p会继承div的属性 -->
    <style>
        div{
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>123321</p>
    </div>
</body>
</html>

继承中的特殊属性-行高:

  • 当继承行高时,可以采用font:字体大小/字体行高
  • 这里的行高可以不带像素px,而直接写2或1.5表示是字体大小的2倍或1.5倍
  • 这样我们就可以根据自己的字体大小来调整行高

下面给出代码示例:

<!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{
            color: pink;
            font: 12px/1.5;
        }
    </style>
</head>
<body>
    <div>
        <p>123321</p>
        <p>123321</p>
    </div>
</body>
</html>

优先级

当一个元素指向多种选择器时,会产生优先级

每种选择器都具有一定的权重:

选择器 选择器权重
继承或* 0.0.0.0
元素选择器 0.0.0.1
类选择器,伪类选择器 0.0.1.0
ID选择器 0.1.0.0
行内样式 1.0.0.0
!important 重要的 无穷大

注意:

  • 权重由四组数决定,无法进位
  • 从前往后比较
  • a链接默认制定样式,若修改需要对a改变

权重叠加:

  • 当采用复合选择器时,把所有选择器权重相加
  • !!!注意:不可进位

盒子模型

盒子模型是我们网络布局的最基础元素

网络布局过程:

  • 先准备相关网页元素,网页元素基本都是盒子Box
  • 利用css设计好盒子样式,并摆放到相应位置
  • 往盒子里装内容

盒子模型组成部分

盒子模型由四部分组成:

  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 margin

边框(border)

边框border可以设置元素的边框,边框由三部分组成:边框宽度,边框样式,边框颜色

语法:

border-color:边框颜色
border-width:边框宽度
border-style:边框款式(solid实线,dashed虚线)
border:颜色 宽度 款式(可以简化一起设置)

边框是可以分别设置的:

border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框

当我们只希望改变一条边框时,可以先定义全边框,再定义特别边框,这样css就会利用层叠性实现效果:

<!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: 30px;
            width: 50px;
            /* 我们先定义全边框 */
            border: 1px black dashed; 
            /* 随后定义特殊边框,采用层叠性覆盖所需边框的原本边框设计 */
            border-top: 2px red solid;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

注意:当两侧都具有边框时,边框会汇聚在一起导致边框效果大打折扣

所以css提供了border-collapse:collapse来合并边框

<!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>
        table{
            /* 对table设置一个范围大小 */
            height: 240px;
            width: 500px;
        }

        table,th,td {
            /* 对全部设置一个边框以及字体设置 */
            border: 1px solid black;
            /* 
            合并相邻的边框 
            当两侧都具有边框时,中间边框会变成两侧边框之和(边框相聚)
            我们需要采用border-collapse: collapse来合并边框
            */
            border-collapse: collapse;
            /* 我们稍微设置一下字体以及对齐 */
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>上升</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

注意:边框会影响盒子实际大小

所以我们在设计盒子时需要保留边框粗细大小

例如:

  • 当我们需要一个总体积为20*20的盒子,且需要边框2px
  • 那么我们div的height和width只需设计到18px,然后我们再加上border-width:2px即可

内边距(padding)

padding属性用来设计内边距,即边框与内容之间的距离

主要分为四个内边距:

  • padding-top 上内边距
  • padding-bottom 下内边距
  • padding-left 左内边距
  • padding-right 右内边距

内边距也存在简写方法:

/* 全部内边距 */
padding: 5px 
/* 上下和左右 */
padding: 5px 10px
/* 上和左右和下 */
padding: 5px 10px 15px
/* 上和右和下和左 */
padding: 5px 10px 15px 20px

注意:padding也会影响盒子的大小

当存在padding时,盒子大小也会相应增加相对大小

所以我们在设计盒子时,同样也需要留下padding距离的大小

案例:巧妙利用padding设计导航栏

<!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>padding应用于导航栏</title>

    <style>
        .nav {
            /* 首先给大导航栏设计好高度和边框和底板颜色,设置line-height使文字始终居中 */
            height: 41px;
            border-top: 3px orange solid;
            border-bottom: 1px #edeefe solid;
            background-color: #edeefea2;
            line-height: 41px;
        }

        a{
            /* 需要先变成行内块元素才可以具有高度,我们需要高度来形成一个框架,使整个框架都是超链接 */
            display: inline-block;
            height: 41px;
            font-size: 12px;
            text-decoration: none;
            color:#4c4c4c;
            /* 我们采用padding方法控制超链接之间的距离,使其相隔一段距离且不受字体长短影响 */
            padding: 0 20px;
        }

        a:hover{
            /* 我们希望在鼠标滑动在链接上时有明显显示 */
            background-color: bisque;
            color:red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">新浪客户端</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>
</html>

特定情况:当盒子没有设置height或者width时,padding不会撑开盒子

外边距(margin)

margin用来设置外边距,即控制盒子与盒子之间的距离

主要分为四个外边距:

  • margin-top 上外边距
  • margin-bottom 下外边距
  • margin-left 左外边距
  • margin-right 右外边距

外边距和内边距的简写方法也与padding完全相同:

/* 全部内边距 */
margin: 5px 
/* 上下和左右 */
margin: 5px 10px
/* 上和左右和下 */
margin: 5px 10px 15px
/* 上和右和下和左 */
margin: 5px 10px 15px 20px

外边距典型应用:使块级盒子水平居中

要求:

  • 盒子具有宽度width,高度height
  • 盒子内设置margin: 0 auto;(只要保证左右margin是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>

    <!-- 给盒子设置宽度且盒子的左右margin为auto -->

    <style>
        .nav{
            background-color: pink;
            height: 200px;
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
</body>
</html>

接下来我们也稍微介绍一下对于行内块/行内元素居中的方法:

  • 使其对应的父类元素加上text-align:center即可
  • 因为对于父类来说,行内块/行内元素属于父类的内部元素,所以将父类的内部元素居中即可实现行内块/行内元素居中

下面给出代码示例:

<!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>

    <!-- 给盒子设置宽度且盒子的左右margin为auto -->

    <style>
        .nav{
            background-color: pink;
            height: 200px;
            width: 500px;
            margin: 0 auto;
            /* 在这里设置text-align即可使内部元素居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        <span>123</span>
    </div>
</body>
</html>

嵌套块元素垂直外边距塌陷问题:

  • 当出现嵌套关系(父子关系)时,父元素和子元素同时有外边距时,此时父元素会塌陷较大的外边距值

解决方案:

  • 为父元素定义一个上边框:border:1px solid transparent
  • 为父元素定义一个内边距:padding:1px
  • 为父亲添加overflow:hidden
<!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>

    <!-- 当父类和子类都具有外边距时,父类会以较大的外边距为主进行移动 -->
    <!-- 如下所示,父亲的外边距为100px,儿子仍旧紧贴父亲 -->
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

注意:因为网页很多元素都带有内外边距,且在各浏览器中标准不同,所以我们通常清除内外边距

我们常常把这行代码作为css内容的第一行

* {
	padding: 0;
    margin: 0;
}

稍微提一句:行内元素尽量只设置左右内外边距

案例:BOX模块案例

让我们通过HTML和CSS还原下面这个网页排版

图片:

代码:

<!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>

    <!-- 正常情况来说,我们分HTML和CSS两部分书写,但为了讲解简单,我们放在同一HTML中书写 -->

    <style>
        /* 第一步,去除内外边距 */
        * {
            padding: 0;
            margin: 0;
        }
        /* 第二步,设置框架大盒子 */
        .box {
            /* 数据都是采用PS测量,以后你们做项目时也会给出相应值或自己测量 */
            height: 415px;
            width: 298px;
            background-color: rgba(255, 255, 255, 0);
            /* 我们希望把盒子居中显示 */
            margin: 100px auto;
        }
        /* 第三步:我们设置图片和盒子一样宽 */
        .box img {
            width: 100%;
        }
        /* 第四步:设置第一行小字 */
        .review {
            font-family: 微软雅黑;
            font-size: 14px;
            /* 注意:设置整体高度,使无论多少文字,底部都是对齐的 */
            height: 70px;
            padding: 0 28px;
            margin-top: 30px;
        }
        /* 第五步:设置第二行小字 */
        .appraise {
            font-family: 微软雅黑;
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
            margin-top: 28px;
        }
        /* 第六步:设置最后一行小字,我们分几部分设置 */

        

        .info {
            font-size: 14px;
            padding: 0 28px;
            margin-top: 15px;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }

        .info .price {
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 首先我们放入照片 -->
        <img src="案例照片/1.png" alt="图片">
        <!-- 放入第一行文字 -->
        <p class="review">快递牛,整体不错,蓝牙都可以秒连</p>
        <!-- 放入第二行文字 -->
        <p class="appraise">来自1923134的评价</p>
        <!-- 最后一行文字 -->
        <p class="info"><span class="name">Redmi AirDots真无线蓝...</span><em>|</em><span class="price">99.9元</span></p>
    </div>
</body>
</html>

在这里插上一句:(因为我自己第一次做时出现了问题所以想向你们提醒一下)

  • 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt
  • 这里例如最后一行p,我们不能插入h标题元素

平面布局改善

除了正常的布局改善,我们也可以通过其他方法获得好看的图形样式

例如圆角边框和阴影,就会为我们的Web页面起到美化的作用

圆角边框

border-radius就是用来控制图形四角的曲度

div {
    /*
    border-radius:length;里面设置的边角圆的半径,也可也设置百分比
    如果你想获得一个圆形,需要把高度宽度设置一致且length设置成图形直径的一半即可();
    如果你想获得一个圆角矩形,只需把length设置为高度的一半即可
    注意:这里的角仍旧可以单独设置
    当两个值时顺序分别是左上和右下,右上和左下
    当四个值时顺序分别是左上,右上,右下,左下
    */
    border-radius:length;
}

盒子阴影

box-shadow用来设置盒子阴影

box-shadow通常有六个内部设置,一般直接简写:

  • box-shadow: 水平阴影(px) 垂直阴影(px) 模糊距离(px) 阴影尺寸(px) 颜色(color) 内部/外部(insert/outset)
  • 我们一般常用设置为box-shadow: 10px 10px 10px -4px rbga(0,0,0,0.3)
  • 注意:不可以写outset,outset是默认的,如果写了会导致阴影失效
  • 注意:阴影不占用盒子大小

下面我们给出代码示例:

<!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: 200px;
            width: 200px;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
            margin: 100px auto;
        }
        /* 
        也可以设置在当移动上才可显示 
        div:hover {
            height: 200px;
            width: 200px;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
            margin: 100px auto;
        }        
        */
        

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

文字阴影

text-shadow用来设置盒子阴影

box-shadow通常有四个内部设置,一般直接简写:

  • box-shadow: 水平阴影(px) 垂直阴影(px) 模糊距离(px) 颜色(color)
  • 使用不多,了解即可

结束语

好的,CSS进阶内容—盒子和阴影我们就讲到这里,你是否全部了解了呢?

下面我会介绍浮动定位,敬请期待哦~

张贴在2