CSS揭秘实战技巧 - 结构与布局[六]

怼烎@ 2022-10-01 05:52 215阅读 0赞

## 全目录 ##

本系列文章，主要是围绕css3属性，实现我们常见的各种效果，这些效果都是我们实战开发中经常可以用到的效果：

1.  [ css揭秘实战技巧- 背景与边框 \[一\]][css_- _]
2.  [ css揭秘实战技巧- 形状 \[二\]][css_- _ 1]
3.  [css揭秘实战技巧 - 视觉效果\[三\] ][css_ - _]
4.  [css揭秘实战技巧 - 字体排印\[四\]][css_ -]
5.  [css揭秘实战技巧 - 用户体验\[五\]][css_ - 1]
6.  [css揭秘实战技巧 - 结构与布局\[六\]][css_ - 2]
7.  [css揭秘实战技巧 - 过渡与动画\[七\]][css_ - 3]

## 前言 ##

> 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 {
        //表示只有一个子元素的时候的样式
    }
    复制代码

1.  :first-child:last-child

li:first-chlid:last-chlid {
        //表示元素是第一个元素，同时又是最后一个元素，说明此时只有一个子元素
    }
    复制代码

1.  接着上面的思路：

li:first-child:nth-last-child(4){
        //表示第一个元素又是倒数第四个元素，说明此时有四个子元素。
    }
    复制代码

好啦，这个时候，我们就知道了，怎么样在css判断兄弟元素的数量。

1.  接下来，我们实现一个效果: 有四个或者四个以上元素，且第一个为绿色，从第二个开始其他为红色

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;
    }
    复制代码

实现的效果如下：

1.  再进一步，指定一下范围，有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;
    }
    复制代码

转载于:https://juejin.im/post/5cbdb144f265da038d0b4452

[css_- _]: https://juejin.im/post/5cb45c565188251b2f3a5706
[css_- _ 1]: https://juejin.im/post/5cb82c475188253b454b74ee
[css_ - _]: https://juejin.im/post/5cbdafcbf265da037b6110f5#heading-7
[css_ -]: https://juejin.im/post/5cbdb049f265da034d2a1495
[css_ - 1]: https://juejin.im/post/5cbdb0e6f265da03ab2327ed
[css_ - 2]: https://juejin.im/post/5cbdb144f265da038d0b4452
[css_ - 3]: https://juejin.im/post/5cbdb196f265da03a22f6475