HTML+CSS \03

一、html和css部分

1、如何理解CSS的盒子模型？

2、BFC？

• 什么是 BFC

  BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

• 形成 BFC 的条件

  • 浮动元素，float 除 none 以外的值

  • 定位元素，position（absolute，fixed）

  • display 为以下其中之一的值 inline-block，table-cell，table-caption

  • overflow 除了 visible 以外的值（hidden，auto，scroll）

• BFC 的特性

  • 内部的 Box 会在垂直方向上一个接一个的放置。

  • 垂直方向上的距

3、如何清除浮动？

不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

• clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度* 父级同时浮动（需要给父级同级元素添加浮动）
• 父级设置成inline-block，其margin: 0 auto居中方式失效* 给父级添加overflow:hidden 清除浮动方法* 万能清除法
• 给父级添加overflow:hidden 清除浮动方法
• 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

.float_div:after {                
        content:".";                       
        clear:both;                        
        display:block;                    
        height:0;                     
        overflow:hidden;                        
        visibility:hidden;
    }
.float_div{  
               zoom:1
}

5、css3实现0.5px的细线？

  .line {    
  position: relative;
}
  .line:after {    
  content: "";  
  position: absolute;   
  left: 0;  
  top: 0;   
  width: 100%;   
  height: 1px;  
  background-color: #000000;  
  -webkit-transform: scaleY(.5);   
 transform: scaleY(.5);
}


/* html */<div class="line"></div>