CSS

一.css布局

1.盒模型

/*如下代码，请问div1的offsetWidth是多大？*/


/*答案：offsetWidth=width+padding+border=122px：*/

/*扩展：如果让offsetWidth=100px,该如何做？*/

---

2.margin纵向重叠问题
这个以前知道会重叠但是不知道空标签也会重叠

/*如下代码，AAA和BBB之间的距离是多少？*/
 

  
AAA
  

  

  

  
BBB
/*
   答案：15px。
   解释：相邻的margin-top和margin-bottom会发生重叠；
        空白的
也会重叠。
*/

---

3.margin负值问题

- margin-top和margin-left负值，元素向上、向左移动；
- margin-right负值，右侧元素移动，自身不受影响；
- margin-bottom负值，下方元素移动，自身不受影响。

---

4.BFC的理解和应用

什么是BFC?如何应用？
BFC：
    block format context 块级格式化上下文
    一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件：
     float：不是none
     position：absolute/fixed
     overflow:部位visible
     display:inline-block,flex等
BFC常见应用
    清除浮动

---

5.如何实现圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的
     三栏布局，中间一栏最先加载和渲染（内容最重要）
     两侧内容固定，中间内容随着宽度自适应
     一般用于PC网页
圣杯布局和双飞翼布局的技术总结
    使用float布局
    两侧使用margin负值，以便和中间内容横向重叠
    防止中间内容被两侧覆盖，一个用padding一个用margin

圣杯布局



  
  
  
  


  

header

  
center
  
left
  
right

footer

双飞翼布局



  
  
  
  


  

header

  

    
center
  
  
left
  
right

footer

---

6.手写clearfix

/* 手写clearfix */
    .clearfix:after{
      content: '';
      display: table;
      clear: both;
    }
    .clearfix{
      *zoom:1;
    }

---

7.flex实现一个三点的色子

flex常用语法回顾：
    flex-direction：方向
    justify-content：元素在主轴的对齐方式
    align-items：元素在交叉轴的对齐方式
    flex-wrap：换行
    align-self:子元素在交叉轴的对齐方式

align-self这个其实我一直没仔细看啥意思，现在学习回顾了是怼子元素起作用的

---

二.css定位

1.absolute和relative分别依据什么定位？

relative依据自身定位
absolute依据最近一层的定位元素定位
    定位元素：absolute，relative，fixed
             body

---

2.居中对齐有哪些实现方式？

水平居中
    1. inline元素：text-align:center
    2. block元素：margin:auto
    3. absolute元素：left50%+margin-left负值
    4. flex元素：display: flex; jusitity-content: center;
垂直居中
    1. inline元素：line-height的值等于height的值
    2. absolute元素1：top50%+margin-top负值
    3. absolute元素2：transform:translate(-50%,-50%)
    4. absolute元素3：top,bottom,left,right=0+margin:auto
      可以实现元素水平垂直居中，既保证兼容性又不必知道子元素的长度。
    5. flex元素：display: flex; align-items: center;

  
  
  
  


  
水平居中
  
  

    
inline元素
    

        
block元素
      
    

      
absolute
    
    

      
flex元素
    
  
  
垂直居中
  
  

    
inline元素
    

      
absolute
    
    

      
absolute2
    
    

      
transform
    
    

      
flex元素
    
  

---

三.css图文样式

1.line-height:如何继承

如下代码，p的行高将会是多少？


AAA

答案：40px（font-size * line-height）=20*200%=40

我也不知道写百分比继承的是计算出来的值，以前都没有用过百分比这种line-height

写具体值，如30px，则继承该值（比较好理解）
写比例，如2/1.5，则继承该值(比较好理解)
写百分比，如200%，则继承计算出来的值（考点）

---

四.CSS响应式

1.rem是什么？

rem是一个长度单位
px：绝对长度单位，最常用
em：相对长度单位，相对于父元素，不常用
rem：相对长度单位，相对于根元素，常用于响应式布局

---

2.响应式布局的常见方案？

media-query:根据不同的屏幕宽度设置根元素font-size
rem:基于根元素的相对单位

---

3.vw/vh

rem&media-query弊端：阶梯性
网页视口尺寸：
    window.screen.height:屏幕高度
    window.innerHeight:网页视口高度
    document.body.clientBody:body高度
vw/vh:
    vh:网页视口高度1/100
    vw:网页视口宽度1/100
    vmax取两者最大值，vmin取两者最小值
    window.innerHeight=100vh
    window.innerwidth=100vw

---