HTML、CSS面试

1. 盒模型

包括：实际内容(content)、填充(padding)、边框(border)

• padding就是内容到border的距离
• margin是border到父元素border的距离

1. border-box
   

   border-box.png

   border-box: 实际宽度 == width == 100 == 内容区 + padding + border

2. content-box
   

   content-box.png

   content-box: 实际宽度 == width + padding + border

2. 如何理解HTML语义化

1. 举例
   比如说，标题就用h1~h6，段落就用p，边栏用aside，主要内容用main
2. 用处
   在没有CSS的情况下，页面也能呈现出很好地内容、代码结构

3. meta:viewport

背下来

控制页面在移动端不会缩小显示

4. 复习canvas项目

自己再做一遍canvas

5. css Reset和normalize.css区别

• css reset的想法是清除所有默认样式
• 后来normalize.css取代了css reset，normalize自己制定相应的默认样式，用了normalize.css之后，所有浏览器上默认样式都基本一致

6. css居中

1. 垂直居中

1. 若父元素没有写height，则直接在父元素写

   padding: 10px 0;
   

   子元素就可以居中，所以尽量避免父亲高度确定

2. 让一个元素在父级元素中绝对居中
   方法一：
   给父级元素加:

   position:relative;   //若父级元素是body可以不用加
   

   再给自己加：

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

   方法二：（若不兼容IE，工作中只要用这一种方法即可，最简单，Chrome，移动端都可以用）
   给父元素加：

   display: flex;               //让它变成一个弹性盒
   justify-content: center;     //水平居中
   align-items: center;         //垂直居中
   

3. table自带居中（兼容IE）

   
   
   
   
     
   
       
   
         文字
       
     
   
   
   
   

   文字会居中

4. 用div假扮table（兼容IE）

   
   
   
   
       
   
         
   
           文字
         
       
     
   
   
   

5. 用100%高度的before和after

   .parent{
     border: 3px solid red;
     height: 600px;
     text-align: center;
   }
   
   .child{
     border: 3px solid black;
     display: inline-block;
     width: 300px;
     vertical-align: middle;
   }
   
   .parent:before{
     content:'';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
   }
   .parent:after{
     content:'';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
   }
   

6. 绝对定位加上margin-top: -自身height的50%

   
   
   
   
     
   
       文字
     
   
   
   
   

7. 让一个背景图居中，并且让它自适应屏幕

   background: url("wallhaven-w-min.jpg") no-repeat center center ;
   background-size: cover;
   

2. 水平居中

1. 块级元素水平居中

   margin-left:auto;
   margin-right:auto;
   

2. 内联元素水平居中，给它们的父元素加上

   text-align:center;
   

   若不是内联元素想让它居中，可加display:inline-block，加了之后一般还要加下面这句，不然可能会有bug（下面可能会空出一行）

   vertical-align: top;
   

3. 让导航栏横过来，并在同一行里均匀分布
   给ul加css

   ul{
     display:flex;  
     justyfy-content:space-between;
   }
   

7. 选择器的优先级

1. id比class优先级高
2. 同样优先级，写在后面的会覆盖前面
3. a:hover和a的优先级一样，所以加hover样式的时候，hover要写在下面。不然会被覆盖
4. color: red !important 优先级最高

8. BFC

块格式化上下文（Block Formatting Context）

1. 功能一：父元素包住子元素

1. 爸爸包不住儿子的情况

• 儿子是浮动元素

  

    
2
  

只要父亲是以下七种情况，就可以包住子元素

• 浮动元素（float）
• 绝对定位（absolute）
• 内联块（display: inline-block）
• 表格（display: table-cell 或 table-caption）
• overflow不为visible
• display: flow-root（css新规则，为bfc而生）

2. 功能二：让浮动的兄弟之间划清界限

用float做布局，如果不加bfc，兄弟会重合，两个都变成bfc才行

  
1
  
2

不过这个功能可以用flex布局实现，不需要bfc了

  
1
  
2

3. 功能三

  
image
  
信息信息信息信息信息信息信息信asdasdasdasdasdasd息信息信息信息信

让info变成bfc，会有意想不到的效果

9. 如何清除浮动

1. 给父元素overflow: hidden
2. 给父元素加clearfix

.clearfix::after{
  content: '';
  clear: both;
  display: block;
}

.clearfix{
  zoom: 1; //若要兼容IE才加这个
}

10. 父亲儿子的上下margin合并

这样儿子的margin-top也会给到父亲，把父亲挤下来，但只要在父亲里加：

• border: 0.1px solid green;
• padding: 0.1px
• display: table;
• display: flex;（不加width的话会把width变成0）
• display: inline-block（不加width的话会把width变成0）

则上下margin不会合并，父亲还是会把儿子包起来

11. 省略号

.ellipsis{
  width: 50px;  
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
}