1 css有哪些选择器？

常用的CSS选择器 ID选择器、类选择器、标签选择器、属性选择器、伪类选择器、后代选择器

权重划分在同一层级下

!important > 内联样式 > ID选择器 > 类选择器 > （标签选择器、伪类选择器、属性选择器）

不同层级下

正常来说权重值越高的优先级越高，但是一直以来没有具体的权重值划分，所以目前大多数开发中层级越深的优先级越高

2 浏览器盒模型你如何理解？

CSS中盒模型分为两种：W3C标准和IE标准盒子模型.

1.W3C标准盒子模型:padding,border所占的空间不在width,height范围中，width=content的宽。

2.IE盒模型:width包括content尺寸＋padding+border

3 怎么画一个三角形(考察最基本的css画图形技能)

html

 <div class="triangle">
 </div>

css

.triangle{
  width:0px;
  height:0px;
/*    三角形底边上的高为20   border-right:20px solid orange; (三角形指向左边) */ 
  border-left:20px solid orange; 
/*    //三角形的底边长度为160 */
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent; 
}

效果(底边在左侧)

4 怎么画一个六边形。(考察伪元素选择器的用法)

基本思路是画一个矩形然后使用伪元素添加两个三角形内容。代码如下

html

 <div class="hexagon">
 </div>

css

 .hexagon{
  width: 160px;
  height: 40px;
  background-color: blue;
  margin: 0 auto;
  position: relative;
}

.hexagon::before {
  width: 0;
  height: 0;
  //伪元素选择器必须要和content属性配合使用
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  border-bottom: 20px solid blue;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
}

.hexagon::after {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  border-top: 20px solid blue;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
}

5 div绝对居中的方法有哪几种。

我总结过有三种方式，分别是flex盒子，绝对定位+负margin，相对定位+transform:translateY(-50%)

1 使用display:flex;使用flex，不需要知道盒子的高度

.center{
display:flex;
justify:center;
item-aligns:center;
width: 500px;
height: 500px;
background-color: blue;
}

2 使用绝对定位+负margin，这种方法需要知道子元素的高度

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        .center {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="center">
            <span style="line-height: 100px">hello world</span>
        </div>
    </div>
</body>
</html>

3 使用相对定位+transform，这种情况不需要知道子元素的高度

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            height: 500px;
            width: 500px;
            background-color: blue;
        }
        .center {
            position: relative;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: red;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="center">hello</div>
    </div>
</body>
</html>

6 flex的三个值分别代表什么？

flex :flex-group flex-shirk flex-basis

①.flex-group 剩余空间索取

默认值为0，不索取

eg:父元素400，子元素A为100px，B为200px.则剩余空间为100

此时A的flex-group为1，B为2，

则A=100px+1001/3; B=200px+1002/3

②.flex-shrik 子元素总宽度大于复制元素如何缩小

父400px,A 200px B 300px

AB总宽度超出父元素100px;

如果A不减少，则flex-shink ：0,B减少；

②,flex-basis

该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。

7 flex的布局怎么理解

参考阮一峰FLEX布局教程。 www.ruanyifeng.com/blog/2015/0…

1.flex布局是什么？

2.flex布局的基本概念？

3.容器的属性？

6个容器属性: flex-direction; flex-wrap; flex-flow; justify-content; align-items; align-content;

4.项目的属性？

6个项目属性: order; flex-grow; flex-shrink; flex-basis; flex; align-self;

面试题总结--css