CSS新手常遇到的一些坑

tcfellow發表於2017-12-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" 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;
    /*父元素必須是非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>複製程式碼

相關文章