前端面试拾遗——CSS选择器、Flex布局、position

前言

  在某公司的前端面试中，被问到了关于CSS选择器，flex布局以及position相关的问题，在这篇文章中整理一下相关知识点。

CSS选择器

 关于CSS选择器跟属性的所有详细信息都可以在 MDN CSS参考 中获取，CSS选择器的主要分类有

• 基本选择器
  
  • 元素选择器
  • 类选择器
  • ID选择器
  • 通配选择器
  • 属性选择器
• 组合选择器
  
  • 相邻兄弟选择器
  • 普通兄弟选择器
  • 子选择器
  • 后代选择器
• 伪元素
• 标准伪类

具体就参考MDN，这里就详细说明一下面试官问到的属性选择器。因为在做相关项目的时候没有意识使用属性选择器所以对属性选择器的接触比较少，所以直接跟面试官说不是很熟悉，面试官就没有接着问下去了。

属性选择器的主要语法如下所示

[attr]
表示带有以 attr 命名的属性的元素。

[attr=value]
表示带有以 attr 命名的，且值为”value”的属性的元素。

[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为”value”。

[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（”-“为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。

[attr^=value]
表示带有以 attr 命名的，且值是以”value”开头的属性的元素。

[attr$=value]
表示带有以 attr 命名的，且值是以”value”结尾的属性的元素。

[attr*=value]
表示带有以 attr 命名的，且值包含有”value”的属性的元素。

然后我觉得面试可能会问到的还有，相邻兄弟选择器跟普通兄弟选择器有什么区别？子选择器跟后代选择器有什么区别？
这两个的区别都是比较相似，相邻兄弟选择器顾名思义就是只会选择相邻的兄弟，而普通兄弟选择器则会在所有兄弟之间选择。子选择器只会在子元素中选择而后代选择器则会在所有后代中选择，包括子代的子代。

下面的代码可以进行相关的测试

<!--兄弟选择器测试--><div id="b1">brother 1</div><div id="b2">brother 2</div><div id="b3">brother 3</div><div id="b4">brother 4</div>

/*相邻兄弟选择器测试*/#b1 + #b2{    color:red;}#b1 + #b4{    color:red;}

应用这个样式的结果如图所示

/*普通兄弟选择器*/#b1 ~ #b2{    color:red;}#b1 ~ #b4{    color:red;}

应用这个样式后的结果如图所示

<!--子代/后代选择器测试--><ul id="parent">    <li>        <ul>            <li>grandson - 1</li>            <li>grandson - 2</li>        </ul>    </li>    <li>son -1</li>    <li>son -2</li></ul>

/*子代选择器测试*/ul{    color: black;}#parent > li{    color: red;}

应用该样式后得到结果如图所示

/*后代选择器测试*/ul{    color: black;}#parent > li{    color: red;}

应用该样式后得到的结果如图所示

flex布局

关于弹性盒子模型的详细信息可以查阅 MDN使用CSS弹性盒子

面试官问的一个问题是ABC三个页面元素，怎样调换AC元素的位置使其变成CBA。我一时没有答出来，到最后问了一下面试官答案，他列举了很多方法，包括使用flex，JQuery和Vue。因为一直没有了解过flex这个新的布局特性，所以就在这里总结一下flex的用法。

首先就是调换顺序的问题

 <!--flex测试--><div class="flex">    <div class="content">第一个元素</div>    <div class="content">第二个元素</div>    <div class="content">第三个元素</div></div>

 /*flex调换元素测试*/.flex > div:nth-child(1){    background: red;    order: 2;}.flex > div:nth-child(2){    background: lightblue;    order: 1;}.flex > div:nth-child(3){    background: green;    order: 3;}.flex{    display: flex;    flex-direction: row;    color: white;}.flex > div{    flex:0 1 auto;}

应用上面的样式得到的结果如下图所示

可以看到 <div>第一个元素</div> 在 <div>第二个元素</div> 前，使用了flex中的oder属性之后可以很轻易的将其调换顺序。

/*flex水平居中测试*/.flex > div:nth-child(1){    background: red;    order: 2;}.flex > div:nth-child(2){    background: lightblue;    order: 1;}.flex > div:nth-child(3){    background: green;    order: 3;}.flex{    display: flex;    flex-direction: row;    justify-content: center;    color: white;    background: #1BD1D1;    height: 100px;    margin: 0;    padding: 0;}.flex > div{    display: flex;    flex: 0 1 auto;    height: 50px;    width: 80px;    justify-content: center;}

应用上面的样式可以得到水平居中的效果，如下所示

水平居中只需要将需要居中的flex容器的justify-content属性设为center即可

/*flex垂直居中测试*/.flex > div:nth-child(1){    background: red;    order: 2;}.flex > div:nth-child(2){    background: lightblue;    order: 1;}.flex > div:nth-child(3){    background: green;    order: 3;}.flex{    display: flex;    flex-direction: row;    justify-content: center;    align-items: center;    color: white;    background: #1BD1D1;    height: 100px;    margin: 0;    padding: 0;}.flex > div{    display: flex;    flex: 0 1 auto;    height: 50px;    width: 80px;    justify-content: center;    align-items: center}

应用上面的样式可以得到的效果如下图所示

控制水平居中的属性是 justify-content 而需要控制垂直居中的时候只需要将 align-items 设置为 center 即可。想当初，需要做垂直居中那叫一个烦啊，现在有了flex布局，做垂直居中只是一个属性的问题。

position

 positon有关的问题主要是问的是有哪几种定位方式一级各种定位方式的参考。position一共有五种定位方式分别是static,relative,absolute,fixed,sticky其中sticky是实验方式，不建议在生产环境中使用，各种定位方式的参考如下

static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。

absolute
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于根级容器定位。

fixed
固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。

sticky
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

总结

 以上总结的点就是我在这次面试中觉得答得不太好或者是认识不够全面的点。希望我能对CSS的相关知识的认识更加全面。