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进阶内容—盒子和阴影我们就讲到这里，你是否全部了解了呢？
下面我会介绍浮动定位，敬请期待哦~
CSS进阶内容—盒子和阴影详解的更多相关文章
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- CSS进阶内容——布局技巧和细节修饰
CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...
- JavaScript进阶知识点——函数和对象详解
JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- CSS魔法堂：Position定位详解
一.Position各属性值详解 1. static :默认值,元素将按照正常文档流规则排列. 2. relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...
- css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
- css控制UL LI 的样式详解(推荐)
代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...
- CSS系列(8) CSS后代选择器和子选择器详解
一.CSS后代选择器详解 1, 生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...
- 我的Android进阶之旅------>HTTP Header 详解
HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传 ...
随机推荐
- 5 分钟教你快速掌握 GitHub Actions 自动部署博客
自从 GitHub 宣布 GitHub Actions 在平台上对所有开发人员和存储库可用以来,GitHub Actions 越来越受欢迎.很多第三方平台在生态系统中有速度等限制,将进一步推动开发人员 ...
- celery介绍、架构、快速使用、包结构，celery执行异步、延迟、定时任务，django中使用celery，定时更新首页轮播图效果实现，数据加入redis缓存的坑及解决
今日内容概要 celery介绍,架构 celery 快速使用 celery包结构 celery执行异步任务 celery执行延迟任务 celery执行定时任务 django中使用celery 定时更新 ...
- [笔记] 2-sat
定义 简单的说就是给出 \(n\) 个集合,每个集合有两个元素,已知形如选 \(a\) 则必须选 \(b\) 的若干个条件, 问是否存在从每个集合选择一个元素满足条件的方案,通常可以题目只要求任意一种 ...
- 看 AWS 如何通过 Nitro System 构建竞争优势
目录 目录 目录 前言 Amazon Nitro System Overview AWS EC2 的虚拟化技术演进之路 Nitro Hypervisor Nitro Cards Nitro Contr ...
- ts中 any、unknown、never 、void的区别
any.unknown.never .void的区别 any 表示任意类型,设置为any相当于对该变量关闭了TS的类型检测.不建议使用 let a;(隐式any) //声明变量不赋值,就是any 等效 ...
- 面试官：RocketMQ是什么，它有什么特性与使用场景？
哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Roc ...
- PowerJob高级特效-容器部署完整教程
介绍 powerjob提供了容器功能,用来做一些灵活的任务处理.这里容器为 JVM 级容器,而不是操作系统级容器(Docker).(至于为什么取"容器"这个有歧义的名字是因为作者没 ...
- 出现bash: ifconfig:command not found的解决办法,即安装ifconfig命令（亲测有效）
初装centos 7时,运行config报 command not found 错误, ifconfig命令是设置或显示网络接口的程序,可以显示出我们机器的网卡信息,可是有些时候最小化安装CentOS ...
- VMware 虚拟机图文安装和配置 Rocky Linux 8.5 教程
前言 2020 年,CentOS 宣布:计划未来将重心从 CentOS Linux 转移到 CentOS Stream.CentOS 8 的生命周期已于 2021 年 12 月 31 日终止,而 Ce ...
- python DOS 攻击，TCP压测脚本
pip3 install string&&scapy 1 #!/usr/bin env python 2 #-*-coding:utf-8-*- 3 import socket,ran ...