CSS3新增的僞類有哪些 與 居中div的多種方法

CSS3新增僞類有那些？

• p:first-of-type:選擇屬於其父元素的首個<p>元素
• p:last-of-type:選擇屬於其父元素的最後<p>元素
• p:only-of-type:屬於父元素的特定類型的惟一子元素
• p:only-child:屬於父元素的惟一子元素的每一個<p>元素
• p:nth-child(2):選擇父元素的第二個子元素
• ::after 在元素以前添加內容
• ::before 在元素以後添加內容
• :enabled 已啓用
• :disabled 控制表單爲禁用狀態，不可點擊
• :checked 單選框或複選框被選中

如何居中div

第一種方式：給div設置一個寬度，而後添加margin:0 auto屬性.

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

第二種方式：讓絕對定位的div居中

div{
  position:absolute;
  width:300px;
  height:300px;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:pink;
}

第三種方式：水平垂直居中一

div{
  position:absolute;
  width:500px;
  height:300px;
  top:50%;
  left:50%;
  margin:0 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-item:center;/*垂直居中*/
  justify-content:center;/*水平居中*/
}
container div{
  width:100px;
  height:100px;
  background-color:pink
}

每日兩道前端面試題20190307
但願睡一覺起來 陽光會出來.