CSS我们所应该知道的

文字换行属性:`white-space`

该属性的常用的值(容器的宽度固定)：

normal: 默认，超出容器范围时换行
nowrap: 超出容器的范围也不换行

为什么要设置`margin:0;padding:0;`

body{
    margin:0;
    padding:0;
}
ul{
    list-style-type:none;/*去除li前默认的小圆点*/
    margin:0;
    padding:0;
    overflow:hidden;/*防止li出现再ul外*/
}
*{
    margin:0;
    padding:0;
}

IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto。不同的浏览器默认的margin和padding等属性都不相同，为了保证各浏览器的一致性，所以用下述办法：

直接用*{margin:0;padding:0;}(不推荐)
使用normalize.css，优于Reset CSS。

淘宝的css初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

`DOCTYPE`

1	<!DOCTYPE html>

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

权重

翻译自：这儿

例子	行内css	ID 选择器	class 选择器	节点选择器
#name p.warning	0	1	1	1

每一项的默认值都是0，哪一项满足一次就+1，比较最终的值
特殊：

*选择器：0 0 0 0
继承的权重，所有继承的权重都是null。若某项属性继承自多个父辈元素，那取最近的父辈元素的属性
伪元素的权重 = 节点选择器的权重，伪类的权重 = 属性选择器的权重 = class选择器的权重

伪元素的权重还有争议，有种说法是伪元素的权重忽略不计

多类选择器:`class="sty1 sty2"`

在html中声明的`<p class="sty1 sty2">你好</p>`的对应的css样式为:

.sty1{
    font-weight:bold;
}
.sty2{
    font-style:italic;
}
.sty1.sty2{/*中间没有空格*/
    background:#FF00FF;
}

结果如下:
多类选择器结果

总结:
多类选择器会匹配其所有子元素任意组合的样式，如：
class="sty1 sty2 sty3"会匹配.sty1{},.sty2{},sty3{},.sty1.sty2{},.sty1.sty3{},.sty2.sty3{},.sty1.sty2.sty3{};

当有属性重叠时,根据权重来适应.

乱码问题:

我们知道,乱码问题都是因为编码问题引起的,但是具体哪儿导致的问题,整个过程其实不清楚,现总结如下:

编辑器的编码:我用的sublime3,下了ConvertToUTF8这个插件,可以让内容使用utf-8编码,当然,默认就是utf-8;
网页的源代码编码:html文件在头部声明了如下代码:<meta charset="utf-8">,浏览器的核心其实是渲染器与js解析器,那么,渲染器会根据网页源文件里面设定的编码渲染网页;

只要这两个地方统一了,一般浏览器上就不会再出现乱码.如果还有,看看是不是浏览器设定的编码格式不统一.

浏览器的滚动条:

百度首页更多产品bug 在批改极客学院作业的过程中，有个小bug印象特别深刻，让我想了很久都没有想明白，表现为：
当移动到右侧的更多产品时，会向下弹出来该下拉列表，而且会向左偏移一段距离。原因是为了沾满整个屏幕，给此div设置了min-height=667，而这个高度大于我的屏幕高度，所以导致右侧出来了一个滚动条，这个滚动条是占宽度的。所以会向左偏移。

解决方案：设置滚动条的宽高为0，如下：

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

calc()

这是css3中常用到的计算方法，但是当要使用+ - * /等运算符的时候，+、-运算符两边要使用空格隔开，否则不起作用，如下是正确的方法：

1
2
3

.box{
    width:calc(100% - 10px);/*运算的具体数值要带单位*/
}

box-shadow

此属性对 tr 不起作用，因为 tr 为display:table-row;,box-shadow只对display:block;生效

常用的`CSS hack`技巧

.bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别，ie8的最终样式*/
      +background-color:#a200ff;/*IE6、7识别，ie7的最终样式*/
      _background-color:#1e0bd1;/*IE6识别，ie6的最终样式*/
}

超链接访问过后hover样式就不出现了

因为被点击访问过的超链接样式不在具有 hover 和 active 了。解决方法是改变 CSS 属性的排列顺序 L-V-H-A:

1	a:link {} a:visited {} a:hover {} a:active {}

子元素的宽度占满父元素剩余的宽度

利用 BFC (block formatting context)

右边子元素填充父元素剩余宽度：

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {
    width:600px;
    height:200px;
}
.left {
    width:200px;
    height:100%;
    background:blue;
    float:left;
}
.right {
    width:auto; // 重点
    height:100%;
    background:red;
    overflow:hidden; // 重点，此属性使得盒子成为 BFC
}

左边子元素填充父元素剩余宽度：

<div class="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

.container {
    width:600px;
    height:200px;
}
.right {
    width:200px;
    height:100%;
    background:red;
    float: right;
}
.left {
    width:auto;
    height:100%;
    background:blue;
    overflow:hidden;
}

注意： float 的元素放在前面， BFC 的元素放在后面以自适应父元素剩余宽度

利用 `flex` 布局

给要填充父元素剩余宽度的元素设置 flex: 1

文字换行属性:white-space

为什么要设置margin:0;padding:0;

DOCTYPE

权重

多类选择器:class="sty1 sty2"