CSS

CSS

• 盒模型和区别

margin + border + padding + content
w3c盒模型的content部分不包含其他部分而IE盒模型的content部分包含了padding和border

• CSS选择器以及选择器优先级

选择器：标签选择器、类选择器、ID选择器、通配符（全局选择器）、后代选择器、继承选择器、伪类选择器（link、visited、active、hover）、字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 、子选择器 (如：div>p)

优先级：!important > 行内样式 > ID > 类、伪类（first-child）、属性（[attr='name']） > 标签名 > 通配符（*） > 继承（字体、颜色） > 浏览器默认属性）

• 知道css有个content属性吗？有什么作用？有什么应用？

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

• 清除浮动的3种方法

1. 在结尾处添加空div标签clear:both
2. 父级div定义height
3. 父级div定义overflow:hidden/auto
4. 使用CSS的:after伪元素

.clearfix::after {
  content: ".";
  clear: both;
  display: block;
  overflow: hidden;
  font-size: 0;
  height: 0;
}

• 垂直居中的3种方法

1. 弹性布局

.box {
    display: flex;
    justify-content:center;
    align-items:Center;
}

2. 子绝父相 + 负边距

span {
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
    text-align: center;
  }

3. 子绝父相 + 0

span {
    width: 50%; 
    height: 50%; 
    background: #000;
    overflow: auto; 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

• CSS3动画

animation: myfirst 5s;
@keyframes myfirst {
    from {
        background: red;
    }
    to { 
        background: yellow;
    }
}

• display、visibility和opacity的区别

{ display: none; /* 不占据空间，无法点击 */ } 
{ visibility: hidden; /* 占据空间，无法点击 */ } 
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ } 

• 绘制三角形

.box {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 200px 100px;
  border-color: transparent transparent #007bff transparent;
}

• 图片定位 background-position: center;