正文
最近开始上手一些前端的项目，最难受的就是CSS的各种定位，把其中遇到的一些问题记录下来，方便自己查阅，也希望能帮到像我一样的CSS初学者。
-
bottom一定是从底部计算吗？
考虑这样的一种场景,有两个div，我们希望下面的div能够固定到底部，一开始我是这么写的
<html>
<head>
<meta charset="UTF-8">
<title>CSS TEST</title>
<style type="text/css">
.haha{
width: auto;
background: red;
height: 100px;
}
.inner {
height: 700px;
background: blue;
width: auto;
margin:10px;
}
.hehe{
bottom: 0;
height: 40px;
width: 100%;
background: black;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="haha">
</div>
<div class="hehe">
</div>
</body>
</html>
运行一下会发现，实际上，hehe这个div贴着haah的div，而不是我们想要的贴到底部。仔细查阅了w3c的文档，其实是由于对于top,left,bottom之类的定位是需要先给出定位方式是absolute/fixed/relative中的一种,才有意义。否则它就是依然是正常排列的。
-
width 100%?到底有多宽？
还是刚才那个例子，对hehe加上postion:absolute我们会发现左右拖动的话，浏览器会有水平的滚动条，这说明了有内容溢出，这又是为什么呢？原来，对于默认的width只是content的宽度，实际上再加上浏览器默认的padding,那么就会把元素往右边挤，导致超出屏幕。当然怎么解决这个问题呢，需要自己去思考了。
更深入理解请参考:
CSS“width:100%”和宽度继承的浅薄认识
-
width 7em?内联元素的宽度问题
考虑下面一种情况，列表内部内部我们向插入3个width为7em的li标签。
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。但是实际上却没显示7em，这是为什么？
</p>
</body>
</html>
但是实际上呢,每个li标签显示的背景色宽度不到7em，这是为什么呢？因为li标签display:inline之后变成行内元素，行内元素的宽度只是由里面的文字内容实际宽度决定的。所以我们只需要加一个float:left给a标签(能让他变成块级元素）,就能正常显示了。
-
clear right?
如果说我们有两个元素，我希望第一个元素float:left后不影响第二个，第二个元素也会另起一行。那是不是可以这样做？
<html>
<head>
<style type="text/css">
p{
float:left;
clear:right;
}
</style>
</head>
<body>
<p>This is text 1</p>
<p>This is text 2</p>
</body>
</html>
实际试验后，第一个p标签发现并没有把右边p标签给清掉啊！实际上对clear而言，只会对文档之前的float进行清除，位于该文档后面的是影响不了的，所以在这里我们使用
clear:left
或者
clear:both
才可以。
-
auto 50%?文字如何居中？
怎样才能让div中的文字居中呢?
<html>
<head>
<style type="text/css">
#child{
margin-left: 50%;
margin-right:50%;
text-align:center;
}
</style>
</head>
<body>
<div id="root">
<div id="child" style="width:100px">make me center</div>
</div>
</body>
</html>
当我们采取这种写法的时候，我们会发现实际上child所控制的整个区域呢已经超出了100px，这是因为margin-right被div内部的内容向右挤出了，并且实际上文字也不再中间，显示起来偏右。这该怎么解决呢？其实很简单，把margin设置成
auto
即可。当然也有其他方法读者可以自己思考。
好了，那么如何使一个div
垂直水平居中
呢?
<style type="text/css">
.root{
width:300px;
height:300px;
margin:0;
padding:0;
background:yellow;
position: relative;
}
.child{
width: 100px;
height: 100px;
background: red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
</style>
<body>
<div class="root">
<div class="child"></div>
</div>
</body>
