css — 定位、背景圖、水平垂直居中

来源:https://www.cnblogs.com/yangjie0906/archive/2019/09/17/11405198.html
-Advertisement-
Play Games

[TOC] 1. 定位 position:static | relative | absolute | fixed; static 靜態定位 relative 相對 absolute 絕對 fixed 固定 1.1 靜態定位 靜態定位意味著“元素預設顯示文檔流的位置”。沒有任何變化。 1.2 相對定 ...


目錄

1. 定位

position:static | relative | absolute | fixed;

static 靜態定位

relative 相對

absolute 絕對

fixed 固定

1.1 靜態定位

靜態定位意味著“元素預設顯示文檔流的位置”。沒有任何變化。

1.2 相對定位 relative

1.特征：

  • 給一個標準文檔流下的盒子單純的設置相對定位，與普通的盒子沒有任何區別
  • 留“坑”，會影響頁面佈局

2.作用：

  • 1.用於微調元素
  • 2.做“子絕父相”佈局方案的參考

3.參考點：

  • 以原來的盒子為參考點

4.相對定位的值：top 、bottom 、left 、right

<style>
    .box {
        width: 500px;
        height: 600px;
        border: 1px solid #000;
    }

    .box .a {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .box .b {
        width: 200px;
        height: 200px;
        background-color: green;
        position: relative;
        top: 30px;
        left: 50px;
    }

    .box .c {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>

<body>
<div class="box">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

1.3 絕對定位 absolute

1.參考點：

判斷是否有定位（相對定位，絕對定位，固定定位）的祖先盒子進行定位：

  • 1.如果沒有定位的祖先盒子，以body為參考點
  • 2.如果單獨設置了一個盒子為絕對定位：
    • 1.以top描述，它的參考點是以body的（0，0）為參考點
    • 2.以bottom描述，它的參考點是以瀏覽器的左下角為參考點

2.子絕父相

以最近的父輩元素的左上角為參考點進行定位

3.特征：

  • 1.脫標
  • 2.壓蓋
  • 3.子絕父相
<style>
    .box {

        width: 500px;
        height: 600px;
        border: 1px solid #000;
        position: relative;
        float: right;
    }

    .box .a {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .box .b {
        width: 200px;
        height: 200px;
        background-color: green;
        position: absolute;
        top: 20px;
        left: 20px;
    }

    .box .c {
        width: 300px;
        height: 200px;
        background-color: blue;
    }
</style>

浮動和絕對定位的特征：

<style>
    /*span {*/
    /*background-color: red;*/
    /*!*float: left;*!*/
    /*position: absolute;*/
    /*width: 200px;*/
    /*height: 60px;*/
    /*}*/
    .container{
        width: 1226px;
        height: 100px;
        margin: 0 auto;
        background-color: #000;
    }
    .logo{
        width: 55px;
        height: 55px;
        background-color: #ff6700;
        float: left;
        margin-top: 20px;
    }
</style>
</head>
<body>
    <span>
        mjj
    </span>
    <div class="container">
        <div class="logo"></div>
    </div>

</body>

1.4 固定定位 fixed

它跟絕對定位基本相似，只有一個主要區別：絕對定位固定元素是相對於html根元素或其最近的定位祖先元素，而固定定位固定元素則是相對於瀏覽器視口本身。這意味著你可以創建固定的有用的網頁效果，比如固定導航欄、回到頂部按鈕，小廣告等。

1.特征：

  • 1.脫標
  • 2.固定不變
  • 3.提高層級

2.參考點：

以瀏覽器的左上角為參考點

<style>
    body{
        padding-top: 100px;
    }

    .active{
        position: relative;
        background-color: yellowgreen;

    }
    .fix{
        width: 100%;
        height: 100px;
        background-color: red;
        position: fixed;
        top: 0;
        left: 0;
    }
</style>
<body>
    <p>MJJwusir</p>
    <p>wusir</p>
    <p class="active">YAOwusir</p>
    <div class="fix">固定不變</div>
    <p>wusir</p>
    <p>wusir</p>
</body>

1.5 z-index

1.z-index只應用在定位的元素，預設z-index:auto;(auto相當於0)

2.z-index取值為整數，數值越大，它的層級越高

3.如果元素設置了定位，沒有設置z-index，那麼誰寫在最後面的，表示誰的層級越高。(與標簽的結構有關係)

4.從父現象。通常佈局方案我們採用子絕父相，比較的是父元素的z-index值，哪個父元素的z-index值越大，表示子元素的層級越高。

/*從父現象*/
<style>
    .box1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 60px;
        border: 2px solid blue;
        background-color: #000;
        z-index: 10;
    }

    .box2 {
        position: absolute;
        top: 20px;
        left: 0;
        width: 200px;
        height: 60px;
        border: 2px solid red;
        background-color: greenyellow;
        z-index: 6;
    }
</style>
<body>
    <div class="father1" style="position: relative;z-index: 2;">
        <span class="box1"></span>
    </div>
    <div class="father2" style="position: relative;z-index: 3;">
        <div class="box2"> </div>
    </div>
</body>

2. 背景圖

1.背景圖屬性

  • 1.background-image:url("圖片地址"); 給一個元素設置一個或多個背景圖像
  • 2.background-repeat:
    • 定義背景圖像的重覆方式。 背景圖像可以沿著水平軸，垂直軸，兩個軸重覆，或者根本不重覆。
    • 屬性值：
      • repeat 預設值。表示背景圖水平和垂直方向都平鋪
      • no-repeat 表示背景圖水平和處置方向都不平鋪
      • repeat-x 表示背景圖只有水平方向上平鋪
      • repeat-y 表示背景圖只有垂直方向上平鋪
  • 3.background-position
    • 表示背景圖定位初始位置。background-position是background-position-x和background-position-y的綜合屬性。如果想使用background-position屬性，那麼必須先指定background-image屬性。
    • 語法：
      • 1.background-position:值1 值2;
      • 2.background-position:position position;
<style>
    .bg{
        width: 1200px;
        height:1200px;
        border: 1px solid #000;
        /*設置背景圖*/
        background-image: url("xiaohua.jpg");
        background-repeat: no-repeat;
        /*調整背景圖的位置*/
        /*background-position: -164px -106px;*/
        background-position: center center;

        color: green;
        font-weight: 700;
        font-size: 30px;
    }
</style>

2.CSS Sprite 雪碧圖

CSS雪碧圖技術：即CSS Sprite,也有人叫它CSS精靈圖，是一種圖像拼合技術。該方法是將多個小圖標和背景圖像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

使用雪碧圖的使用場景:

  • 靜態圖片，不隨用戶信息的變化而變化

  • 小圖片，圖片容量比較小(2~3k)

  • 載入量比較大

    一些大圖不建議製作雪碧圖

優點:

  • 有效的減少HTTP請求數量
  • 加速內容顯示

雪碧圖的實現原理:

  • 它通過css的背景屬性的backrground-position的來控制雪碧圖的顯示。
  • 控制一個層，可顯示的區域範圍大消息，通過一個視窗，進行背景圖的移動。
<style>
    .swiper {
            width: 100%;
            height: 460px;
        }
        .container {
            width: 1226px;
            position: relative;
            margin: 0 auto;
        }
        .swiper span {
            display: inline-block;
            width: 41px;
            height: 69px;
            background: url("icon-slides.png") no-repeat 0 0;
            position: absolute;
            margin-top: -34px;
            top: 50%;
            cursor: pointer;
        }
        .swiper span.prev {
            background-position: -83px 0;
            left: 234px;
        }
        .swiper span.next {
            background-position: -124px 0;
            right: 0;
        }
        .swiper span.prev:hover{
            background-position: 0 0;
        }
         .swiper span.next:hover{
            background-position: -42px 0;
        }
</style>
<div class="swiper">
    <div class="container">
        <span class="prev"></span>
        <span class="next"></span>
    </div>
</div>

3. 水平垂直居中

3.1 行內元素水平居中顯示

1.第一種方式：line-height+text-align

p {
    width: 200px;
    height: 200px;
    background: #666;
    color: #fff;
    line-height: 200px;
    text-align: center;
}

2.第二種方式：給父元素設置display:table-cell;,並且設置vertical-align:middle

.box{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

3.2 塊級元素水平垂直居中

1.方法一：position+margin

<style>
    .father{
        width: 200px;
        height: 200px;
        background-color: red;
        position: relative;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: green;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>
<div class="father">
    <div class="child">我是個居中的盒子</div>
</div>

2.方法二：display:table-cell

<style type="text/css">
    .father{
        width: 200px;
        height: 200px;
        background-color: red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: green;
        display: inline-block;
        vertical-align: middle;
    }
</style>
<div class="father">
    <div class="child">我是個居中的盒子</div>
</div>

3.第三種：純position

<style>
    .father{
        width: 500px;
        height: 300px;
        background-color: red;
        position: relative;
    }
    .child{
        /*如何讓一個絕對定位的垂直居中： top設置50%，margin-top設置當前盒子的一半，並且是負*/
        position: absolute;
        width: 100px;
        height: 140px;
        background-color: green;
        left: 50%;
        margin-left: -50px;
        top: 50%;
        margin-top: -70px;
    }
</style>
<div class="father">
    <div class="child">我是個居中的盒子</div>
</div>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js — 基礎知識
    [TOC] js ( Javascript ) — 腳本語言 1. js的介紹 Javascript是一種運行在瀏覽器中的解釋型的編程語言。 Javascript 可以在網頁上實現複雜的功能，網頁展示不再是單純的簡單的靜態信息，而是實施的內容更新，互動式的地圖，2D/3D的動畫，滾動播放的音視頻等等 ...
  • H5標簽
    定義萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改為什麼要有語義化標簽方便開發者閱讀，寫出更優雅的代碼，讓瀏覽器很好的解析，從而更好的解析網頁內容，更好的搜索引擎優化H5 新增標簽 定義萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML） ...
  • 中間人攻擊，HTTPS也可以被碾壓
    摘要： 當年12306竟然要自己安裝證書... 原文： "知道所有道理，真的可以為所欲為" 公眾號：可樂 "Fundebug" 經授權轉載，版權歸原作者所有。 一、什麼是MITM 中間人攻擊(man in the middle attack, abbreviated to MITM)，簡單的講，就是 ...
  • vue中使用scss
    第一步 安裝scss依賴，cnpm i node-sass sass-loader -D 註：sass-loader用來解析scss文件（-D 是 --save-dev 的簡寫） 第二步： 在build文件夾下的webpack.base.conf.js的rules裡面添加配置 { test: /\. ...
  • 固定定位下的div水平居中
    發現了一個之前未留意的知識點，做個筆記。 當一個塊級元素的父元素開啟了flex佈局後，我們可以很輕鬆的將這個元素居中對齊，可以在父元素上加 justify-content: center; align-items: center;/*單行下的居中對齊*/ 或 justify-content: cen ...
  • 數據類型及類型轉換
    數據類型及類型轉換 JS的六大數據類型 JS有六種數據類型 1.基本數據類型： Number 123 String ‘abc’ Boolean true,false Undefined undefined Null 空 2.複雜數據類型 Object { } 三大引用類型 Object { } Ar ...
  • Vue-cli中axios傳參的方式以及後端取的方式
    0917自我總結 Vue cli中axios傳參的方式以及後端取的方式 一.傳參 params是添加到url的請求字元串中的，用於get請求。 data是添加到請求體（body）中的， 用於post請求。 首先現在main.js進行配置 如:get請求 如:post請求 二.後臺獲取 如果是 傳參後 ...
  • 前端正則表達式書寫以及常用的方法
    0917自我總結 前端正則表達式書寫 一.寫法 寫法一 /正則表達式/修飾符 /i (忽略大小寫) /g (全文查找出現的所有匹配字元) /m (多行查找) /gi(全文查找、忽略大小寫) /ig(全文查找、忽略大小寫) 例子:/a/gi 查找內容中的a 不寫修飾符預設只匹配一個 寫法二 let a ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類