如何加深对CSS盒子和阴影的使用，要点包括哪些

发布时间：2023-10-11 11:05:33 所属栏目：语言来源：

导读：在实际应用中，我们有时候会遇到“如何加深对CSS盒子和阴影的使用，要点有哪些”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“如何加深对CSS盒子和阴影的使用，要点有哪些&

在实际应用中，我们有时候会遇到“如何加深对CSS盒子和阴影的使用，要点有哪些”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“如何加深对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>



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

div{
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
继承性
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>


<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：边框款式
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；
下面给出代码示例：

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



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



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



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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!