CSS — 让网页美起来（二）

文章目录

没有看过 CSS — 让网页美起来（一）的小伙伴可以点这里哦

4、盒子模型

如下，这就是一个盒子（在网页中可以直接点击进行边距的设置）

在这里插入图片描述

4.1、内外边距

margin：外边距，就是边框外面露出来的部分

border：边框

padding：内边距，和外边距类似，就是边框内部的部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <link href="css/style.css" rel="stylesheet">
</head>

<body>

<div id="app">
    <h2>用户登录</h2>
    <form method="post" action="#">
        <div id="app2">
            <div>
                <span><a href="#" class="password-login">密码登录</a></span>
                <span><a href="#" class="sms-login">短信登录</a></span>
            </div>
            <div>
                <input type="text" class="userName" value="会员名/邮箱/手机号" size="25">
            </div>
            <div>
                <input type="text" class="userPassword" value="请输入登录密码" size="25">
            </div>
        </div>
        <div>
            <input type="button" value="登录">
        </div>

    </form>
</div>


</body>
</html>

/*主要看 padding、margin 和 border 的设置
设置方法为：padding 0px 0px 0px 0px 分别代表上、下、左、右边距
可以省略写，如 padding 0px 0px 代表上下、左右边距
或者直接 padding 0px 代表边距全部一样*/

#app {
    
    
    border: 3px solid black;
    /* 这就用到了背景渐变的功能 */
    background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);
}

body {
    
    
    width: 350px;
    /* 将各元素的外边距全部设置为 0 */
    margin: 0;
}

/* 设置第一个框体中所有元素居中对齐 */
#app {
    
    
    text-align: center;
}

#app2{
    
    
    /* 设置第二个框体中所有元素左对齐，并且缩进 1 个字符 */
    text-align: left;
    text-indent: 1em;
}

h2 {
    
    
    /* 同样是上边章节的老知识，利用 font 一次性设置字体样式 */
    font: bolder normal 30px 微软雅黑, serif;
    text-align: center;
}

/* 两个文本框的样式设置（宽度、高度、外边距），建议直接在网页中调试，然后获取参数 */
.userName, .userPassword{
    
    
    width:22em;
    height: 30px;
    margin: 5px;
}

/* 设置文本框上边的两种 登录方式 的字体样式 */
.password-login,.sms-login{
    
    
    font: bolder normal 16px 微软雅黑, serif;
    text-decoration: none;
    color: black;
}

/* 添加鼠标悬停效果 */
.password-login:hover, .sms-login:hover {
    
    
    color: orange;
    text-decoration: underline;
}

/*  设置按钮样式 */
input[type=button] {
    
    
    background: #f40;
    color: white;
    border: none;
    /* 出现了内边距设置，利用 padding 属性 */
    padding: 10px 134px;
    font-size: 16px;
    /* 也是老知识点，如何设置圆角边框 */
    border-radius: 3px;
    /* 又出现的外边距设置，利用 margin 属性 */
    margin: 15px;
}

登录界面效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EXwSRQyG-1641005340515)(E:\Note\image\CSS\23.png)]$

在接下来的学习中，我会将 HTML 代码和 CSS 代码分开写，同时会大量使用 < div > 标签，也会时不时添加新样式的设置方式

4.2、圆角边框

在之前的代码中，我们设置圆角边框都是使用一个参数，这样做四个角的变化幅度完全一致，其实在 border-radius 中，可以最多设置 4 个数字，分别代表左上、右上、右下、左下（顺时针）的圆角弧度值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <link href="">
</head>

<body>

<div></div>

</body>
</html>

div {
    
    
    width: 50px;
    height: 50px;
    border: 10px solid red;
    border-radius: 10px 40px 40px 10px;
}

然后就出现了 D（嘿嘿），还可以画其他图形

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B3TrDRpT-1641005340516)(E:\Note\image\CSS\24.png)]$

5、浮动

首先在介绍浮动之前，先介绍一下什么是 diaplay。

5.1、display

使用 display 可以指定块元素还是行元素

display 有三种属性值：
inline：行元素
block：块元素
inline-block：块元素，但是具有行元素的性质


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>

        div{
      
      
            height:100px;
            width:150px;
            border:5px solid red;
            /* 虽然这是一个块元素，但是通过设置 display 属性可以变成行元素 */
            display: inline;
        }

        span{
      
      
            height:100px;
            width:150px;
            border:5px solid red;
        }

    </style>
</head>

<body>

<div>这是一个块元素</div>
<span>这是一个行元素</span>

</body>
</html>

原本块元素和行元素在页面的效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z41coRbV-1641005340516)(E:\Note\image\CSS\25.png)]$

添加 display: inline 后的页面效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8fKV5s09-1641005340517)(E:\Note\image\CSS\26.png)]$

从中我们可看出块元素是独占一行的，而行元素是可以多个占用一行，在网页中常用于导航栏的实现，下面我们就开始利用 display 的知识点写一个 bilibili 导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="css/style2.css"/>
</head>

<body>
<div class="app">

    <header class="nav-header">
        <div class="head-contain">
            <div class="head-left">
                <a href="#">主站</a>
                <a href="#">番剧</a>
                <a href="#">游戏中心</a>
                <a href="#">直播</a>
                <a href="#">会员购</a>
                <a href="#">漫画</a>
                <a href="#">赛事</a>
                <a href="#">下载APP</a>
            </div>
            <div class="middle">
                <form method="post" action="#">
                    <label>
                        <input class="text1" type="text" name="research-text" size="30"/>
                    </label>
                </form>
            </div>
            <img src="../../resource/image/戳戳.JPG" class="Troye" width="40" height="40" alt="图片未加载出来！">
            <div class="right">
                <a href="#">大会员</a>
                <a href="#">消息</a>
                <a href="#">动态</a>
                <a href="#">收藏</a>
                <a href="#">历史</a>
                <a href="#">创作中心</a>
            </div>
            <input type="button" class="touGao" value="投稿">
        </div>
    </header>

</div>

</body>
</html>

CSS 代码如下：

/* 设置所有的元素外边距、内边距都为 0，并且都是行元素 */
* {
    
    
    padding: 0;
    margin: 0;
    display: inline;
}

/* 设置所有标签的基本样式 */
.head-contain a {
    
    
    text-decoration: none;
    font-size: 20px;
    color: black;
    margin-left: 5px;
    margin-right: 5px;
}

/* 设置鼠标悬停效果 */
.head-contain a:hover {
    
    
    color: orange;
    text-decoration: underline;
}

/* 设置文本输入框 */
.text1{
    
    
    padding: 6px;
    /* 文本框左、右外边距 */
    margin-left: 50px;
    margin-right: 50px;
}

/* 设置图片（戳戳） */
.Troye{
    
    
    border-radius: 100px;
}

/* 投稿按钮的设置 */
.touGao {
    
    
    width: 55px;
    padding: 9px;
    background-color: #fb7299;
    border: none;
    font: bolder normal 14px 宋体, serif;
    color: white;
    border-radius: 2px;
    text-align: center;
    /* 左、右外边距 */
    margin-left: 10px;
    margin-right:10px;
}

页面效果（凑合看吧）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a1LRILiD-1641005340518)(E:\Note\image\CSS\27.png)]$

5.2、float

float 就是浮动的意思，如同 word 文档图片排版（例如实现文字围绕图片的样式）。下面还是先看例子（图片是从 win 11 屏幕截的）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/style.css" rel="stylesheet"/>
</head>

<body>

<div class="app">
    <h1>标题标题</h1>
    <img src="../../resource/image/风景1.png" class="image1" alt="图片无法显示" name="风景1">
    <img src="../../resource/image/风景2.png" class="image2" alt="图片无法显示" name="风景2">
    <img src="../../resource/image/风景3.png" class="image3" alt="图片无法显示" name="风景3">
    <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
</div>

</body>
</html>

CSS 代码：

* {
    
    
    margin: 0;
    padding: 0;
}

.app {
    
    
    border: 5px solid red;
}

/* 设置 display 属性值为 inline-block，把他们挤到一行 */
.image1 {
    
    
    border: 5px dashed #bfbf19;
    display: inline-block;
}

.image2 {
    
    
    border: 5px dashed #6161d0;
    display: inline-block;
}

.image3 {
    
    
    border: 5px dashed #3ce53c;
    display: inline-block;
}

.app p {
    
    
    font-size: 30px;
    font-family: 宋体, serif;
    color: black;
    text-indent: 2em;
    text-align: left;
}

.app h1 {
    
    
    font: bolder normal 50px 宋体, serif;
    color: black;
    text-align: center;
}

网页界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qOLQhCFs-1641005340520)(E:\Note\image\CSS\28.png)]$

然后我们要开始浮动操作了：

* {
    
    
    margin: 0;
    padding: 0;
}

.app {
    
    
    border: 5px solid red;
    display: inline-block;
}

/* 设置 display 属性值为 inline-block，把他们挤到一行 */
.image1 {
    
    
    border: 5px dashed #bfbf19;
    display: inline-block;
    /* 仔细看，这边添加了新的属性 float 代表浮动的方式：
    left - 元素浮动到其容器的左侧
    right - 元素浮动在其容器的右侧
    none - 元素不会浮动（将显示在文本中刚出现的位置） */
    float: left;
}

.image2 {
    
    
    border: 5px dashed #6161d0;
    display: inline-block;
    /* 向左浮动 */
    float: left;
}

.image3 {
    
    
    border: 5px dashed #3ce53c;
    display: inline-block;
    /* 向右浮动，这样设置完后文字应该会跑到第二张图片和第三张图片的中间 */
    float: right;
}

.app p {
    
    
    font-size: 30px;
    font-family: 宋体, serif;
    color: black;
    text-indent: 2em;
    text-align: left;
}

.app h1 {
    
    
    font: bolder normal 50px 宋体, serif;
    color: black;
    text-align: center;
}

浮动效果，可以看到文字确实挤到第二张图片和第三张图片的中间，有些文字甚至挤到第二张图片的下方，这是因为图片 2 下方还有空隙，可以填充文字：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PuidSljA-1641005340521)(E:\Note\image\CSS\29.png)]$

注意：单单这样写其实是不推荐的，因为我现在改变网页的大小，样式会发生变化。例如我现在缩小网页，排版立马发生变化，这在网页的实际应用中是一种不好的体验。我们需要消除这种不好的现象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rN7ibN7j-1641005340522)(E:\Note\image\CSS\30.png)]$

解决方法：

/* 
设置 clear 属性：
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
*/

5.3、父级边框塌陷问题

什么叫父级边框塌陷呢？我们先来看个例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父级边框塌陷问题</title>
    <link href="css/style.css" rel="stylesheet"/>
</head>

<body>

<div class="app">
    <div class="image1">
        <h2>我是图片1</h2>
        <img src="../../resource/image/风景1.png" alt="图片无法显示" name="风景1">
    </div>
    <div class="image2">
        <h2>我是图片2</h2>
        <img src="../../resource/image/风景2.png" alt="图片无法显示" name="风景2">
    </div>
    <div class="image3">
        <h2>我是图片3</h2>
        <img src="../../resource/image/风景3.png" alt="图片无法显示" name="风景3">
    </div>
</div>

</body>
</html>

* {
    
    
    margin: 0;
    padding: 0;
}

.app {
    
    
    border: 5px solid red;
}

.image1 {
    
    
    border: 5px dashed orange;
    display: inline-block;
    /*float: left;*/
}

.image2 {
    
    
    border: 5px dashed orange;
    display: inline-block;
    /*float: left;*/
}

.image3 {
    
    
    border: 5px dashed orange;
    display: inline-block;
    /*float: right;*/
}

.image1 h2, .image2 h2, .image3 h2 {
    
    
    text-align: center;
    color: black;
    font-size: 30px;
    font-family: 宋体, serif;
}

正常效果（未浮动前）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngEeE0eQ-1641005340523)(E:\Note\image\CSS\31.png)]$

现在我们取消注释的语句，实现图片漂浮，可以看到红色的边框直接缩小，快变成一条线了，这种现象就是父级边框塌陷问题：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wtyvjlc-1641005340524)(E:\Note\image\CSS\32.png)]$

一共有四种解决父级边框塌陷的方法

增加父级元素的高度（不够灵活）
增加一个空的< div > 标签（避免使用）
使用 overflow（hidden 属性值有弊端）
利用父级的伪类，after（推荐）

/* 1、增加父级元素的高度 */

.app {
    
    
    border: 5px solid red;
    /* 设置固定高度（超过浮动元素的最高值就行） */
    height:400px
}

最终效果1：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCGsHHcy-1641005340524)(E:\Note\image\CSS\33.png)]$

<!-- 2、添加空的 div 标签，并且是设置不允许两旁漂浮元素，内外边距都为 0 -->

<div class="clear"></div>

.clear{
    
    
    clear:both;
    margin:0;
    padding:0;
}

最终效果2：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YQmJ01LP-1641005340526)(E:\Note\image\CSS\34.png)]$

/* 3、使用 overflow */

.app {
    
    
    border: 5px solid red;
    /* overflow 属性值：
    visible：默认值，内容不会被修剪，会呈现在元素框之外
    hidden：内容会被修剪，并且其余内容是不可见的
   	scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
    auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 */
    overflow: hidden;
}

最终效果3：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u2sIJQaA-1641005340526)(E:\Note\image\CSS\35.png)]$

/* 4、使用父级的伪类，after
非常推荐，这种方法既不用改变 HTML 文件中的内容，也不会像 hidden 一样切割原内容，这种利用类来改变内容的方法是设计中非常重要的一点！ */

.app:after{
    
    
    content: '';
    display: block;
    clear:both;
}

最终效果4：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mncSVpWd-1641005340527)(E:\Note\image\CSS\36.png)]$

6、定位

6.1、相对定位

利用 position 属性的 relative 值进行相对位置的设置，实现元素的偏移

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

<div class="app">
    <div class="first">我是第一个盒子</div>
    <div class="second">我是第二个盒子</div>
    <div class="third">我是第三个盒子</div>
</div>

</body>
</html>

然后我们对这三个盒子进行调色处理，方便看清楚

.body {
    
    
    margin: 0;
    padding: 0;
}

.app, .first, .second, .third {
    
    
    padding: 10px;
    margin: 15px;
}

.app {
    
    
    border: 10px solid orange;
}

.first {
    
    
    border: 5px dashed black;
    display: block;
}

.second {
    
    
    border: 5px dashed black;
    display: block;
}

.third {
    
    
    border: 5px dashed black;
    display: block;
}

初始效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttAHo9vs-1641005340528)(E:\Note\image\CSS\37.png)]$

现在我们使用 position 实现盒子的偏移

.first {
    
    
    border: 5px dashed black;
    display: block;
    /* 开启 position，使用 relative（相对定位）
    注：-20px 是相对于上方的距离，正数就是增大距离，而负数就是减小距离，千万别搞反了！ */
    position: relative;
    /* 向左上偏移 */
    top: -20px;
    left: -20px;
}

.second {
    
    
    border: 5px dashed black;
    display: block;
}

.third {
    
    
    border: 5px dashed black;
    display: block;
    position: relative;
    /* 向右下偏移 */
    bottom: -20px;
    right: -20px
}

偏移后我效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fubnbpea-1641005340529)(E:\Note\image\CSS\38.png)]$

注意点：相对定位是相对于原来的位置进行偏移，而且偏移后原本的位置也会被保留（否则马上发生边框塌陷问题了）

6.2、绝对定位

绝对定位其实也好理解，就是相对于父级元素或者浏览器的位置（不是相对于自己原本的位置哦）

<!-- 还是使用那三个盒子 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

<div class="app">
    <div class="first">我是第一个盒子</div>
    <div class="second">我是第二个盒子</div>
    <div class="third">我是第三个盒子</div>
</div>

</body>
</html>

稍微调一下色，方便区分

.body {
    
    
    margin: 0;
    padding: 0;
}

.app, .first, .second, .third {
    
    
    padding: 10px;
    margin: 15px;
}

.app {
    
    
    border: 10px solid orange;
    /* 设置这个是为了让元素相对于父级边框进行定位，而不是默认的浏览器边框 */
    position: relative;
}

.first {
    
    
    border: 5px dashed black;
    text-align: center;
    display: block;
}

.second {
    
    
    border: 5px dashed black;
    display: block;
    background: orange;
    /* 开启绝对定位，距离父边框 -10px */
    position: absolute;
    top:-10px;
}

.third {
    
    
    border: 5px dashed black;
    text-align: center;
    display: block;
}

界面效果：

可以看到原本第二个盒子的位置消失了，所以绝对定位就是这么回事

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WaWYmeJB-1641005340530)(E:\Note\image\CSS\39.png)]$

6.3、固定定位

固定定位顾名思义就是把位置固定死了，不管你浏览器如何使用滚动条，元素的位置都不会改变

<!-- 老盒子 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

<div class="app">
    <div class="first">我是第一个盒子</div>
    <div class="second">我是第二个盒子</div>
    <div class="third">我是第三个盒子</div>
</div>

</body>
</html>

再添点颜色，不断丰富下

.body {
    
    
    margin: 0;
    padding: 0;
}

.app, .first, .second, .third {
    
    
    padding: 10px;
    margin: 15px;
}

.app {
    
    
    border: 10px solid orange;
    height:10000px;
}

.first {
    
    
    border: 5px dashed black;
    text-align: center;
    background: #ec6060;
    display: block;
    /* 使用固定定位，我现在什么也不添加，就按照默认的来 */
    position: fixed;
}

.second {
    
    
    border: 5px dashed black;
    display: block;
    background: orange;
    text-align: center;
}

.third {
    
    
    border: 5px dashed black;
    text-align: center;
    background: greenyellow;
    display: block;
}

未拉动滚动条的界面：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YwT57IM8-1641005340531)(E:\Note\image\CSS\40.png)]$

现在我们向下滚动，可以看到红色盒子的位置相对浏览器没有发生变化，这就叫固定定位

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2arnEOn-1641005340531)(E:\Note\image\CSS\41.png)]$

有许多应用场景，例如固定导航栏、固定一键返回顶部的按钮等等，十分广泛

6.4、z-index & 透明度

这个就简略讲一下，可以看到现在上边的红色盒子和橘色盒子重叠在一起，这就是层级的概念，一层叠一层，可以使用 z-index 属性改变元素的层级，数值越大，越先显示。

注意：Z-index 仅能在定位元素上奏效！

.second {
    
    
    border: 5px dashed black;
    display: block;
    background: orange;
    text-align: center;
	/* 必须添加这句话，否则这个元素没有被定位，z-indexb 不会生效 */
    position: fixed;
    /* 这样橘色盒子就会跑到上面去了 */
    z-index: 999;
}

透明度就是使用 opacity 属性，改变元素的透明度，值越小越透明（0~1）（提一嘴就行了）

.third {
    
    
    border: 5px dashed black;
    text-align: center;
    background: greenyellow;
    display: block;
    /* 使用 opacity 让盒子三变透明 */
    opacity: 0.5;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdAZZHFF-1641005340532)(E:\Note\image\CSS\42.png)]$

那么到这里，CSS 的介绍就基本结束了。剩下的样式设置都需要自己看文档，例如响应式布局如何实现（如果有时间再单独出一篇吧）、初级动画（用 JavaScript 不香嘛）等等，这些都是需要读者自己去摸索，自己学来的东西才记忆深刻！
那么感谢看到这里的你，博主水平有限，写的不好还望手下留情
最后点个赞，收个藏，关个注，就是对博主最大的支持！