面試篇 - 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的元素，子元素不會繼承透明效果