CSS揭祕實戰技巧 - 結構與佈局[六]

全目錄

本系列文章，主要是圍繞css3屬性，實現咱們常見的各類效果，這些效果都是咱們實戰開發中常常能夠用到的效果：

1. css揭祕實戰技巧- 背景與邊框 [一]
2. css揭祕實戰技巧- 形狀 [二]
3. css揭祕實戰技巧 - 視覺效果[三]
4. css揭祕實戰技巧 - 字體排印[四]
5. css揭祕實戰技巧 - 用戶體驗[五]
6. css揭祕實戰技巧 - 結構與佈局[六]
7. css揭祕實戰技巧 - 過渡與動畫[七]

前言

1. 自適應內部元素
2. 精確控制表格列寬
3. 根據兄弟元素的數量來設置樣式
4. 滿幅的背景，定寬的內容
5. 緊貼底部的頁腳

一：自適應內部元素

首先，咱們看一下想要獲得的效果：

基本的html結構以下：

<div>
    <img src="./img/kobe3.png" alt="">
    <p>科比布萊恩特，一個偉大的時代，一個偉大的球員，還有一羣偉大的球迷</p>
</div>
複製代碼

若是沒有設置任何樣式時，效果以下：

如何讓文字去自適應圖片的寬度呢？這就是問題的關鍵點了，如何讓元素去自適應內部元素？而不是去自適應它的父元素呢？答案就是width: min-content: 表示該元素的寬度將被解析爲它內部最大的不可斷行的元素的寬度（例如：最寬的單詞，圖片，或者具備固定寬度的盒元素）

代碼以下：

div {
    width: min-content;//表示該div的寬度是由內部最大的不可斷行元素的寬度所決定
}
複製代碼

因爲min-content是css3特性，部分瀏覽器可能不支持，因此咱們須要一個平穩的回退方案，那就是提供一個固定的max-width值

div {
    max-width: 300px;
    max-width: min-content;
}
div img{
    max-width: inherit;
}
複製代碼

二：精確控制表格列寬

你們在實際開發的過程當中，尤爲是後臺管理系統，表格的使用會很是頻繁，可是對於，表格的寬的控制，可能有時候並無達到咱們想要的效果，緣由可能仍是咱們對於表格的相關屬性不是很清楚，尤爲是table-layout：auto/fixed；

1. auto爲默認值，表示自適應單元格中的內容，此時設置寬度無效。
2. fixed表示均等分割，即寬度是等分均分的，固然，咱們也能夠設置寬度。

首先，咱們看一下auto的效果：

代碼以下：

//html
<table>
    <tr>
        <th>序號</th>
        <th>文案1</th>
        <th class="third">文案2</th>
        <th>操做</th>
    </tr>
    <tr>
        <td>1</td>
        <td>科比布萊恩特，一個偉大的時代，一個偉大的球員，還有一羣偉大的球迷</td>
        <td class="third">科比布萊恩特，一個偉大的時代，一個偉大的球員，還有一羣偉大的球迷科比布萊恩特，一個偉大的時代，一個偉大的球員，還有一羣偉大的球迷科比布萊恩特，一個偉大的時代，一個偉大的球員，還有一羣偉大的球迷</td>
        <td>
            <a href="">編輯</a>
        </td>
    </tr>
</table>
複製代碼

//css
table{
    width: 800px;
    border-collapse: collapse;
    width: 100px;// 此時設置了寬度也不會生效，由於此時table-layout爲auto。
}
table tr td, table tr th {
    border: 1px solid #ddd;
}
複製代碼

那咱們在上面的基礎上，給table加一個table-layout:fixed，效果以下：

此時，咱們看到部分單元格文本較多，如何隱藏呢？這時，咱們能夠用text-overflow:ellipsis , 該屬性要同時配合：overflow:hidden;white-space:nowrap;以及一個指定的寬度才能夠生效。 代碼以下：

table{
    width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
}
table tr td, table tr th {
    border: 1px solid #ddd;
}
table tr th:nth-child(3) {
    width: 100px; 
}
table tr td:nth-child(3) {
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
複製代碼

最終的效果以下：

此時，有個細節要注意：咱們直接設置td的寬度爲100px,效果是沒有生效的，必須設置th的寬度爲100px，單元格的寬度才生效。

這是由於table渲染的時候，通常是根據第一行的樣式去渲染，此時第一行是th構成的，因此此時th沒有設置寬度，即便td設置了寬度，渲染的時候同一列的其餘單元格仍是根據th去渲染，因此此處，咱們直接設置td的寬度是無效的，固然你們也能夠把th構成的這一行刪掉，而後再設置td的寬度，這時就能夠生效了,由於此時第一行就是td構成的

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

咱們在實際開發過程當中，也會遇到下面這種場景：咱們須要根據兄弟元素的數量去設置不一樣的樣式。

那麼咱們就來看看這種效果到底該如何經過css去實現呢？

html結構以下：

<ul>
    <li></li>
    <li></li>
    <li></li>
    //可能有更多或者更少
</ul>
複製代碼

1. 首先咱們看一下:only-child

li:only-child {
    //表示只有一個子元素的時候的樣式
}
複製代碼

2. :first-child:last-child

li:first-chlid:last-chlid {
    //表示元素是第一個元素，同時又是最後一個元素，說明此時只有一個子元素
}
複製代碼

3. 接着上面的思路：

li:first-child:nth-last-child(4){
    //表示第一個元素又是倒數第四個元素，說明此時有四個子元素。
}
複製代碼

好啦，這個時候，咱們就知道了，怎麼樣在css判斷兄弟元素的數量。

4. 接下來，咱們實現一個效果: 有四個或者四個以上元素，且第一個爲綠色，從第二個開始其餘爲紅色

ul li {
    display: inline-block;
    width: 50px;
    height: 60px;
    background: green;
    margin: 10px;
}
ul li:first-child:nth-last-child(n + 4) ~ li{
    background: red;
}
複製代碼

實現的效果以下：

5. 再進一步，指定一下範圍，有2個到4個子元素的時候，設置爲紅色 代碼以下：

ul li {
    display: inline-block;
    width: 50px;
    height: 60px;
    background: green;
    margin: 10px;
}
ul li:first-child:nth-last-child(n + 2):nth-last-child(-n + 4) ~ li{
    background: red;
}
複製代碼

此時，若是ul下面有2到4個li時，就會應用咱們的樣式，不然不會。

四：滿幅的背景，定寬的內容

首先，咱們看一下一個最多見的頁腳的效果：背景鋪滿整個寬度，內容居中

上面的效果就是咱們標題所說的：滿幅的背景，定寬的內容，一般遇到這種效果，咱們最直接的解決方案可能就是：外面一層div設置背景，裏面再嵌套一個div顯示內容，而後設置裏面的div居中顯示，就這樣實現了，這可能也是大多數人的思路，那麼，若是隻是用一層div去實現呢？ 代碼以下：

div {
    backgroud: #333;
    padding: 10px;//部分瀏覽器不支持calc回退方案
    padding: 10px calc(50% - 450px); // 此時，咱們設置的中間內容區域定寬是900px
}
複製代碼

五：緊貼底部的頁腳

首先，html結構以下：

<header>
    <p>頭部1</p>
    <p>頭部2</p>
</header>
<main>
    內容
</main>
<footer>
    <p>尾部1</p>
    <p>尾部3</p>
</footer>
複製代碼

1. 固定高度的頁腳

header {
    height: 60px;
    background: green;
}
main {
    min-height: calc(100% - 60px - 100px);
    background: #ddd;

}
footer {
    height:  100px;
    background: cornflowerblue;
}
複製代碼

2. 高度不固定，根據內容自適應高度的頁腳

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header{
    background: green;
}
main {
    background: #ddd;
    flex: 1;
}
footer{
    background: cornflowerblue;
}
複製代碼