网络安全之前端学习（css终章）

如大家所见，今天的文章就是css的最后一篇文章。那么话不多说，我们开始吧。本章内容比较杂，就是补充之前几章没讲到的。

1.关系选择器

之前我们讲到了很多选择器，这里补充一个关系选择器。

1.1后代选择器

后代选择器，顾名思义，就是选择自己的后面的选择器，将要选择的和被选择的放在一起，再使用css，以下是一个样例。

在这里我们可以看见，不管中间隔了多少，只要是ul标签下的li标签，都会被选中。即使后面的li标签是属于ol的但是我们就是不讲理，就选中。

1.2子代选择器

基于上面一种情况，那如果我就要ul下的li标签变红怎么办？那就是用子代选择器>

这里很明显，只选择ul下的li标签，但是ol下的li标签却没有变红。

1.3相邻兄弟选择器

但是再实际引用中，我可能不要全部变红，只要一个变红，但是是同一个标签，怎么办，接下来讲讲相邻兄弟选择器，这个选择器可以选择和要选择的标签相邻的标签

很明显可以看到，nihao1变色，nihao2不变色。值得一提的是，相邻兄弟选择器只会往下寻找而不会往上寻找。

1.4通用兄弟选择器

这个就和上面的有所区别，和后代选择器有点像，选择所有兄弟，使用~

这张图可以明显看到，与p标签同级的h1标签都被选中，但是他不可以选择不同级的标签。

2.盒子模型

我们打开一个网页，按f12，选择计算样式，就会看到盒子模型，下图是一个哔哩哔哩视频的盒子模型。

Css盒子模型有主要四种属性，外边距（margin），边框（border），内边距（padding），实际内容（content）。

2.1内边距属性

Padding属性就是把你的框撑大，是你的内容更好展示。

两图对比发现，padding属性似乎把图撑大了，其实他就是填充周围，使其距离边框50px，就是这个作用。Padding可以写两个值，第一个值代表上下，第二个值代表左右。当然你也可以写一个，就表示距离周围。

但是如果四个方向都不一样要怎么办，可以使用padding不同方向，padding-right，padding-left，padding-top，padding-bottom四个值设置。

2.2border属性

Border边框属性可以对选中的内容制造边框。

第一个是实线的宽度大小，第二个是实线的样式（主要为solid，实线），第三个是线的颜色。当然你也可以分开写

但是可以一起写为什么要分开写呢。

2.3外边距属性

外边距完全透明，但是会间隔开与其他内容

两张图可以清晰的看出margin可以撑开大小，撑开距离。

3.弹性盒子模型

弹性盒子由弹性容器（flex container）和弹性子元素（flex item）组成。

弹性容器通过设置display属性的值为flex将其定义为弹性容器。

弹性容器内包含一个或多个弹性子元素。

那么这个弹性盒子模型就是管理多个盒子的东西

3.1display属性

Display就是启动弹性容器的条件属性。使用display可以使用弹性盒子。

显而易见，display属性使得盒子横向摆放，因为这就是display的默认值。

3.2flex-direction属性

但是我也可以让他横向摆放。Flex-direction属性就可以改变横竖方向。他有四个值row（左对齐同时横向排列），row-reverse（反转横向排列），column（纵向排列），column-reverse（反转纵排列）。这里我就演示一个column其他的大家自行演示。

3.3justify-content属性

这个属性就是改变盒子的位置，值分别为flex-start（上），flex-end（下），flex-center（居中）

3.4align-items

改变盒子的位置，不过一个是上下，一个是左右。，值也是相同的，flex-end（右），flex-start（左），center（中）

3.5flex属性

（这是作用在子元素，切记。）

对于flex属性，可以设置占总体比例大小。可以在父级盒子发生变化时同时变化，不需要改变大小。

我没有改变盒子的大小，但是盒子法生变化，这是因为我设置了占比，使其发生变化。

4.浮动

浮动就是使用float属性定义浮动的方向，任何元素都可以浮动。浮动后使元素脱离文档流，但是浮动只有左右浮动，没有上下浮动。

元素浮动后，脱离文档流，你可以理解为变成两层，出现折叠现象

同时使用浮动可以去除图片的间距

比如这是没有使用float的，可以看到两张图片之间有空隙

使用float之后就没有这个困扰。

当多个div一起时，我们可以使用float使得他们横向摆放。

那么这个到底有什么作用呢

在我们的有序和无序标签，都是纵向摆放，那么我们可以使用float使其横向摆放。

当容器不足以容纳子级容器，那么只能放在第二排。

5.清除浮动

浮动其实是有副作用的，他会造成父级元素塌陷，后续元素也会受到影响。所以必要情况下，我们要清除浮动

5.1clear

使用clear可以直接清除浮动（运用于子级盒子）

这里很明显看到浮动被清除了。

5.2overflow

当遇到父级元素塌陷的情况，使用overflow和clear可以处理。（作用于父级）但是如果没有出现父级塌陷，那么是无法清除浮动的。

6.定位

6.1绝对定位

顾名思义，就是绝对的定位，同时是脱离文档流的，根据自己的定义的位置而变化。

6.2固定定位

固定定位就是把定位固定在一个地方，表面上似乎和绝对定位没什么区别，但是他会被固定在一个地方，不论你怎么滚动界面，固定定位会一直在那个地方。

这里无法给大家演示动画，那么大家一起去试一下，使用height属性把页面撑高，可以使页面滚动。

6.3相对定位

相对定位就是相对父级元素定位

可以看到，使用relative后会跟着父级元素一起移动。

7.css3新特性

7.1border-radius

这个属性可以使得边框变得圆润

它可以设置为一个值，四个角相同，两个值，第一个为左上和右下，第二个为右上和左下，三个，不建议用，四个一个角一个，从上到下，从左到右。

7.2box-shadow

这个属性就是给容器添加阴影。

第一个值是左右，第二个值是上下，第三个是阴影长度，第四个是颜色。

8.动画

之前讲过图片标签img，那么这次来讲讲动画。动画就是从一个变化到第二个。

使用@keyframe的方式创建动画。

其中设置变化的位置，如果只有两个，使用from-to，也可以使用百分比的形式设置。

而在我们的容器中就比较讲究了

首先写入animation关键字，第二个就是名字，即keyframes后面的名字，然后是动画持续时间，就是几秒循环一次，下一个是效果，这里只推荐一个linear匀速。接下来是延时，没写默认是零。最后一个是播放方向，默认是正向。

这样就会实现动画这里不好演示，大家自己上机实验。

大家可以在这个基础上加入其他属性来玩玩，顺便练一下手。

9.结语

那么这一章就到这里结束了。其实因该还有几个内容没讲，但是我看似乎没有很重要（其实也是因为我懒），在最后先给大家道个歉，由于本人课程安排，关于前端的内容会断更一段时间，后续有时间会补上，实在是挤不出时间。

最后的最后，附上学习视频，本文学习自

https://www.bilibili.com/video/BV1oz421q7BB/?spm_id_from=333.337.search-card.all.click

如要学习建议去看原视频。

原文始发于微信公众号（泷羽Sec-林）：网络安全之前端学习（css终章）