前端面试题收集

CSS

行级元素和块级元素

1. 各自代表

   
   行级元素代表：span、a、img、input、iframe
   
   块级元素代表：div、p、h1、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}