css 面试题

1. 盒模型

css盒模型
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
document.getElementById("box").offsetWidth

    
     

        盒模型
     

2.BFC

BFC
BFC(Block formatting context 块级格式上下文)，会形成独立的渲染区域，内部元素的渲染不会影响外界
形成BFC的条件：
-浮动元素：float不是none
-绝对定位元素： position 是absolute或者fixed
-块级元素：overflow不是visible
-flex元素
-inline-block元素
应用场景：清除浮动等

      
       
      

         
过来的
         
友谊富家大室
      

3.圣杯布局

圣杯布局、双飞翼布局（一般用于PC端网页布局）
目的：两侧内容宽度固定，中间内容宽度自适应；
三栏布局，中间一栏最先加载、渲染出来（主要内容）
实现方法：float + margin
两者的不同：左右盒子外边距的设置以及dom结构的布局

##圣杯布局
   
   
实现圣杯布局
   
header
   

      
center
      
left
      
right
   
   
footer

## 双飞翼布局
     
       
双飞翼布局
      

           
main 
       
       
left
       
right

4. flex布局

flex 布局
父级容器相关：
flex-direction 主轴方向（水平方向、垂直方向）
justify-content 主轴上的对齐方式（开始对齐、结束对齐、居中对齐、两端对齐）
align-items 交叉轴上的对齐（开始对齐、结束对齐、居中对齐）
flex-wrap 是否换行
子元素相关：
align-self 子元素在交叉轴上的对齐方式（开始对齐、结束对齐、居中对齐），
可以覆盖align-items 属性

    

    
flex布局
    

        
        
        
    

html语义化的好处：提高代码可读性，让搜索引擎优化的爬虫程序更容易理解代码；
块级元素：独占一行(displa:blcok/table),div/hx/p/address/ul/ol/li/dl/dt/dd/table/form/fieldset/legend；
内联元素：不会独占一行，会紧跟排列，直到没有足够的空间(displa:inline/inline-block),span/strong/em/del/ins/label/a/sub/sup
内联块元素：input/img/select/textarea/iframe