面试篇 - CSS

CSS3有哪些新能特性？

新增特性：

• 圆角（border-radius）
• 阴影（box-shadow）
• 文字特效（text-shadow）
• 线性渐变（gradint）
• 变形（transform）

增加了css选择器、媒体查询、多栏布局

 

css选择器的优先级顺序？

内联样式 > ID选择器 > 类选择器 > 标签选择器

 

通过CSS有哪些方式可以实现隐藏页面上的元素？

方式	说明
opactiy: 0
visibility: hidden
overflow: hidden
display: none
transform: scale(0,0)
z-index: -9999
left: -9999

 

px、em、rem之间有什么区别？

 

在CSS中有哪些定位方式？position的属性？

static：默认值，没有定位，元素正常出现在文档流中

relative：相对定位，相对于其在普通流中的位置进行定位

absolute：绝对定位，相对于最近的非static的祖先元素进行定位

fixed：固定定位，相对于浏览器窗口进行定位

sticky：粘性定位，像relative和fixed的结合，它的父元素在视口区域，当前元素就以fixed的方式进行定位，否则就以relative进行定位

 

水平垂直居中的方法？
未知宽高：position + transform

div{
  position:absolute;
  left:50%;
  top:50%;
  tansform:translate(-50%, -50%);       
}

已知宽高：position + margin

div{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  argin-left: -100px;
  margin-top: -100px;
}

绝对定位方法：top left bottom right为0

div{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0;
}

flex布局方法

div{
    display: flex;
    justify-content: center;
    align-items: center;
}

转成行级块，给父盒子设置text-align：center

.father {
    text-align: center;
}

.child {
    width: 100px;
    height: 100px;
    display: inline-block;
}

 

CSS属性content有什么作用？

css的content属性专门应用在after / before伪元素上，用于插入生成内容，可以配合自定义字体显示特殊符合

 

transition 和 margin 的百分比是根据什么计算的？

transition是根据自身宽度，margin是根据参照物

 

rgba() 和 opacity 有什么不同？

• opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色
• 设置rgba的元素，子元素不会继承透明效果