【面试回顾】CSS常见题全总结

盒模型

    
    
    
    
    


    

        this is div1
    

    

offsetWidth

• 正常盒子模型宽度：内容宽度（width）+padding+border+margin
• 控制总宽度为width：box-sizing：border-box

margin纵向重叠

• 相邻元素的margin-top和margin-bottom会发生重叠，最终高度会取大的
• 空白内容的
  也会重叠

    
    
    
    
    


    
    
AAA
    

    

    

    
BBB

margin负值问题

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

    
    
    
    
    


    
    
用于测试 margin top bottom 的负数情况
    

        

            this is item 1
        
        

            this is item 2
        
    

    
用于测试 margin left right 的负数情况
    

        

            this is item 3
        
        

            this is item 4
        
    

---

BFC理解与应用

• Block format context，块级格式化上下文
• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

• float 不是 none
• position 是 absolute 或 fixed
• overflow 不是 visible （为hidden）
• display 是 flex inline-block 等

BFC的常见应用

• 清除浮动

    
    
    
    
    


    

        
        
某一段文字……
    

---

布局

圣杯布局和双飞翼布局的目的

• 三栏布局，中间一栏最先加载和渲染
• 两侧内容固定，中间内容随着宽度自适应
• 一般用于PC网页

圣杯布局和双飞翼布局的技术总结

• 使用float布局
• 两侧使用margin负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用padding一个用margin

圣杯布局

    
    
    
    
    


    
this is header
    

        
this is center
        
this is left
        
this is right
    
    
this is footer

双飞翼布局

    
    
    
    
    


    

        

            this is main
        
    
    

        this is left
    
    

        this is right
    

flex 布局

常用语法回顾：

• flex-direction //横向、纵向
• justify-content //对齐方式
• align-items
• flex-wrap
• align-self

画个三点的色子

---

css 定位

absolute 和 relative定位

• relative 依据自身定位
• absolute 依据最近一层的定位元素定位

• 定位元素：

  • absolute relative fixed
  • body

    
    
    
    
    



    
absolute 和 relative 定位问题
    

        

            this is absolute
        
    

水平居中

• inline元素：text-align：center
• block元素：margin：auto
• absolute元素：left：50% + margin-left负值

垂直居中

• inline元素：line-height的值等于height的值
• absolute元素：top：50%+margin-top负值
• absolute元素：transform（-50%，-50%）
• absolute元素：top，left，bottom，right = 0 + margin：auto

水平对齐

    
    
    
    
    


    

        一段文字
    

    

        

            this is block item
        
    

    

        

            this is absolute item
        
    

垂直对齐

    
    
    
    
    


    

        一段文字
    

    

        

            this is item
        
    

    

        

            this is item
        
    

    

        

            this is item
        
    

---

css 图文样式

line-height的继承

    
    
    
    
    


    
这是一行文字

---

css 响应式

rem概念

• 相对长度单位，相对于根元素，常用于响应式布局

    
    
    
    
    



    
rem 1
    
rem 1
    
rem 1

    

        this is div1
    
    

        this is div2
    
    

        this is div3
    

响应式布局的常用方案

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

    
    
    
    
    


    

        this is div
    

vw/vh

• rem的弊端：阶梯性
• vh：网页视口高度的1/100
• vw：网页视口宽度的1/100
• vmax取两者较大值；vmin相反