CSS3面试题2020

·标准盒模型 border, padding, content, margin
·IE盒模型 border, padding, content
·通过 box-sizing属性改变元素的盒模型

·id选择器（#myId）
·类选择器（.myClassName）
·标签选择器（div, h1, p）
·后代选择器（h1 p）
·相邻后代选择器（子）选择器（ul > li）
·兄弟选择器（li~a）
·相邻兄弟选择器（li+a）
·属性选择器（a[rel="external"]）
·伪类选择器（a:hover, li:nth-child）
·伪元素选择器（::before, ::after）
·通配符选择器（*）

·在 CSS3 中 : 表示伪类， :: 表示伪元素
·想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after

·每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值
来作为自己的值。
·一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。
·文本相关的属性，color和text-align等。
·表格的一些布局属性、列表属性如list-style等。
·还有光标属性cursor、元素可见性visibility。
·当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

div{
  width: 200px;
  margin: 0 auto;
}

.container{
  background: rgba(0, 0, 0, .5);
  text-align: center:
  font-size: 0;
}
.box{
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

div{
  positionn: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 方便看效果 */
}

/* 确定容器的宽高，宽500高300 */
div{
  position: absolute;
  width:500px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px;
  background-color: pink;
}

/* 未知容器宽高，利用 transform 属性 */
div{
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}

/* 利用 flex 布局实际使用时应考虑兼容性 */
.container{
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.container div{
  width: 100px;
  height: 100px;
  background-color: pink;
}

·缩放，定位，倾斜，动画，多背景

/* 
  采用的是相邻边框链接处的均分原理
  将元素的宽高设为0，只设置 border ,
  将任意三条边隐藏掉（颜色设为 transparent ）,剩下的就是一个三角形
 */
#demo{
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

·然后用 float 或者 inline 使其不换行

解决：改变css 属性的排列顺序L-V-H-A

·width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间

一般一些网站的小图标可以使用base64图片引入

.clearfix::after{
  /* 伪元素是行内元素，正常浏览器清除浮动方法 */
  content: "";
  dispaly: block;
  height: 0;
  clear: both;
  visibility: hiden;
}
.clearfix{
  /* *ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 */
  *zoom: 1; 
}

.clearfix::after, .clearfix::before{
  content: "";
  display: table;
}
.clearfix::after{
  clear: both;
}
.clearfix{
  *zoom: 1;
}