1.link 和@import 的区别

link 是xhtml 标签而@import 完全是css 提供的一种方式，link 里面还可以设置很多属性，但是@import 不能设置
加载顺序，当用户在浏览页面的时候，link的话，样式会同时被加载，而@import只有页面全部被加载完成之后才能加载样式，所以有时网慢，会没有样式。
兼容性问题，@import 有兼容性问题，低版本浏览器不支持，但是link 不存在这个问题

2.让一个元素消失有几种办法？

display：none
visibility：hidden；通过改变可见性
opacity：0 ；通过改变透明度，取值范围：0~1
定位的元素通过层级来控制（z-index）
可以通过给元素设置margin负值调到屏幕一侧
宽高等于0

3.display和visibility、opacity都可以让元素消失，有啥区别？

display：none 是彻底的消失，不占位置，但是visibility：hidden;和opacity:0;虽然看不见了，但是位置还在

4.margin值穿透：有一个大盒子里面套了一个小盒子，想要让小盒子离大盒子上部有一定的距离，给小盒子设置了一个margin-top，造成了小盒子和大盒子一起往下掉

解决方法一：给大盒子设置一个padding-top，同时删除小盒子里的margin-top设置
解决方法二：给大盒子设置一个border-top
解决办法三：给大盒子设置一个overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 面试题margin值穿透：有一个大盒子里面套了一个小盒子，想要让小盒子离大盒子上部有一定的距离，给小盒子设置了一个margin-top，造成了小盒子和大盒子一起往下掉 
       解决的第一种办法：给大盒子设置一个padding-top，同时删除小盒子里的margin-top设置
            第二个办法：给大盒子设置一个border-top
            第三个办法：给大盒子设置一个overflow:hidden;*/
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 300px;
            height: 300px;
            background-color: chartreuse;
            /* 第二种解决方法：（transparent:透明线）
            border-top: 1px solid transparent; */
            /* 第三种解决办法：
            overflow: hidden; */
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: crimson;
            margin-top: 20px;
        }
        /* 第一种解决办法：
        .main {
            padding-top: 20px;
        } */
    </style>
</head>
<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>
</html>

5.margin值合并

margin值合并：有两个兄弟元素：box1、box2、给box1设置一个向下的距离 margin-bottom :100px; ，给box2设置一个向上的距离margin-top: 50px ;，两个盒子的距离并不是margin之和150px，而是取最大的margin值100px

<style>
        *{
            margin:0;padding:0;
        }
      div{
          width:200px;
          height:200px;
      }
      .box1{
          background:green;
          margin-bottom:30px;
      }
      .box2{
          background:gold;
          margin-top:100px;
      }
</style>
<div class="box1"></div>
<div class="box2"></div>

6.解决浮动元素造成父级的“盒子塌陷”

没高度，就给浮动元素的父级设置height
给浮动元素的父级设置：overflow：hidden；
给浮动元素的父级盒子的末尾添加一个块级元素，然后给这个块级元素设置样式：clear：both
谁浮动，就给谁的父级增加一个类名：clearfix，前提把下面的代码放到样式里

.clearfix:after{
content:"";
font-size:0;
display:block;
height:0;
visibility: hidden;
clear: both;
}
.clearfix{
*zoom:1;
}

7.用浮动制作一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            border: 20px solid coral;
            border-color: transparent transparent transparent red;
            width: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

8.如何让一个元素在整个屏幕或者是一个盒子中水平垂直居中？

固定定位或者绝对定位：

left：50%；top：50%；
margin-left：负的盒子宽的一半；margin-top:负的盒子高度的一半;

<style>
    .box{
        width:200px;
        height:200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>

css常见面试题