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

qiuluoyuweiliang 2023-03-28 原文

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进阶内容—盒子和阴影我们就讲到这里，你是否全部了解了呢？

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

进阶 mdash gt lt li Html/Css

有关CSS进阶内容——盒子和阴影详解的更多相关文章

ruby - 将数组的内容转换为 int - 2
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
ruby - capybara field.has_css?匹配器 - 2
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？最佳答案通过JonasNicklas得到了答案:No
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
css - 用 watir 检查标签类？ - 2
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。最佳答案试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
ruby - 如何在ruby中提取方括号内的内容 - 2
我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和
ruby-on-rails - 如何找出拦截 'method_missing' 的内容 - 2
使用Ruby1.8.6/Rails2.3.2我注意到在我的任何ActiveRecord模型类上调用的任何方法都返回nil而不是NoMethodError。除了烦人之外，这还破坏了动态查找器(find_by_name、find_by_id等)，因为即使存在记录，它们也总是返回nil。不从ActiveRecord::Base派生的标准类不受影响。有没有办法追踪在ActiveRecord::Base之前拦截method_missing的是什么？更新:切换到1.8.7后，我发现(感谢@MichaelKohl)will_paginate插件首先处理method_missing。但是will_pa
ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
ruby-on-rails - Rails - 理解 application.js 和 application.css - 2
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

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

CSS进阶内容

CSS三大特性

层叠性

继承性

优先级

盒子模型

盒子模型组成部分

边框（border）

内边距（padding）

外边距（margin）

案例：BOX模块案例

平面布局改善

圆角边框

盒子阴影

文字阴影

结束语

有关CSS进阶内容——盒子和阴影详解的更多相关文章

随机推荐