前端面試題收集

CSS

行級元素和塊級元素

1. 各自表明

   行級元素表明：span、a、img、input、iframe
   
   塊級元素表明：div、p、h一、ul、li

2. 異同

   行級元素中 width/height 屬性無效；padding 和 margin 上下無效

盒子模型

1. 盒子模型有兩種：W3C 和 IE 盒子模型

   W3C 盒子模型：width = content
   
   IE 盒子模型：width = content + padding + border

2. 我的以爲 IE 盒子比較合理，和平常生活中的盒子相似

3. CSS3中彷佛發現了這個問題，進行補充：box-sizing: content-box / border-box

   content-box：上文提到的 W3C 盒子
   
   border-box：上文提到的 IE 盒子

元素定位

1. 四種屬性：static/absolute/fixed/relative

2. 參考對象

   absolute：相對於上一個非 static 的祖先節點
   
   fixed：相對於 window 窗口
   
   relative：相對於默認佈局的位置
   
   static：沒有（top、left、right、bottom、z-index 無效）

3. absolute 會脫離文檔流，會佔據祖先的 padding 空間

CSS 優先級

1. !important > style > id > class > 標籤

居中

1. 水平居中

   行級：父級設置 text-align: center;
   
   塊級：自身設置 margin: 0 auto;
   
   特殊的塊級：自身有absolute，追加設置 left&right: 0

2. 垂直居中

   行級：自身設置 line-height和 height同樣
   
   塊級：若是父級高度不固定，把父級 padding-top/bottom 設置成同樣
   
        若是父級高度固定，把父級設置line-height和 height同樣，
        而且自身設置 vertical-align: middle; display: inline-block

display的做用

1. 默認

   block：div、p、ul、ol、form
   
   inline：span、a、img、input
   
   list-item：li

2. 彈性盒子須要在父級上設置 display: flex

清浮動

1. 添加div到浮動兄弟節點的位置上

   div.clear {height: 0;font-size: 0;clear: both: overflow:hidden}

2. 使用
   

3. 使用僞類，父元素追加class,.clear

   .clear {zoom: 1}
      .clear:after {display: block;clear: both;content: "";visibility: hidden;height: 0}