BFC visibility display none opacity rgba

满足下列属性之一就属于BFC
- float属性不为none.
- position属性不为static和relative.
- display属性为下列之一:table-cell,table-caption,inline-block,flex,or inline-flex.
- overflow属性不为visible.

BFC 有什么作用
- 可以消除Margin Collapse
- 容纳浮动元素
- 阻止文本换行

参考https://segmentfault.com/a/1190000011211625
http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

---

1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

对比：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色

---

各种元素的width height margin padding 特性（具体css元素的分来参看二）

1.块级元素

width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。例如：div

2.行内替换元素

width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。 例如：img

2.行内非替换元素（重点）

width、 height不起作用，用line-height来控制高度。

padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。(《css权威指南》 P249)

margin左右作用起作用，上下不起作用，原因在于：行内非替换元素的外边距不会改变一个元素的行高（《css权威指南》 P227）。

从元素本身的特点来讲，可以分为替换和不可替换元素。

a) 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；

又例如：根据标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的、、、、都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

b) 不可替换元素

(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。段落

是一个不可替换元素，文字“段落的内容”全被显示。