css常见面试题

CSS复习

CSS的盒子模型

css模型包括标准盒子模型和IE盒子模型

• 标准盒子模型：margin,border,padding,content
• IE盒子模型：margin,content(border+padding+content)
  通过css如何转化盒子模型：
• box-sizing:content-box
• box-sizing:border-box

line-height和height的区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大(行数*行高度).
height是一个死值,就是这个盒子的高度。

css选择符有哪些？哪些属性可以继承？

css选择符：
通配(*)

id选择器(#)

类选择器(.)

标签选择器(div p,h1);

相邻选择器(+)

后代选择器(ul li)

子元素选择器(>)

属性选择器()

伪类选择器：nth-child

css属性哪些可以实现继承

文字系列:font-size,color,line-height,text-align…

不可以继承

border，padding，margin

css优先级算法如何计算

优先级比较：!important->内联样式->id->class->标签->通配
css权重计算：
第一：内联样式 style 权重值为1000

第二：id选择器 权重：100

第三：类选择器 权重：10

第四：标签&伪元素选择器 权重：1

第五：通配，>,+ 权重:0

用css画一个三角形

用边框画就行啦
核心代码

div {
        width:0;
        height: 0;
        border-left: 100px solid #ccc;
        border-right: 100px solid transparent;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        margin-left: 20px;
    } 

一个盒子不给宽度和高度如何水平垂直居中

方式一：

  <div class="container">
       <div class="main">
       main
       </div>
    </div>      

.container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        border: 5px solid #ccc;
}

这里核心代码是display:flex和justify-content: center;
align-items: center;

方式二

  .container {
        position: relative;
        width: 300px;
        height: 300px;
        border: 5px solid #ccc;
    }

   .main {
        position: absolute;
        left: 50%;
        top: 50%;
        background: skyblue;
        transform: translate(-50%,-50%);
    }

display有哪些值，

display:none 某元素不会被显示出来
display：block 把元素转换为块级元素
dispaly：inline 把元素转化为内联元素
inline-block 把**元素转化为行内块元素

对BFC规范

BFC就是页面上一个隔离的独立容器，容器里的子元素不会影响到外面的元素

• 如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外部元素
• 如何触发BFC呢？float的值不是none overflow的值非visiblie display的值是inline-block,table-cell…
• position:absolute,fixed

清除浮动有哪些方式

1.触发BFC 父盒子加overflow：hidden可以去除子盒子的浮动现象
2.多创建一个盒子:添加样式：clear：both
3.最常见的是使用after方式：

 ul:after{
         content:"";
         display: block;
         width: 0;
         height: 0;
         clear: both;
}

pisition有哪些值？分别是根据什么定位的

static[默认] 没有定位
fixed：固定定位，相当于浏览器窗口进行定位
realtive：相当于自身定位，脱离文档流
absolute：子绝父相,脱离文档流

双飞翼css代码实现

<div class="container">
       <div class="c">中</div>
       <div class="l">左</div>
       <div class="r">右</div>

</div>
  *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100vw;
            height: 100vh;
        }
        .l{ 
            float: left;
            width: 200px;
            height: 100%;
            background: skyblue;
            margin-left: -100%;
        }
        .c{
            float: left;
            width: 100%;
            height: 100%;
            background: pink;
        }
        .r{
            float: left;
            width: 200px;
            height: 100%;
            background: red;
            margin-left: -200px
        }

什么是css reset

是一个css文件，用来重置css样式

css sprite是什么，有什么优缺点

• 是把多个小图标合并成一个大图片
• 提高http性能，但是维护起来比较差

css弹性布局——flex

任何一个布局都可以指定为flex布局,
当我们为父盒子设为flex布局以后，子元素的float,clear等属性将失效。
div就是flex布局,span就是子容器flex项目,子容器可以横向排列也可以纵向排列
总结原理就是：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式.
六个属性

• flex-direction:设置主轴方向
• justfy-content:设置主轴上子元素的排列方式
  • flex-start:默认值从头部开始，如果主轴是x轴，从左往右
  • flex-end:从尾部开始排列
  • center：在主轴居中对齐
  • space-around 平分剩余空间
  • space-between 先两边贴边，再平分剩余空间
• flex-wraps