CSS进阶内容——布局技巧和细节修饰

秋落雨微凉

发布于 2022-10-25 18:08:35

1.9K0

发布于 2022-10-25 18:08:35

文章被收录于专栏：秋落雨微凉Java开发栏秋落雨微凉Java开发栏

CSS进阶内容——布局技巧和细节修饰

我们在之前的文章中已经掌握了CSS的大部分内容，但仍有一些内容我们没有涉略，这篇文章就是为了补充前面没有涉及的内容，为我们的知识做出补充并且介绍一些布局技巧

当然，如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园。

元素的显示与隐藏

在我们的网页设计中，也许会有广告的设计部分

广告旁常常存在×号来进行广告的关闭，而这部分内容在CSS中就被称为元素的显示与隐藏

本质：

让一个元素在页面中隐藏或显示出来

我们常常提供三种方法：

display
visibility
overflow

让我们分开一一介绍：

display方法(重点：JS搭配使用)

display属性用来设置一个元素应如何显示

我们常用的属性有：

display：none 隐藏元素
display：block 使元素转化为块级元素并且显示元素

注意：当display设置为none时，原有位置不再占用！！！

我们下面给出代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 当我们将display变化为none时，不仅元素隐藏，而且其原有位置也不再占有 -->

    <style>
        .peiqi {
            height: 200px;
            width: 200px;
            background-color: aqua;
            /* 当我们把display设置为none，元素隐藏，且原有位置不再占有，下方的div会占用当前div的位置 */
            display: none;
        }

        .qiaozhi {
            height: 200px;
            width: 200px;
            background-color: red;
            /* 想让元素重新出现，可以设置为block，block通常为默认选项，不用设置 */
            display: block;
        }
    </style>
</head>
<body>
    <div class="peiqi"></div>
    <div class="qiaozhi"></div>
</body>
</html>

display常与JS搭配使用，我们在后面章节讲到JS会详细讲述

visibility方法

visibility属性用来表示元素隐藏或者显示

我们常用的属性有：

visibility:hidden 隐藏
visibility：visible 显示

注意：当visibility元素为hidden时，元素虽然隐藏，但仍保留原来位置，下方元素无法占用！！！

overflow方法

overflow只对盒子中的溢出部分做出反馈

我们常用的属性有：

overflow：visible 显示
overflow：hidden 隐藏
overflow：scroll 滑动条
overflow：auto 在超出时加上滑动条

我们下面给出示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 我们分别展示四种情况 -->

    <style>
        div {
            height: 200px;
            width: 100px;
            font-size: 14px;
            background-color: pink;
        }

        .w1 {
            /* 使元素隐藏 */
            overflow: hidden;
        }

        .w2 {
            /* 使元素滑动 */
            overflow: scroll;
        }

        .w3 {
            /* 使元素自动化滑动 */
            overflow: auto;
        }

        .w4 {
            /* 使元素显示 */
            overflow: visible;
        }
    </style>
</head>
<body>
    <div class="w1">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28]  ，原初测试于2019年6月21日开启 [1]  ，再临测试于2020年3月19日开启 [2]  ，启程测试于2020年6月11日开启 [3]  ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4]  。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
    <div class="w2">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28]  ，原初测试于2019年6月21日开启 [1]  ，再临测试于2020年3月19日开启 [2]  ，启程测试于2020年6月11日开启 [3]  ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4]  。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
    <div class="w3">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28]  ，原初测试于2019年6月21日开启 [1]  ，再临测试于2020年3月19日开启 [2]  ，启程测试于2020年6月11日开启 [3]  ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4]  。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
    <div class="w4">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28]  ，原初测试于2019年6月21日开启 [1]  ，再临测试于2020年3月19日开启 [2]  ，启程测试于2020年6月11日开启 [3]  ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4]  。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
</body>
</html>

细节修饰

接下来我们介绍一些CSS中可以帮助美化界面的一些方法

我们会依次介绍到：

CSS三角设计
鼠标样式
表单轮廓线
文本域禁止拖动指令
vertical-align表单文本对齐
图片底部空白问题
溢出文字采用省略号代替

CSS三角设计

我们在网页设计中常常看到三角形标志，而这些标志需要一些小技巧才能够完成

设计三角的要求：

div盒子的高度和宽度均设计为0
我们通过div盒子的边框来形成三角，边框设置为：任意px solid transport
然后我们通过单独的边框设计，来创建不同方向的三角：border-top-color：red；

我们下面给出代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 我们来设计一个三角形 -->

    <style>
        div {
            /* 首先不需要高和宽 */
            height: 0;
            width: 0;
            /* 整体边框设计为透明，粗细看需求设计 */
            border: 10px solid transparent;
            /* 然后我们根据需求设计三角朝向和颜色 */
            border-top-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

鼠标样式

我们在网页中常常会看到鼠标的各种样式

最常见的就是鼠标，然后我们可以看到小手，包括移动，文字和禁止符号

在CSS中有专门的语法来控制鼠标样式

div {
	cursor：deafult; 默认
    cursor：pointer；小手
    cursor：move；   移动
    cursor：text；   文本
    cursor：not-allowed；禁止
}

我们直接采用行内CSS来讲解以上鼠标样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li style="cursor: default;">我是默认</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: move;">移动</li>
        <li style="cursor: text;">文本选择</li>
        <li style="cursor: not-allowed;">禁止符号</li>
    </ul>
</body>
</html>

表单轮廓线

我们在使用input的框架时，通常会有默认的蓝色框架，但这样并不美观

所以我们常常去除掉这个蓝色框架：

input {
	outline : none;
}

文本域禁止拖动指定

我们在使用textare时，在右下角文本域是可以进行拖拽的

但我们在网页设计时不能随意让用户更改界面，所以我们同样提供了方法禁止用户拖拽文本域：

textare {
    resize ； none；
    /* 当然，如果想要去除掉文本域的蓝色边框，我们也可采用outline方法*/
    outline ： none；
}

vertical-align表单文本对齐

官方解释：

针对于行内/行内块元素做所有元素的垂直对齐方法

语法：

标准格式：vertical-align：positon；
顶部对齐： vertical-align：top；
垂直对齐： vertical-align：middle；
底部对齐： vertical-align：bottom；（默认）

以上vertical-align常用于使表单内的图片与文本对齐

图片底部空白问题

问题来源：

当我们插入图片时，图片并非紧贴框架，当你设置border时会发现图片与div中有一定距离
原因主要是因为行内块元素和文字的基线对齐

解决方法：

给图片添加vertical-align属性（推荐）
使图片转化为块级元素display：block；

溢出文字采用省略号代替

当我们的框架承受不住过多文字时，可能出溢出或者突然终止，这样的网页设计都是不合标准的

所以我们希望采用省略号来使整个文本不显得过于生硬

我们分别讲述单行文本溢出和多行文本溢出的解决方法：

单行文本溢出：
1. 强制文本一行显示： white-space：nowrap；
2. 超出部分省略： overflow：hidden；
3. 省略部分用省略号显示： text-overflow：ellipsis；
多行文本溢出：(方法过于复杂且兼容性不好，不推荐使用)
1. 设置省略超出部分且让省略部分让省略号代替： overflow：hidden； text-overflow：ellipsis；
2. 弹性伸缩盒子模型显示： display： -webkit-box；
3. 限制在一个块元素显示的文本的行数： -webkit-line-clamp: 2;
4. 设置或检索伸缩盒对象的子元素排列方法: -webkit-box-orient: vertical;

我们下面给出代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 首先我们先讲解单行文本溢出 -->

    <style>
        .lone {
            /* 我们先设计一下盒子大小和bcc */
            height: 20px;
            width: 100px;
            font-size: 10px;
            line-height: 20px;
            background-color: pink;

            /* 第一步,单行文本当然要先设置文本强制在一行内显示 */
            white-space: nowrap;
            /* 第二步:将超出内容省略 */
            overflow: hidden;
            /* 第三步:我们要用省略号来代替省略内容 */
            text-overflow: ellipsis;
        }
    </style>

    <!-- 然后我们来介绍一下多行文本溢出 -->

    <style>
        .more {
            /* 我们先设计一下盒子大小和bcc */
            /* 注意,这里需要手动设置高度,使多余行数内容不显示出来 */
            height: 40px;
            width: 100px;
            font-size: 10px;
            line-height: 20px;
            background-color: pink;
            margin-top: 20px;

            /* 1.设置省略超出部分且让省略部分让省略号代替： */
            overflow: hidden;
            text-overflow: ellipsis;

            /* 2.弹性伸缩盒子模型显示： */
            display: -webkit-box;

            /* 3.限制在一个块元素显示的文本的行数： */
            -webkit-line-clamp: 2;

            /* 4.设置或检索伸缩盒对象的子元素排列方法: */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="lone">游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。</div>
    <div class="more">游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。</div>
</body>
</html>

常见布局技巧

我们可以采用一些技巧帮助我们更好地布局：

margin负值运用

采用负值解决边框组合问题

我们在横向排版采用float时，在存在边框时，左右两个边框会导致中间边框变粗

这时我们就可以采用margin方法使整体向左移动，使边框进行覆盖，从而减小边框粗细程度

我们给出案例解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 我们希望去除中间边框粗大的部分 -->

    <style>
        ul>li {
            float: left;
            list-style: none;
            height: 200px;
            width: 100px;
            background-color: pink;
            border: 1px solid red;

            /* 我们使外边距为-1,相当于向左移动 */
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

变色压制性

在上方我们使用margin去除掉边框变粗问题后

如果我们希望在hover该盒子后使边框发生颜色变化，但后方边框会压住前方边框导致效果失效

所以我们给出两种方法来解决：

使用相对定位position：relative；
使用层级选择器z-index：1；

我们下面给出代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 我们希望去除中间边框粗大的部分 -->

    <style>
        ul>li {
            float: left;
            list-style: none;
            height: 200px;
            width: 100px;
            background-color: pink;
            border: 1px solid red;

            /* 我们使外边距为-1,相当于向左移动 */
            margin-left: -1px;
        }

        ul>li:hover {
            border-color: yellow;
            /* 使用positon或者z-index来解决 */
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

文字围绕浮动元素

当我们文字和图片同时使用时，为了防止图片压住文字导致文字显示不全，我们常常采用文字围绕图片的形式

而实现这一目的的主要解决方法是采用float的浮动原理

我们通过一个案例来解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            width: 200px;
            background-color: pink;
            margin: 100px auto;
        }

        .img {
            /* 设置浮动,使文字和图片在同一行且不覆盖 */
            float: left;
            height: 90px;
            width: 50px;
            /* 我们可以稍微设计边框使图片和字体相差一些距离使其更加美观 */
            margin-right: 5px;
        }

        .img img {           
            /* 设置图片和图片盒子一样大 */
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 首先我们创建一个大盒子来同时装图片和文字 -->
    <div class="box">
        <!-- 创建一个装图片的盒子来控制大小 -->
        <div class="img"><img src="../../../Resources/picture/1.jpeg" alt=""></div>
        <div class="chinese">纱雾老师,你好鸭</div>
    </div>
</body>
</html>

行内块巧妙运用

我们常常需要用到页面控制框架,我们将给出一个案例用来讲解行内块应用于页面控制框架

案例图片:

案例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 对整体去除边距 */
        * {
            padding: 0;
            margin: 0;
        }

        /* 对大盒子进行设计 */
        .box {
            /* 使全部元素水平居中 */
            text-align: center;
        }

        /* 对盒子的a做出设计 */
        .box a{
            /* 当a作为行内块元素,就可以设计高宽,并受水平居中影响 */
            display: inline-block;
            width: 36px;
            height: 36px;
            line-height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            text-decoration: none;
            color: #333;
        }

        /* 对最前面和最后面的单独设计宽度使其放下内容 */
        .box .prev,
        .box .next{
            width: 85px;
        }

        /* 对两个需要单设的元素设计 */
        .box .current,
        .box .cls{
            border: 1px solid transparent;
            background-color: transparent;
        }

        /* 设置跳转框的大小 */
        .box input{
            width: 45px;
            height: 36px;
            outline: none;
            border: 1px solid #ccc;
        }

        .box button{
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="cls">...</a>
        <a href="#" class="next">下一页&gt;&gt;</a>
        <!-- 我们还需要一个跳转页面设计 -->
        跳转到
        <input type="text">
        页
        <input type="button" value="确定">
    </div>
</body>
</html>

整体CSS初始化

我们在进行网页设计时,CSS本身会有很多不美观的设定

我们需要在开始前就对CSS进行初始化以便于我们后期的网页设计

我们将给出CSS框架中所有需要初始化的部分并给出相关解释,下面给出代码:

/* 所有标签需要清除内外边距 */
* {
    margin: 0;
    padding: 0;
}

/* em斜体操作 */
em {
    font-style: normal;
}

/* li需要去除前方小圆点 */
li {
    list-style: none;
}

/* 图片需要设置无边框(照顾低版本浏览器),并设置垂直对齐用来解决图片底部有缝隙问题 */
img {
    border: 0;
    vertical-align: middle;
}

/* 我们希望经过button时,鼠标变为小手 */
button {
    cursor: pointer;
}

/* 对于链接我们去除底部线,设置颜色 */
a {
    color: #666;
    text-decoration: none;
}

/* 对于链接我们经过时换色 */
a:hover {
    color:#333;
}

/* 对于button和input,我们希望进行设置好字体需求 */
button,input {
    font-family: 微软雅黑;
}

/* 对于body整体我们可以先定好字体的相关设置 */
body {
    background-color: #fff;
    font: 12px/1.5 微软雅黑;
    color: #333;
}

/* 最后我们需要设置clearfix,在设计时可以直接使用 */
.clearfix {
    *zoom: 1;
}

.clearfix::after{
    visibility: hidden;
    clear: both;
    display: block;
    content: "";
    height: 0;
}