CSS高频面试题（一）

面试题

发布: 2020-09-01

字数: 554

阅读时长: 2 分

1、水平垂直居中布局

1. 已知元素宽高: 绝对定位 + margin: auto

 div{
   width: 500px;
   height: 500px;
   background: green;
   
   position:absolute;
   left:0;
   top: 0;
   bottom: 0;
   right: 0;
   margin: auto;
}

2. 已知元素宽高: 绝对定位 + margin: 负值

div{
  width: 500px;
  height: 500px;
  background: green;

  position:absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
}

3. absolute + transform

div{
  width: 500px;
  height: 500px;
  background: green;
  		        
  position: absolute;
  left: 50%;    /* 定位父级的50% */
  top: 50%;
  transform: translate(-50%,-50%); /*自己的50% */
}

4. flex 弹性布局

display:flex;
justify-content:center;  //子元素水平居中
align-items:center;      //子元素垂直居中

2、用css3实现0.5px的线条

div{
  width: 500px;
  height: 500px;
  background-color: #000000;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

3、让Chrome支持小于12px 的文字

.span{
  font-size: 12px;
  display: inline-block;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

4、CSS画一个三角形，原理是什么？

1.首先画一个正方形

.box {
    width: 100px;
    height: 100px;
    border: 5px solid;
    border-color: green yellow red blue;
}

将border设置100px，发现border渲染并不是正方形, 而是梯形

.box {
    width: 100px;
    height: 100px;
    border: 100px solid;
    border-color: green yellow red blue;
}

白色区域则为width、height，这时候把白色区域部分宽高逐渐变小，最终变为0

.box {
    width: 0px;
    height: 0px;
    border: 100px solid;
    border-color: green yellow red blue;
}

设置透明, 隐藏其中三个三角形

.box {
    width: 0px;
    height: 0px;
    border: 100px solid;
    border-color: transparent transparent transparent blue;
}

5、对盒子模型的理解？

1、是什么

一个盒子由四个部分组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)

有两种， IE 盒子模型、W3C 盒子模型

区别： IE 的 content部分把 border 和 padding计算进去

2、区别

IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内边距（padding）和边框（border），称为怪异盒模型(IE盒模型)
标准(W3C)盒模型：盒子总宽度 = width + padding + border + margin
怪异(IE)盒模型：盒子总宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高