8种机械键盘轴体对比
本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？
标准文档流
标准文档流的特性
(1)空白折叠现象：
无论多少个空格、换行、tab，都会折叠为一个空格。
比如，如果我们想让img标签之间没有空隙，必须紧密连接：1
(2)高矮不齐，底边对齐：
(3)自动换行，一行写不满，换行写。
行内元素和块级元素
学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：行内元素
块级元素
举一个例子，看看块级元素和行内元素的区别：
上图中可以看到，p标签是块级元素，占据了整行，span标签是行内元素，只占据内容这一部分。
现在我们尝试给两个标签设置宽高。效果如下：
上图中，尝试给两个标签设置宽高，发现，宽高属性只对块级元素p生效。
行内元素和块级元素的区别：(非常重要)
行内元素：与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
行内元素和块级元素的分类：
从HTML的角度来讲，标签分为：文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。
现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
块级元素：所有的容器级标签都是块级元素，还有p标签。
行内元素和块级元素的相互转换
块级元素可以转换为行内元素：1display: inline;
行内元素转换为块级元素：1display: block;
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：(1)浮动
(2)绝对定位
(3)固定定位
浮动的性质
性质1：浮动的元素脱标
证明1：
上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个
证明2：
上图中，span标签在标准流中，是不能设置宽高的(因为是行内元素)。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
**所有标签，浮动之后，已经不区分行内、块级了。
性质2：浮动的元素互相贴靠
浮动元素的高度相同时1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Document*{
margin: 0;
padding: 0;
}
div{
float: left;
width: 150px;
height: 150px;
font-size: 20px;
}
.div1{
background-color: red;
}
.div2{
background-color: green;
}
.div3{
background-color: pink;
}
1
2
3
浮动元素的高度不同时，浮动元素可能被阻挡
第一种情况1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Document*{
margin: 0;
padding: 0;
}
div{
float: left;
width: 150px;
height: 150px;
font-size: 20px;
}
.div1{
height: 300px;
background-color: red;
}
.div2{
background-color: green;
}
.div3{
background-color: pink;
}
1
2
3
第二种情况1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Document*{
margin: 0;
padding: 0;
}
div{
float: left;
width: 150px;
height: 150px;
font-size: 20px;
}
.div1{
background-color: red;
}
.div2{
height: 300px;
background-color: green;
}
.div3{
background-color: pink;
}
1
2
3
性质3：浮动的元素有“字围”效果
我们让div浮动，p不浮动。
上图中，我们发现：第1个div挡住了第2个div，但不会挡住第二个div中的文字，形成“字围”效果。
总结：标准流中的文字不会被浮动的盒子遮挡住。
性质4：收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度(这点非常像行内元素)。
举例如下：
上图中，div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩
浮动的补充(做网站时注意)
上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
浮动的清除
根据清除浮动的目的，可以分为以下两大类。
(1) 防止浮动元素引起兄弟级元素布局受到影响。
(2) 防止浮动元素引起父级高度塌陷。
1、clear清除浮动(添加空div法 )
在浮动元素下方(父元素最下方或父元素外)添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}
为浮动元素的下一个兄弟元素设置clear样式。
2、方法：给浮动元素父级设置高度
我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。
缺点：在浮动元素高度不确定的时候不适用
3、方法：以浮制浮(父级同时浮动)
何谓“以浮制浮”呢？就是让浮动元素的父级也浮动。
缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。
4、方法：父级设置成inline-block
缺点：父级的margin左右auto失效，无法使用margin: 0 auto;居中了
5、 br 清浮动1
2
3
4
br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。
问题：不符合工作中：结构、样式、行为，三者分离的要求。
6、给父级添加overflow:hidden 清浮动方法；
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；1
2overflow: hidden;
*zoom: 1;
7、万能清除法 after伪类 清浮动(现在主流方法，推荐使用)
选择符:after{
content:”.”;
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
同时为了兼容 IE6，7 同样需要配合zoom使用例如：
.clear:after{content:’’;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}
需要注意的东西：
after伪类： 元素内部末尾添加内容；
:after{content”添加的内容”;} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
margin相关
margin塌陷/margin重叠
标准文档流中，竖直方向的margin不叠加，取较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
盒子居中margin:0 auto;
注意：(1)只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
(2)使用margin:0 auto;的盒子，必须有width，有明确的width。(可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义)
(3)margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;
善于使用父亲的padding，而不是儿子的margin
我们来看一个奇怪的现象。现在有下面这样一个结构：(div中放一个p)1
2
3
上面的结构中，我们尝试通过给儿子p一个margin-top:50px;的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
此时我们给父亲div加一个border属性，就正常了：
如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，如果要表达父子之间的距离，一定要善于使用父亲的padding，而不是儿子的margin。
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
