前端css 面试工作常用知识点

1. css选择器优先级最高到最低顺序为：

1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.子选择器（ul < li）
5.后代选择器（li a）
6.伪类选择（a:hover,li:nth-child）
最后注意：
！important优先级最高，继承得来的属性优先级最低。

2. 子选择器

ul > li  >号 子选择器 只是选择ul 直接的下级，不会往后选择
ul li   中间空格的选择器会一直往后选择

3. 兄弟选择器

div~p  div的兄弟元素 p 包含了 div 前面的和后面的
div+p  只选择紧挨div 后面的一个元素p

4. css 盒子模型

盒模型由：外边距margin、边框border、内边距padding、内容content四个部分组成

标准盒模型大小=border+padding+content

怪异盒模型大小=content

转怪异盒模型：box-sizing:border-box;

转标准盒模型：box-sizing:content-box;

5. 弹性盒子

• flex 系列

1. flex-direction 对齐方向

• 水平对齐： flex-direction: row, row-reverse
• 垂直对齐: flex-direction: column, column-reverse

3. flex-wrap 换行 flex-wrap: nowrap, wrap
4. flex-flow 就是简化写法： flex-direction + flex-wrap = flex-flow
5. flex模型说明

• 容器的属性

6. justify-contnet x轴对齐方式

• flex-start 左对齐
• flex-end 右对齐
• center 居中
• space-between 等间距对齐，两边不留空间
• space-around 等间距对齐，两边留空间，两边的空间小
• space-evenly 等间距对齐，两边的空间和中间一样宽

8. align-content Y轴对齐方式

• flex-start 顶部对齐
• flex-end 底部对齐
• center 居中对齐

总结：
flex-start：(默认值)起始对齐——左对齐，顶部对齐；
flex-end：结束对齐——右对齐，底部对齐；
center：居中；
space-between：间距相等，两边不留白；
space-around：间距相等，两边留白=间距的一半；
space-evenly：间距相等，两边留白和间距一样；

10. Y轴对齐的另外一种 align-items 子元素高度不同时

• flex-start 每行按照 该行元素顶部对齐
• flex-end 每行按照 该行元素底部对齐
• center 每行按照 改行元素居中对齐
• baseline 每行按照 该行元素顶部对齐

12. align-content 和 align-items 的区别

• align-content：只能用于父级设有高度的情况下，因为涉及到间距和两边的留白情况，所以当父级无高度的话，这个就没有办法实现，也就是无效设置；

• align-items：可以用于父级无高度时，align-items的对齐会将父级盒子撑起来，而且这个没有间距设置，所以上图展示中不存在溢出的情况；

• 对于一些不常用的补充

14. flex项排序--order 值越大，排序越靠后
15. flex放大 flex-grow

• flex-grow：将剩下的间距等比例的用被设置的子元素填满，也就是缩放子元素来填满间隙。

17. flex缩小 flex-shrnk

• 默认时 1 ，主轴空间不够的时候，将子元素缩小
• 设置为 0 ， 元素不缩小

19. flex-basis 主轴空间
20. flex属性 = flex-grow + flex-shrink + flex-basis

6. 水平垂直居中一个元素

弹性盒子

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

定位

.box{
    position: relative;
}
.box .sub{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // margin-left: 负宽度的一半
    // margin-top: 负高度的一般
}

7. 如何实现左边固定宽，右边自适应布局

圣杯布局

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
#container {
  padding-left: 200px; 
  padding-right: 150px;
}
#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}
#right {
  width: 150px; 
  margin-right: -150px; 
}

双飞翼布局

<div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  #container {
    width: 100%;
  }
​
.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}

等高布局（假等高） 互补的内外边距

.parent{
  overflow: hidden;
}
.left, .right{
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}

等高布局 弹性盒子

.parent{
  display: flex;
}
.child{
  flex: 1;
}

calc

<div id="left" class="column"></div>
  <div id="center" class="column"></div>
  <div id="right" class="column"></div>
  .column{
    float: left;
  }
  #left{
    width: 100px;
  }
  #right{
    width: 200px;
  }
  #center{
    width: calc(100% - 100px - 200px);
  }

浮动

<div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="center"></div>
  #left{
    float: left;
    width: 100px;
  }
  #right{
    float: right;
    width: 200px;
  }
  #center{
    margin-left: 100px;
    margin-right: 200px;
  }

8. 强制连续字母和数字换行

word-wrap: break-word

---

9. 强制不换行

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;