CSS基礎定位與精靈圖

weixin_34120274發表於2017-12-04
CSS
1.靜態定位
  • position:static;
  • 定位的預設值,文件流
2.絕對定位
  • position:absolute;
  • 特點
    • 元素使用絕對定位之後處於脫標不佔據原來的位置
    • 元素使用絕對定位，位置是從瀏覽器出發
    • 巢狀的盒子，父盒子沒有使用定位，子盒子絕對定位，子盒子位置是從瀏覽器出發
    • 巢狀的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出發 
      <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    body,div{
        margin: 0;
        padding: 0;
    }
    .big{

        margin: 20px;
        background-color: beige;
        width: 100px;
        height: 100px;
        /*position: absolute;*/給父盒子相對定位
        /*top: 50px;*/
        /*left: 50px;*/
    }
    .small{
        position: absolute;
        background-color: cadetblue;
        width: 50px;
        height: 50px;
        top: 10px;
        left: 10px;
    }
</style>
</head>
<body>
 <div class="big">
     <div class="small"></div>
 </div>
</body>
4244416-be412e4ecf1a6e21.png
image.png
  • 當一個盒子絕對定位之後不能使用margin: 0 auto;讓盒子自身居中
    如果想讓過一個絕對定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素寬度一半px;
3.相對定位
  • position:relative;
  • 特點
    • 位置從自身定位前在標準流中的位置出發
    • 還佔據原來的位置
  • 父元素相對定位，子元素絕對定位
    • 開發中一般採用父元素使用相對定位子元素使用絕對定位配合使用進行定位
4.固定定位
  • position:fixed;
  • 特點：
    • 固定定位之後，不佔據原來的位置（脫標）
    • 元素使用固定定位之後，位置從瀏覽器出發。
    • 元素使用固定定位之後，會轉化為行內塊（不推薦，推薦使用display:inline-block;）
5.z-index屬性
  • 用於指定定位的元素的覆蓋關係
  • 定位元素的覆蓋關係
    • 預設情況下定位的元素一定會蓋住沒有定位的元素
    • 預設情況下寫在後面的定位元素會蓋住前面的定位元素
    • 預設情況下所有元素的z-index值都是0, 如果設定了元素的z-index值, 那麼誰比較大誰就顯示在前面
  • 定位元素的從父現象
    • 父元素沒有z-index值, 那麼子元素誰的z-index大誰蓋住誰
    • 父元素z-index值不一樣, 那麼父元素誰的z-index大誰蓋住誰
6.精靈圖
  • 全稱CSS Sprite,很多網頁中的小圖示組成的一張圖
  • 通過background-position移動圖片並擷取所需部分
4244416-041aed6c8d585000.png
sprite.png
 <style>
        .box{
            width: 50px;
            height: 50px;
            background-image: url(images/sprite.png);
            background-position: -50px -50px;
        }
  </style>

相關文章