一幅长文细学HTML5和CSS3（三）——CSS3（上）
3 CSS3
CSS实际上指的是层叠样式表(Cascading style sheets)，其作用是给页面中的HTML标签设置样式。
对于CSS来说，最简单的方式是写于style标签中，而style标签一般写于head标签里面，title标签下面。
一般来说，CSS由选择器和属性构成。选择器的作用是用于找到对应的HTML标签并且赋予对应的效果；CSS的属性格式为属性名:属性值,每个属性以分号结尾。
对于CSS来说，其注释遵从/*注释内容*/。
3.1 CSS写法
CSS写法
CSS具有多种书写方式：
- 内嵌式：CSS写在style标签中
- 提示：style标签虽然可以写在页面内的任意位置，但是通常约定写在head标签中，这种写法通常只会在小案例中
- 外联式：CSS写在一个单独的.css文件中
- 提示：需要通过link标签在网页中引入，这种写法在开发中是最好的写法
- 行内式：CSS写在标签的style属性中
- 提示：初学者不推荐使用，之后学完js可配合js使用
内嵌式
<title>Document</title>
<style>
/* css的注释 */
h1
{
/*字体颜色设置*/
color: red;
/*字体大小*/
font-size: 40px;
/*标题背景颜色*/
background-color:blueviolet
}
</style>
</head>
外联式
<title>Document</title>
<link rel="stylesheet" href="./CSSTest.css">
</head>
行内式
<h1 style="font: size 20px; background-color:blueviolet; color:red;">青春如同白驹过隙</h1>
3.2 基础选择器
选择器分类
| 选择器 | 说明 |
|---|---|
| 标签名{CSS属性名:属性值;} | 使用标签来定位 |
| .类名{CSS属性名:属性值;} | 使用标签中的class来定位 |
| #id属性值{css属性名:属性值;} | 使用标签中的id来定位 |
| *{css属性名:属性值;} | 使用所有标签，一般用于清除全局标签的margin(外边距)，padding(内边距)。 |
程序清单3_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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
background: pink;
}
.Test2{
background: skyblue;
}
#Test3{
background:gold;
}
</style>
</head>
<body>
<p>测试案例1</p>
<div class = "Test2">测试案例2</div>
<div id = "Test3">测试案例3</div>
</body>
</html>
3.3 字体
3.3.1 字体属性分类
| 字体属性 | 说明 | 取值 |
|---|---|---|
| font-size | 字体大小 | 数字+px。谷歌浏览器默认文字大小16px |
| font-weight | 字体粗细 | 100-900的整百数，数值越大越粗。其中正常字体粗细可以用normal或者400，如果加粗可以使用bold或者700 |
| font-style | 字体倾斜 | normal或italic(倾斜) |
| font-famliy | 字体样式 | 可以是电脑上拥有的所有字体类型，如楷体、宋体、黑体、微软雅黑等 |
注：
如果字体样式名称不止一个单词，则必须用引号引起来，如"Times New Roman"，如果是中文字体或者只有一个单词则无需引号，如楷体。
字体样式在使用中文的时候==最好使用对应的Unicode编码来代替==，这样能够避免浏览器解释CSS代码时出现乱码问题。
3.3.2 通用族字体样式
| 衬线字体（Serif） | 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感，代表为Times New Roman |
| 无衬线字体（Sans-serif） | 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观，代表为宋体 |
| 等宽字体（Monospace） | 这里所有字母都有相同的固定宽度。它们创造出机械式的外观，代表为Lucida Console |
| 草书字体（Cursive） | 模仿了人类的笔迹，代表为Lucida Handwriting |
| 幻想字体（Fantasy） | 是装饰性/俏皮的字体，代表为Papyrus |
注：如果字体样式的值为通用族，则会从通用族之中随机挑出一种字体使用。
3.3.3 字体的优先级
如果设置了字体样式而电脑上没有该样式，则我们可以给出备选方案。
写法：font-famliy:备选字体1，备选字体2，通用族…；
3.3.4 font复合属性
使用==font:style weight size family==可以简化代码。
程序清单3_3_4
<!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>Document</title>
<style>
#Test1{
font-size: 12px;
font-weight: bold;
font-style: normal;
font-family: 楷体;
}
#Test2{
font-size: 16px;
font-weight: normal;
font-style: italic;
font-family: 宋体;
}
#Test3{
/*字体大小不写px该设置失效*/
font-size: 18;
font-weight: 100;
font-family: "Times New Roman";
}
#Test4{
font:italic 700 18px Cursive;
}
#Test5 {
font-size: 20px;
font-weight:400;
font-family:宋体,幼圆,sans-serif;
}
</style>
</head>
<body>
<p id = "Test1">测试案例1</p>
<p id = "Test2">测试案例2</p>
<p id = "Test3">测试案例3</p>
<p id = "Test4">测试案例4</p>
<p id = "Test5">测试案例5</p>
</body>
</html>
3.4 文本样式
| 文本样式 | 说明 | 取值 |
|---|---|---|
| text-indent | 文本缩进 | 数字+px或者数字+em。px对应像素而em对应font-size的数字大小单位。 |
| text-align | 文本对齐 | left、center、right。text-align不仅仅可用于文字，他还适用于span、a标签、input标签、img标签。 |
| text-decoration | 文本修饰 | underline、line-through、overline、none。开发中，我们时常会用到text-decoration:none; ， 用于清除a标签默认的下划线 |
| line-height | 行高 | 数字+px或者倍数(font-size的倍数)。可使用font连写，font:style weight size/line-height family; |
| text-shadow | 文字阴影 | 共有四个值，分别为h-shadow,v-shadow,blur,color。参数的设置和3.10.6的盒子阴影类似。 |
3.5 补充知识
3.5.1 颜色取值
| 颜色表示方式 | 表示含义 | 属性值 |
|---|---|---|
| 关键词 | 预定义的颜色名 | red、green… |
| rgb表示法 | 三原色，0-255取值 | rgb(0,255,255)… |
| rgba表示法 | 三原色+透明度，透明度0-1 | rgba(255,255,255,0.5)… |
| 十六进制表示法 | #开头，将数字转换成十六进制 | #000000… |
3.5.2 水平居中
如果我们要使某块区域居中，只需设置其属性margin:0 auto;即可。某个区域可以是div或p构成的区域。这里只是暂时提及，后面我们会详细讨论这个问题。
程序清单3_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>Document</title>
<style>
div{
width:800px;
height: 600px;
background-color: pink;
margin: 0 auto;
}
h1{
text-align: center;
}
.top{
text-align: center;
}
#time{
color : #808080;
}
#source{
color:#87ceeb;
}
a{
text-decoration:none;
}
.text{
text-indent: 2em;
text-align: left;
}
</style>
</head>
<body>
<div>
<h1>《自然》评选改变科学的10个计算机代码项目</h1>
<div class="top">
<span id = "time">2077年01月28号日14:58</span>
<span id = "source">新浪科技 </span>
<a href="#">收藏本文</a>
<hr>
<p class="text">北京时间 1 月 26 日消息，据国外媒体报道，从 Fortran 到 arXiv.org，这些计算机编码和平台让生物学、气候科学和物理学等学科的发展达到了真正 “日新月异”的速度。</p>
<p class = "text">2019 年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、
智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录
这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
</div>
</div>
</body>
</html>
3.6 CSS复合选择器
3.6.1 复合选择器简介
复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形式的。
复合选择器的特点
复合选择器可以更准确、更高效的选择目标元素
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等。
3.6.2 后代选择器
后代选择器
后代选择器也叫包含选择器，即可以在父元素中选子元素。
语法：元素1 元素2{样式}；其写法就是把外层标签写在里面，内层标签写在后面，中间用空格分割。
程序清单3_6_2
<!DOCTYPE html>
<html lang="zh-cn">
<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>
#d1 #p1{
color : palegoldenrod;
font-family: 楷体;
}
#d1 .p2{
color:blue;
font-family:幼圆;
}
</style>
</head>
<body>
<div id = "d1">
<p id = "p1">
我们都在努力的活下去
</p>
<p class = "p2">
我们都是悲哀的人类
</p>
</div>
</body>
</html>
3.6.3 子选择器
子选择器
子元素选择器（子选择器）只能作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法：元素1 > 元素2{样式}
3.6.4 并集选择器
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
语法：元素1,元素2{样式}
3.6.5 伪类选择器
概述
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
链接伪类选择器
| 格式 | 说明 |
|---|---|
| a:link | 选择所有未被访问过的链接 |
| a:visited | 选择所有已经被访问过的链接 |
| a:hover | 选择鼠标指针悬停之上的链接 |
| a:active | 选择鼠标按下未弹起的链接 |
注：
- 在开发中为了确保正常生效，请按照LVHA的顺序来写选择器：:link,:visited,:hover,:active。
- a标签链接只要存在就必须给其单独设定样式，否则初始化状态是蓝色字体带下划线，这是实际开发不允许的。
:focus伪类选择器
:focus伪类选择器用于选择获得焦点的表单元素。也就是说，只有表单元素才能被选择。
程序清单3_5_5
<!DOCTYPE html>
<html lang="zh-cn">
<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:link{
color:black;
text-decoration:none;
}
a:visited{
color:orange;
}
a:hover{
color:blue;
}
a:active{
color:green;
}
/*focus伪类选择器*/
input:focus{
/*背景色*/
background-color: skyblue;
/*字体色*/
color :red;
}
</style>
</head>
<body>
<a href="#">演示链接</a>
<br>
<input type = "text" placeholder="请输入密码">
</body>
</html>
3.7 CSS的元素显示模式
3.7.1 显示模式简介
元素显示模式
网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素以什么方式进行显示，如<div>独占一行，一行可以放多个<span>。
HTML元素一般分为==块元素==和==行内元素==两种类型。
3.7.2 块元素
块元素
常见的块元素由标题标签h1~h6、段落标签p、盒子标签div、列表标签ul、ol、li。
块元素的特点
- 比较霸道，自己独占一行
- 高度、宽度、外边距以及内行距都可以控制
- 宽度默认是容器的100%
- 是一个容器或盒子，里面可以放行内或者块级元素
注：文字类元素不能使用块级元素
3.7.3 行内元素
行内元素
常见的行内元素由<a>、<strong>、<b>、<em>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。其中<span>标签是最典型的行内元素。有的地方也将行内元素称为==内联元素==。
行内元素的特点
- 相邻行内元素在一行上，一行可以显示多个
- 高和宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
3.7.4 行内块元素
行内块元素
<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点，故我们称其为行内块元素。
行内块元素的特点
和相邻行内元素在一行上，但是它们之间会有空白缝隙，一行可以显示多个。
默认宽度就是它本身内容的高度。
高度、行高、外边距以及内边距可以控制。
3.7.5 总结
元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以设置宽度和高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行放多个行内元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
3.7.6 元素显示模式转换
元素显示模式转换
一个特别的例子是，我们要点击一个链接。正常情况下，链接的点击范围应该是字体之上，但是我们想扩大它的点击范围，这就需要使用元素模式的转换。
a标签属于行内元素无法设置高宽，只有完成元素模式转换，将其赋予块级元素的特性之后使其可设置宽高才能扩大它的点击范围。
转换方式
- 转换为块元素：display:block（重要）
- 转换为行内元素：display:inline（不常用）
- 转换为行内块元素：display:inline-block（普通）
- 隐藏元素：display:none
程序清单3_7_6
<!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: block;
width: 230px;
height: 40px;
background-color: #55585a;
color: #fff;
font-size: 14px;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
}
a:hover{
background-color: orange;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
注：CSS没有提供让一行文字在一个元素中垂直居中的代码。但是我们可以让文字的行高等于盒子的高度，这样就可以做到垂直居中的效果。
3.8 CSS背景
3.8.1 背景的设置
背景颜色
语法：background-color:transparent | color。
说明：如果不填颜色，则默认透明(transparent)
背景图片
语法：background-image:none | url("")
说明：如果不指定则默认无背景图，否则使用绝对路径或相对路径插入图片
应用：描述了元素的背景图像。在实际开发中常见于一些logo或者一些装饰性的小图片或者是超大的背景图片，优点是便于控制位置。
背景平铺
平铺：若图片不及容器那么大，则采用复制的形式平铺填充整个容器。
语法：backgroud-repeat:repeat | no-repeat | repeat-x | repeat-y
说明：
- repeat代表背景图像在纵向和横向上平铺
- no-repeat代表背景图像不平铺
- repeat-x代表背景图像横向平铺
- repeat-y代表背景图像纵向平铺
3.8.2 背景方位设置
背景图片位置
语法：background-position:x y
说明：x坐标和y坐标可以使用方位名词或者精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right |
注：
-
使用方位名词时，x和y的取值确定后顺序无所谓。如center top和top center的效果相同。
-
使用方位名词时，如果只指定了一个方位名词，另外一个值省略，则第二个值默认为居中对齐。
-
使用精确坐标时，第一个肯定是x坐标，第二个肯定是y坐标，这时顺序十分重要。
-
使用精确坐标时，如果只指定了一个数值，那该数值一定是x坐标，另外一个默认垂直居中。
-
如果指定的x和y是使用方位名词和精确坐标混用，则第一个值一定是x坐标，第二个值一定是y坐标。
3.8.3 背景附着
背景图像附着
语法：background-attachment:scroll | fixed
说明：可以设置背景图像固定还是随着页面的其余部分滚动。scroll表示滚动，fixed表示固定。
3.8.4 背景复合写法
复合写法
格式：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
3.8.5 透明度
背景颜色半透明
格式：background:rgba(0,0,0,0.3)
说明：最后一个参数为alpha透明度，取值为0~1之间。
注：
-
我们可以把小数前面的0去掉，只保留小数点及后面数字即可，如0.3常写作.3。
-
背景半透明指的是容器背景半透明，上面存放的其他元素不会受到影响。
-
这种写法是CSS3才新增的，必须要IE9+版本浏览器才能支持。
3.8.6 背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url("") |
| backgroud-repeat | 背景平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position |
| background-attachment | 背景附着 | scroll /fixed |
| 背景简写 | 书写简单 | 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; |
| 背景色半透明 | 背景颜色半透明 | background:rgba(0,0,0,0.3)；后面必须是4个值 |
3.9 CSS三大特性
3.9.1 层叠性
层叠性
相同选择器给相同的元素设置样式，此时一个样式会覆盖另一个冲突的样式。层叠性遵循就近原则，那个样式离结构近，就执行哪个样式。
程序清单3_9_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>Document</title>
<style>
div{
height: 200px;
background-color: aqua;
}
div{
background-color:pink;
}
</style>
</head>
<body>
<div>测试文本1</div>
</body>
</html>
一些说明
打开网页，点击检查，点击元素，可以看到div设置的上一个冲突样式被删除线划掉，意为被覆盖或失效。
3.9.2 继承性
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
恰当使用继承性可以简化很多代码。
不是所有的样式都能继承，如text-，font-，line-这些元素开头的样式以及color属性大多数能继承。
程序清单3_9_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>Document</title>
<style>
div{
height: 200px;
background-color: aqua;
font-size : 12px;
}
</style>
</head>
<body>
<div>
<p>测试案例1</p>
</div>
</body>
</html>
一些说明
打开网页，点击检查，点击元素，点击p标签，可看到p标签继承自div标签。
3.9.3 优先级
-
当一个元素指定了多个选择器，就会有优先级的产生。
-
选择器相同，则执行层叠性。
-
选择器不同，则根据选择器的权重来选择。
选择器的权重
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 元素(标签)选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| 样式!important | 无穷大 |
注：看权重时将逗号省略，如行内样式看做1000。数值越大，权重越大。这实际上很容易记忆：如果选择器的精度越高，则其权重越高。
CSS权重的叠加
下面给出一段代码作为演示
<style>
div{
background-color: skyblue;
}
div p{
background-color: yellow;
}
</style>
<body>
<div>
<p>测试内容1</p>
</div>
</body>
在上面的演示中，div标签选择器的权重是0,0,0,1。而div p的后代选择器的权重为div标签选择器权重0,0,0,1加上p标签选择器权重0,0,0,1，结果为0,0,0,2。该权重比div标签的权重要大，故p的内容应该是黄色，而不是天蓝色。
3.10 盒子模型
3.10.1 盒子模型概述
页面布局的三大核心
- 盒子模型
- 浮动
- 定位
看透网页的布局
- 网页大多数可以看做是多个盒子组成的
- 我们可以利用CSS设置好盒子的样式，然后摆放到对应的位置
- 往盒子里面装内容
盒子模型的组成
把HTML页面中的布局元素看做是一个矩形的盒子。CSS盒子模型本质上也是一个盒子，封装周围的HTML元素。它包括外边距、边框、内边距和实际内容。
- 外边距(margin)：一个盒子和另外一个盒子之间的距离
- 内边距(padding)：盒子边框和盒子内部元素之间的距离
- 边框(border)：盒子的外围
- 实际内容(content)：盒子中存放的元素
注：
边框会影响盒子的实际大小。如一个盒子长200px，宽100px，设定边框宽度为10px，则盒子会变成210px×110px，故我们实际测量盒子时一般都是测内壁。
内边距会影响盒子的实际大小。如一个盒子长200px，宽100px，设定内边距为10px，则盒子会变成210px×110px，因为盒子会被撑大。==如果想要盒子不被撑大，那就不要设置盒子的长宽属性==。
3.10.2 边框
边框属性
| 属性 | 说明 |
|---|---|
| border-width | 边框粗细 |
| border-style | 边框样式 |
| border-color | 边框颜色 |
注：如果想要简化代码，也可以写成border:border-width border-style border-color的连写形式。
边框样式的选值
| 选值 | 说明 |
|---|---|
| solid | 实线边框 |
| dashed | 虚线边框 |
| dotted | 点线边框 |
表格的边框
对于表格来说也可以应用边框属性，不过表格中含有多个标签，属性加在不同的标签上面效果是不一样的。
程序清单3_10_2
<!DOCTYPE html>
<html lang="zh-cn">
<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>Document</title>
<style>
#Test1{
width: 400px;
height: 100px;
margin:0 auto;/*盒子居中*/
background: pink;
/**/
border:4px dashed yellow;
}
#Test2{
width: 400px;
height: 100px;
background: pink;
margin:0 auto;/*盒子居中*/
border-width: 4px;
border-style:solid;
border-color:blue;
}
table,td{
font-size:14px;
text-align:center;
border: solid pink;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id = "Test1"></div>
<div id= "Test2"></div>
<!-- 生成一个表格 -->
<table align=center>
<caption>演示表格1</caption>
<thead>
<th>
姓名
</th>
<th>
学号
</th>
<tbody>
<tr>
<td>ArimaMisaki</td>
<td>20195140</td>
</tr>
</thead>
</table>
</body>
</html>
3.10.3 内边距
准确的控制
内边距除了直接使用padding，我们还可以控制其上下左右的内边距。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
复合写法
使用padding也可以做到准确的控制。
| padding:5px | 代表四面内边距都是5px |
| padding:5px 10px | 代表上下5px，左右10px |
| padding:5px 10px 20px | 代表上5px左右10px下20px |
| padding:5px 10px 20px 30px | 代表顺时针依次px |
程序清单3_10_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>Document</title>
<style>
div{
margin: 0 auto;
width:200px;
height: 100px;
background-color: rgb(244, 94, 119);
padding: 2em 4em 3em 4em;
}
</style>
</head>
<body>
<div>
如果把世上每一个人的痛苦放在一起,再让你去选择,你可能还是愿意选择自己原来的那一份
</div>
</body>
</html>
3.10.4 外边距
准确的控制
和内边距一样，如果想要准确控制就后面加一横杆再加方位的英语，复合写法和内边距差不多，这里不再赘述。
外边距的应用
外边距可以使得块级盒子水平居中，条件是盒子必须指定了宽度，并且盒子的左右外边距都设置为auto。如：
- margin-left:auto;margin-right:auto;
- margin:auto;
- margin:0 auto;
行内元素和行内块元素水平居中
在前面我们已经有提及了，使用text-align:center即可。
外边距的塌陷问题
如果定义了两个盒子，一个A盒子一个B盒子，B盒子嵌套在A盒子之中，两个盒子的标签为父子关系。若想要使得B盒子在A盒子中使用margin来往垂直距离挪一点点，则会发生塌陷，即子盒子外边距影响了父盒子的外边距。
较好的办法有三种：
- 为父元素定义边框
- 为父元素定义内边距
- 为父元素添加：overflow:hidden
如果盒子是浮动盒子、固定盒子、绝对定位盒子则不会有塌陷问题。
清除内外边距
不同的浏览器网页会自带内外边距，故在使用时我们要使用通配符选择器清除默认内外边距。
行内元素为了照顾兼容性，我们一般指设置左右内外边距，而不设置上下内外边距。如果是行内块元素或是块级元素则无需注意。
3.10.5 圆角边框
圆角边框
如果我们想要使用圆角的边框，可以设置border-radius。如border-radius:10px 。需要注意的是，border-radius的值可以是一个，也可以是四个；如果是四个值，则表示从左上角开始顺时针方向每个圆角的半径。
圆角边框的原理
从名字上看，我们可以理解radius实际上是半径的意思。我们输出该样式的值为生成一个半径为输入值的圆在盒子的内部，然后于盒子内壁相切，生成的角即为圆角。
程序清单3_10_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>Document</title>
<style>
div{
margin: 0 auto;
height: 100px;
width: 200px;
background-color: pink;
border-radius: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.10.6 盒子阴影
盒子阴影及其语法
使用box-shadow可以为盒子增加阴影
语法：box-shadow:h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必须，水平阴影，正为右，负为左 |
| v-shadow | 必须，垂直阴影，正为下，负为上 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影尺寸 |
| color | 可选，阴影颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
注：
- 默认的是外阴影，但是不可以写外阴影的单词，否则会导致外阴影失效。
- 盒子阴影不占用空间，不会影响其他盒子的排列。
程序清单3_10_6
<!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>Document</title>
<style>
div{
width: 200px;
height: 200px;
box-shadow: 10px 10px 10px 10px rgb(1, 1, 1,0.6);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 点赞
- 收藏
- 关注作者
评论（0）