2017年12月聚合文章--CSS新手常遇到的一些坑

最近开始上手一些前端的项目，最难受的就是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:#ff3300}
    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" >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;
    /*父元素必须是非static，否则子元素的定位参照就不是root*/
    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>

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] CSS新手常遇到的一些坑

bottom一定是从底部计算吗？

width 100%?到底有多宽？

width 7em?内联元素的宽度问题

clear right?

auto 50%?文字如何居中？