CSS3新特性應用之結構與佈局

来源:http://www.cnblogs.com/cqhaibin/archive/2017/01/03/6243707.html
-Advertisement-
Play Games

一、自適應內部元素 利用width的新特性min-content實現 width新特性值介紹： fill-available，自動填充盒子模型中剩餘的寬度，包含margin、padding、border尺寸，他讓非block元素也可實現寬度100%; max-content：假設容器有足夠的寬度，足 ...


目錄

一、自適應內部元素

  • 利用width的新特性min-content實現
    • width新特性值介紹：
      • fill-available，自動填充盒子模型中剩餘的寬度，包含margin、padding、border尺寸，他讓非block元素也可實現寬度100%;
      • max-content：假設容器有足夠的寬度，足夠的空間，此時，所占據的寬度就是max-content，與display為inline不一樣，max-content就像white-space：nowrap一樣，不會換行的。
      • min-content：採用內部元素最小寬度值最大元素的寬度作為最終容器的寬度，最小寬度：替換元素，如：圖片的最小寬度就是圖片呈現的寬度，文本元素，如果全是中文就是一個中文的寬度，如果包含英文，預設為英文單詞不換行的寬度。
      • fit-content：實現浮動元素的水平居中，因預設情況下浮動的元素元素是不能通過margin:auto實現水平居中的，這時就需要fit-content輔助實現。
  • min-content與max-content示例代碼：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .figure01{
            width: min-content;
            margin: auto;
        }
        .figure01 img{
            width: 210px;
        }
        .figure02{
            width: max-content;
            margin: auto;
        }
        .figure02 img{
            width: 210px;
        }
    </style>
</head>
<body>
    <figure class="figure01" >
        <img src="../img/cat.png" alt=""> 
        <p>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。</p>
    </figure>
    <figure class="figure02" >
        <img src="../img/cat.png" alt="">
        <p>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。</p>
    </figure>
</body>

 

  • fit-content示例代碼：
<head>
    <meta charset="UTF-8">
    <title>float的fit-conent的實用</title>
    <style>
        .wrap{

        }
        .wrap ul{
            margin: auto;
            list-style: none; 
            width: fit-content;
        }
        .wrap ul li{
            float: left;
            margin: 0px 10px;
            background: greenyellow;
            padding: 4px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>thr</li>
            <li>fou</li>
        </ul>
    </div>
</body>

二、精確控製表格的列寬

  • 利用table的table-layout屬性設置為fixed值來實現，但需要width設置為100%
  • 代碼如下
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .divWrap{
            width: 400px;
            border: 1px solid red;
        }
        .wrap{
            table-layout: fixed;
            width: 100%;
        }
        .wrap td.one{
            width: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .wrap td.two{
            width: 80%;
        }
    </style>
</head>
<body>
    <div class='divWrap' >
        <table class="wrap" >
            <tr>
                <td class='one' >one</td>
                <td class='two' >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句其實是假文的基礎。為了讓假句在視覺質地上接近真句，我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個，然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得，實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句</td>
            </tr>
            <tr>
                <td class='one' >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句</td>
                <td class='two' >
                    <img src="../img/cat.png" alt="">
                </td>
            </tr>
        </table>
    </div>
</body>

三、根據兄弟元素的數量來設置樣式

  • nth-last-child和only-child、nth-child的應用
    • only-child：選擇只有一個子元素的元素
    • nth-child：選擇第幾個元素
    • nth-last-child：選擇第幾個元素，從最後一個開始計數
    • odd和even：表示奇數和偶數元素
    • (an+b)：n表示下標從0開始，b是偏移量，(3n+0)：表示3的倍數元素
  • nth-of-type和nth-last-of-type的應用
    • odd和even：表示奇數和偶數元素
    • (an+b)：n表示下標從0開始，(3n+0)：表示3的倍數元素
      • (-n+b)：表示選擇小於等於b的元素
  • nth-child與nth-of-type的區別
    • nth-child是以同級第一個元素開始計數
    • nth-of-type是以同級指定類型的第一個元素開始計數
    • 代碼：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 200px;
        }
        .wrap p:nth-child(2), .wrap p:nth-child(4){ /*從第一個元素開始計數*/
            background: red;
        }
        .wrap p:nth-of-type(1), .wrap p:nth-of-type(2){ /*從第一個p元素開始計數*/
            color: lightyellow;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h1>標題數據</h1>
        <p>第一行內容(第一個P標簽)</p>
        <span>這是一個span</span>
        <p>第二行內容(第二個P標簽)</p>
    </div>
</body>

  • nth-last-child選擇指定兄弟元素 li:first-child:nth-last-child(n+6):nth-last-child(-n+8)分析：
    • first-child：選擇第一個元素
    • nth-last-child(n+6)：選擇從最後一個開始計數的，下標大於6的元素
    • nth-last-child(-n+8)：選擇從最後一個開始計數的，下標小於8的元素
    • 選擇有6 - 8個兄弟元素的li。
    • 示例代碼：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            overflow: hidden;
        }
        ul li{
            float: left;
            padding: 4px 10px;
            border-radius: 4px;
            background: greenyellow;
            margin: 0px 2px;
        }
        li:first-child:nth-last-child(4),
        li:first-child:nth-last-child(4)~li{
            background: indianred;
        }
        li:first-child:nth-last-child(n+6):nth-last-child(-n+8),
        li:first-child:nth-last-child(n+6):nth-last-child(-n+8)~li{ /*匹配li有6,7,8個的ul*/
            background: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li> 
        <li>7</li> 
    </ul>
</body>

四、一幅背景，定寬內容居中

  • 可以利用margin:auto實現，但需要多一層html結構
  • 利用calc可以少一層html結構，且Css更簡潔
  • calc(50% - 300px): -之間必須要有空格，否則會解析出錯

用容器一半的寬度 - 內容塊一半的寬度

  • 容器的寬度可以不設置為100%，因為容器的最小寬度都為內容的寬度
  • 示例代碼：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        footer{
            background: url("../img/cat.png") repeat-x; 
            height: 200px; 
            color: gainsboro;
            padding: 1em calc(50% - 300px);
        }
        .wrap{
            width: 600px;
        }
    </style>
</head>
<body>
    <footer>
        <div class="wrap">
         這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句其實是假文的基礎。為了讓假句在視覺質地上接近真句，我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個，然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得，實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句       
         </div>
    </footer>
</body>

五、垂直居中

5.1、絕對定位

  • 以下兩種技巧都需要使用絕對定位
  • calc實現
    • 內容部分必須固定寬和高
  • translate實現
    • 內容部分可以自適應寬和高
    • 某些瀏覽器會導致元素模糊，可用transform-style:preserve-3d來修複，因為元素可能被放置在半個像素上
  • 示例代碼：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            position: relative;
            width: 400px;
            height: 150px;
            border: 1px solid red;
        }
        .wrap .cont{
            position: absolute;
            top: calc(50% - 30px);
            left: calc(50% - 50px);
            width: 100px;
            height: 60px;
            background: gray;
        }

        .wrap02{
            position: relative;
            width: 400px;
            height: 150px;
            border: 1px solid red;
        }
        .wrap02 .cont{
            position: absolute;
            top: 50%;
            left: 50%; 
            transform: translate(-50%,-50%);
            background: gray;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="cont">這個內容部分需要定寬和定高</div>
    </div>
    <div class="wrap02">
        <div class="cont">這個內容部分可以實現自適應</div>
    </div>
</body>

5.2、視口垂直居中 + translate

  • 1vh表示視口高度的1%, 1vw表示視口的寬度的1%
  • 當寬度 小於 < 高度時，1vmin = 1vm, 否則 1vmin = 1vh
  • 當寬度 大於 > 高度時, 1vmax = 1vm，否則 1vmax = 1vh;
  • 內容部分必須要固定寬和高
  • 示例代碼：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 18em;
            background: lightgreen;
            padding: 1em 1.5em;
            margin: 50vh auto 0;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="wrap">
        這個只能做到視口居中
    </div>
</body>

5.3、flexbox + margin:auto

  • 在flexbox時，用margin:auto可以實現水平和垂直居中，可以用 margin:0 auto設置水平居中；margin: auto 0設置垂直居中
  • 被居中元素的寬度和高度可以自適應
  • 也可以通過flex的align-items和justify-content來實現水平垂直居中
  • 示例代碼：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap01{
            display: flex;
            min-height: 10vh;
            border: 1px solid gray;
            width: 30vw;
        }
        .wrap01 .main{
            margin: auto;
            padding
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Node.js入門
    開始之前，安利一本正在看的書《站在兩個世界的邊緣》，作者程浩，上帝丟給他太多理想，卻忘了給他完成理想的時間。OK，有興趣的可以看一看。 node.js如標題一樣，我也是剛開始接觸，大家一起學習，有不當的地方望指正。node.js是做什麼的，有什麼優勢等問題。首先，它是什麼，它是採用C++語言編寫而成 ...
  • javaScript生成二維碼（支持中文，生成logo）
    資料搜索 選擇star最多的兩個 第一個就是用的比較多的jquery.qrcode.js（但不支持中文，不能帶logo）啦，第二個支持ie6+，支持中文，根據第二個源代碼，使得，jquery.qrcode.js，支持中文。 資料搜索 選擇star最多的兩個 第一個就是用的比較多的jquery.qrc ...
  • css3更改input單選和多選的樣式
    在項目開發中我們經常會遇到需要更改input單選和多選樣式的情況，今天就給大家介紹一種簡單改變input單選和多選樣式的辦法。 在這之前先簡單介紹一下:before偽類 :before 選擇器向選定的元素前插入內容。使用content 屬性來指定要插入的內容（content是必須的哦）。 相信這並不 ...
  • 如何為你的微信小程式體積瘦身？
    眾所周知，微信小程式在發佈的時候，對提交的代碼有1M大小的限制！所以，如果你正在寫一個功能稍微複雜一點的小程式，就必須得時刻小心註意你的代碼是不是快觸及這個底線了。 在設計一個小程式之初，我們就需要重點考慮這一點，採取一些方法，來避免太早的遭遇這個問題。 請避免在小程式的UI上使用大圖片，應該儘可能 ...
  • 用angular怎麼緩存父頁面數據
    angular做單頁面應用是一個比較好的框架，但是它有一定的入門難度，對於新手來說可能會碰到很多坑，也有許多難題，大部分仔細看文檔，找社區是能解決的。 但有些問題也許資料比較少，最近遇到過一個要緩存父頁面的問題，就是點擊進入子頁後，再返回時父頁面的數據要緩存下來，包括滾動條的位置。再做的過程當中查過 ...
  • JavaScript學習筆記(二)——閉包、IIFE、apply、函數與對象
    一、閉包（Closure）1.1、閉包相關的問題1.2、理解閉包二、對象2.1、對象常量（字面量）2.2、取值2.3、枚舉（遍歷）2.4、更新與添加2.5、對象的原型2.6、刪除2.7、封裝三、函數3.1、參數對象 （arguments）3.2、構造函數 3.3、函數調用3.3.1、call3.3.... ...
  • JavaScript自定義媒體播放器
    使用<audio>和<video>元素的play()和pause()方法，可以手工控制媒體文件的播放。組合使用屬性、事件和這兩個方法，很容易創建一個自定義的媒體播放器，如下麵的例子所示。 以上基本的HTML 再加上一些JavaScript 就可以變成一個簡單的視頻播放器。以下就是JavaScript ...
  • Flex 佈局教程：語法篇
    作者： 阮一峰 網頁佈局（layout）是CSS的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C提出了一種新的方案 Flex佈局，可以簡便、完整、 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類