CSS3层叠样式表（四）

BFC的介绍

块级上下文（Block Formatting Context）BFC:是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。（实际是网页中一块特殊的区域）

创建BFC方法： 1.html标签是BFC盒子

                           2.浮动元素是BFC盒子

                          3.行内块元素是BFC盒子

                          4.overflow属性取值不为visible。如：auto、hidden...

BFC盒子常见的特点：

                1.BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动；

                2.BFC盒子本身与子元素之间不存在margin的塌陷现象→ 应用：解决margin的塌陷；

元素装饰

(1)垂直对齐方式（针对行内元素和行内块元素）

属性名：vertical-align      属性值：baseline（默认）、top、middle（中部）、bottom；

项目中vertical-align可以解决的问题：

1. 文本框和表单按钮无法对齐问题；
2. input和img无法对齐问题；
3. div中的文本框，文本框无法贴顶问题；
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题；
5. 使用line-height让img标签垂直居中问题；

(2)光标类型（场景：设置鼠标光标在元素上时显示的样式）

属性名：cursor   

属性值：default（箭头，默认）、pointer（小手）、text（工字型）、move（十字光标）

(3)溢出部分显示效果（指的是盒子 内容部分 所超出盒子范围的区域）

  属性名：overflow    

属性值：visible（默认值，溢出部分可见）、hidden（溢出部分隐藏）、scroll（无论是否溢出，都显示滚动条）、auto（根据是否溢出，自动显示或隐藏滚动条）

(4)元素本身隐藏（场景：让某元素本身在屏幕中不可见，如：鼠标:hover之后元素隐藏）

常见属性：1.visibility：hidden    2.display：none

区别： 1.visibility：hidden 隐藏元素本身，并且在网页中 占位置

       2.display：none 隐藏元素本身，并且在网页中 不占位置

注意点：开发中经常会通过display属性完成元素的显示隐藏切换

display：none；（隐藏）、display：block；（显示）

(5)元素整体透明度（场景：让某元素整体（包含内容）一起变透明）

属性名：opacity

属性值：0 - 1之间的数字（1：表示完全不透明；0：表示完全透明）

注意点：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等......

(6)边框合并（场景：让相邻表格边框进行合并，得到细线边框效果）

代码：border-collapse：collapse；

用CSS画三角形的步骤： 1.设置一个盒子；

   2.设置四周不同颜色的边框；

   3.将盒子宽高设置为0，仅保留边框；

   4.得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明；