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

如各人所见，本日的文章就是css的末了一篇文章。那么话不多说，我们开始吧。本章内容比力杂，就是增补之前几章没讲到的。

• 关系选择器
  

之前我们讲到了很多选择器，这里增补一个关系选择器。
1.1子女选择器
子女选择器，顾名思义，就是选择本身的背面的选择器，将要选择的和被选择的放在一起，再使用css，以下是一个样例。

在这里我们可以瞥见，不管中央隔了多少，只要是ul标签下的li标签，都会被选中。纵然背面的li标签是属于ol的但是我们就是不讲理，就选中。
1.2子代选择器
基于上面一种情况，那假如我就要ul下的li标签变红怎么办？那就是用子代选择器>

这里很显着，只选择ul下的li标签，但是ol下的li标签却没有变红。
1.3相邻兄弟选择器
但是再现实引用中，我大概不要全部变红，只要一个变红，但是是同一个标签，怎么办，接下来讲讲相邻兄弟选择器，这个选择器可以选择和要选择的标签相邻的标签

很显着可以看到，nihao1变色，nihao2稳固色。值得一提的是，相邻兄弟选择器只会往下探求而不会往上探求。
1.4通用兄弟选择器
这个就和上面的有所区别，和子女选择器有点像，选择全部兄弟，使用~

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

• 盒子模子
  

我们打开一个网页，按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可以撑开巨细，撑开间隔。

• 弹性盒子模子
  

弹性盒子由弹性容器（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属性，可以设置占总体比例巨细。可以在父级盒子发生变革时同时变革，不必要改变巨细。

我没有改变盒子的巨细，但是盒子法生变革，这是由于我设置了占比，使其发生变革。

• 浮动
  

浮动就是使用float属性界说浮动的方向，任何元素都可以浮动。浮动后使元素脱离文档流，但是浮动只有左右浮动，没有上下浮动。
元素浮动后，脱离文档流，你可以明白为变成两层，出现折叠征象

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

好比这是没有使用float的，可以看到两张图片之间有清闲

使用float之后就没有这个困扰。
当多个div一起时，我们可以使用float使得他们横向摆放。

那么这个到底有什么作用呢
在我们的有序和无序标签，都是纵向摆放，那么我们可以使用float使其横向摆放。

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

• 扫除浮动
  

浮动着实是有副作用的，他会造成父级元素塌陷，后续元素也会受到影响。以是须要情况下，我们要扫除浮动
5.1clear
使用clear可以直接扫除浮动（运用于子级盒子）

这里很显着看到浮动被扫除了。
5.2overflow
当碰到父级元素塌陷的情况，使用overflow和clear可以处理惩罚。（作用于父级）但是假如没有出现父级塌陷，那么是无法扫除浮动的。

• 定位
  

6.1绝对定位
顾名思义，就是绝对的定位，同时是脱离文档流的，根据本身的界说的位置而变革。

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

这里无法给各人演示动画，那么各人一起去试一下，使用height属性把页面撑高，可以使页面滚动。
6.3相对定位
相对定位就是相对父级元素定位

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

• css3新特性
  

7.1border-radius
这个属性可以使得边框变得圆润

它可以设置为一个值，四个角雷同，两个值，第一个为左上和右下，第二个为右上和左下，三个，不发起用，四个一个角一个，从上到下，从左到右。
7.2box-shadow
这个属性就是给容器添加阴影。

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

• 动画
  

之前讲过图片标签img，那么这次来讲讲动画。动画就是从一个变革到第二个。
使用@keyframe的方式创建动画。
此中设置变革的位置，假如只有两个，使用from-to，也可以使用百分比的情势设置。
而在我们的容器中就比力讲求了
起首写入animation关键字，第二个就是名字，即keyframes背面的名字，然后是动画一连时间，就是几秒循环一次，下一个是效果，这里只保举一个linear匀速。接下来是延时，没写默认是零。末了一个是播放方向，默认是正向。

如许就会实现动画这里欠好演示，各人本身上机实行。
各人可以在这个底子上加入其他属性来玩玩，趁便练一动手。

• 结语
  

那么这一章就到这里竣事了。着实因该尚有几个内容没讲，但是我看似乎没有很告急（着实也是由于我懒），在末了先给各人性个歉，由于本人课程安排，关于前端的内容会断更一段时间，后续偶然间会补上，着实是挤不出时间。
末了的末了，附上学习视频，本文学习自
【HTML+CSS+JS+Vue】比大学课程还具体的Web前端教程，整整180集，学完即可兼职就业！附学习文档PDF，随时都能学_前端开辟_WEB入门_哔哩哔哩_bilibili
如要学习发起去看原视频。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。