关于css进阶——布局和BFC

display的几个常用的属性值，inline ， block， inline-block

inline:
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行；
- height，width设置无效，大小由内容撑开（可以撑开内容的padding、font-size、line-leight）；
- padding有效，margin的left和right产生边距效果，但是top和bottom就不行；
block:
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度；
- 能够改变元素的height，width的值；
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果；
inline-block:
- 不独占一行的块级元素。

css中的百分比

width & height：参照都是元素的包含块（Containing Block，详情）。width参照包含块的宽度，height参照包含块的高度。在大部分情况下，包含块就是父元素的内容区（盒模型里的content）。直接父元素（包含块）是否有明确的高度定义，会影响height为百分比值时的结果。这就是为什么在之前的固定页脚一文中，有html, body{height:100%;}这样的写法。
margin & padding：对于margin和padding，其任意方向的百分比值，参照都是包含块的宽度。
border-radius：为一个元素的border-radius定义的百分比值，参照物是这个元素自身的尺寸。
background-position：background-position的百分比值，取的参照是一个减法计算值，由放置背景图的区域尺寸，减去背景图的尺寸得到，可以为负值。
font-size：参照是直接父元素的font-size。例如，一个元素的直接父元素的font-size是14px，无论这个是直接定义的，还是继承得到的，当该元素定义font-size:100%;，获得的效果就是font-size:14px;。
line-height：参照是元素自身的font-size。例如，一个元素的font-size是12px，那么line-height:150%;的效果是line-height:18px;。
vertical-align：参照是元素自身的line-height（和前面很有关联吧，所以我排在了这里）。例如，一个元素的line-height是30px，则vertical-align:10%;的效果是vertical-align:3px;。对这个属性我还想说，尽管vertical-align可以使用数字，百分比值，但浏览器兼容性差异较大，在跨浏览器实现时可能需要较多hack。因此，我个人倾向于使用middle等相对来说兼容性差异较小的关键字类型的值。
定位用的bottom、left、right、top：参照是元素的包含块。left和right是参照包含块的宽度，bottom和top是参照包含块的高度。
transform: translate：平移变换，在水平方向和垂直方向上也可以使用百分比，其参照是变换的边界框的尺寸（等于这个元素自己的border-box尺寸）。例如，一个宽度为150px，高度为100px的元素，定义transform:translate(50%, 50%)的效果是transform:translate(75px, 50px)。还可以补充一点，translate3d对应是还有第三个维度的，但是，经过测试，最后的第3个值不可以使用百分比（否则样式定义无效）。

注意事项：当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。

css隐藏元素的方法

1. display: none;
1. visibility: hidden;
  - 占位，一般可以和position: abosute结合使用
  - 绑定上面是事件不会触发
1. opacity: 0
  - 占位，一般可以和position: abosute结合使用
  - 绑定上面是事件会触发
  - opacity会自动继承，写mask弹窗的时候有坑。此时我们可以使用 background: rgba( r, g, b, 0.8) 两个应用的例子
2. 在passsword选择浏览器记住密码后，后面页面得input框会自动填充，此时可以设置一个空的input放在这个有用的input之前 //此处必须使用opacity而不能用display或者visibility

input-file控件，重写定制化内置btn样式；
```
.file {
  position:absolute;
  right:0;
  top:0;
  _zoom:30;
  font-size:300px\9;
  height:100%;
  _height:auto;
  opacity:0;
  filter:alpha(opacity=0);
  -ms-filter:"alpha(opacity=0)";
  cursor:pointer;
}
```
- 1. 什么widh: 0/height: 0
- 1. 文字font-size:0; [可以hack display: inline-block; margin问题]
- 1. 文字color: transparent;
- 1. 文字text-indent： -99999999px;
- 1. z-index: -999999999
- 1. position: absolute left: -999999px；
- 1. margin: -99899px
- 11 transform: translate(-9999999px) skew(90deg) scale(0)

css选择符的命名规则及规范：

css语法对于命名字符有更多的规定。以下是W3C关于命名标识符的说明中的内容：

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.

意思是说，css中允许使用的命名字符，包括大小写英文字母、数字、连字符-、下划线_及其他ISO 10646字符集（等同于Unicode）中的字符。同时，起始字符部分不能是数字，或连续2个-，或1个-后接1个数字。此外，允许使用转义字符和任意ISO 10646字符的数字代码。

可以看出，命名允许使用的字符其实是非常多的。但是，有一个地方需要注意，就是特殊字符。特殊字符是指在css语法中，被认定用来表示特定含义的字符（相当于编程语言中的关键字）。例如，...这样的class命名是不合法的，因为.是css选择符中表示class的字符，因此不允许直接用在命名中（...这位沉默着的class名你感觉如何？）。

css中的特殊字符包含：!, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^,`, {, |, }, 和~。

这个时候，想要在命名中也加入这些特殊字符，就要使用字符转义（character escape）。字符转义通过反斜杠\实现，在css选择符中，你可以通过在特殊字符前加\的方法，取消特殊字符的特定含义，使其可以正确地被用于命名。

经过测试，IE6对起始字符是下划线_和单个连字符-的情况，也会认定样式规则无效。 eg:

<div class="^_^"></div>  合法
<div class="♫">music on~</div> 合法
.3-column 不合法

一套css书写规范：

rscss和rsjs是一套比较小巧的前端开发规则和约定，其中rs代表Reasonable System。

rscss希望有效地改善写css中的这样几个常见问题（css哲学三问）：

这个class到底什么意思？
这个class还有地方用到吗？
我新写的这个class，会有冲突吗？

主要要点：

组件至少使用两个单词命名 ===> 建议 kd-dashboard(公司名缩写+模块)
组件内元素使用一个单词，使用子选择符 > 而不是包含选择符嵌套关联；
属性或状态（Variants，也可以叫变体：使用短横线（-）；
布局：推荐除一些具有固定宽高的特定元素（如头像，logo）外，组件本身不定义任何影响布局位置的属性：
- 定位（position、top、left、right、bottom）
- 浮动（float、clear）
- 外边距（margin）
- 尺寸（width、height）
js操作相关：加js-；
rscss推荐辅助类（Helpers）单独存放一个文件，且class名以下划线（_）开头。辅助类也常会用到!important，对应的，应尽可能少使用辅助类。

SMACSS认为css有5个类别：

Base基础样式reset等
Layout（Major Components）布局样式 .l-
Module（Minor Components）模块组件样式
State 状态样式 .is-
Theme 主题样式 .theme

Hibop / Hibop.github.io