CSS（第二篇）

最新推荐文章于 2024-09-13 23:28:46 发布

weixin_45947655

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量407

点赞数 3

文章标签： css

本文链接：https://blog.csdn.net/weixin_45947655/article/details/108977912

版权

https://blog.csdn.net/weixin_45947655/article/details/108917392
CSS第一篇链接

3.7背景

设置边框：

border（边框）: 1px（粗细） solid（实线） red（红色）;

在背景内填充满某个图片：

background-image: url("../tupian/jiantou.jpg");

横向重复填充图片：

background-repeat: repeat-x;

纵向重复填充图片：

background-repeat: repeat-y;

仅产生一个图片：

background-repeat: no-repeat;

background是一个集合，里面的位置，颜色，大小之类的还可以单独拿出来设置。

background:red url("../tupian/jiantou.jpg") 880px 0px no-repeat;

如：这个是位置的调整。

background-position: 260px 2px;

Code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("../tupian/jiantou.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>


</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>

</body>
</html>

3.8渐变

整个页面的背景是由第一个颜色逐渐变成第二个颜色。

50deg是调整页面的条纹，可以自己运行一下，0deg和50deg的区别运行一下立马就清楚了

#21D4FD是第一个颜色，#B721FF是第二个颜色。后面的百分比为颜色比例。

body{
    background-image: linear-gradient(50deg,#21D4FD 0%, #B721FF 100%);
}

4.盒子模型

4.1什么是盒子模型

1.margin外边距：

外边距不包含我们在模块内书写的代码内容，它只是模块的周围大小，但也属于模块。

2.padding内边距：

内边距位于模块内部。

3.border边框：

边框即为模块的边框。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8z5gqmJ-1602224619585)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20201004144901959.png)]

4.2边框

border: 3px solid black;

1.边框的粗细（3px）

2.边框的样式（solid）

3.边框的颜色（black）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        #app{
            width: 500px;
            height: 300px;
            background-color: #908989;
            border: 2px solid red;
        }
        form{
            background-color: green;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed black;
        }
        h2{
            background-color: red;
            line-height: 50px;
        }
    </style>
</head>
<body>

    <div id="app">
        <h2>会员登录</h2>
        <form action="#">
            <div>
                <span>用户名：</span>
                <input type="text">
            </div>
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
            <div>
                <span>邮箱：</span>
                <input type="text">
            </div>
        </form>
    </div>

</body>
</html>

4.3内外边距

外边距margin

内边距padding

<style>（body接上节内容）
    body{
        margin: 0;
    }
    #app{
        width: 500px;
        height: 300px;
        border: 2px solid red;
        margin: auto;
    }
    h2{
        background-color: red;
        line-height: 50px;
        margin: 0;
    }
    input{
        border: 2px solid black;
    }
</style>

4.4圆角边框

1.圆角边框设置：border-radius: 100px 75px 50px 25px;

左上角100px，右上角75px，右下角50px，左下角25px.

也可以给图片设置圆角；img{border-radius: 64px;}

<style>
    div{
        width: 100px;
        height: 100px;
        background: blue;
        border: 10px solid red;
        border-radius: 100px 75px 50px 25px;
    }
    img{
            border-radius: 64px;
    }
</style>

4.5阴影

box-shadow: 0px 0px 30px red;

阴影效果：向上，下偏移，清晰度，颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            margin: auto;
        }

        img{
            border-radius: 64px;
            box-shadow: 0px 0px 30px red;
        }

    </style>
</head>
<body>
    <div>
        <img src="../tupian/jiantou.jpg" alt="">
    </div>
</body>
</html>

5.浮动

5.1标准文档流

块级元素：独占一行

h1~h6, p, div 列表...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之，则不可以~

5.2display

display可以切换属性，block为块元素属性，inline为行内元素属性。

display: inline-block;是同时拥有块元素和行内元素属性的切换操作。

它可以使元素在一行显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .A{
            padding: 10px;
            border: 2px solid red;

        }
        .B{
            padding: 10px;
            border: 2px solid yellow;
            display: inline-block;
            float: left;
        }
        .C{
            padding: 10px;
            border: 2px solid blue;
            display: inline-block;
            float: right;
        }
        .D{
            padding: 10px;
            border: 2px solid green;
            display: inline-block;
            float: right;
        }
    </style>
</head>
<body>
    <div class="A">
        <div class="B">
            <img src="../tupian/jiantou.jpg" alt="">
        </div>
        <div class="C">
            <img src="../tupian/digeng.png" alt="">
        </div>
        <div class="D">
            开始Java学习
        </div>
    </div>
</body>
</html>

5.3float

代码接上；

float为浮动；

浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

float: right（或left）

分别向右和左浮动。

clear为清除浮动操作。

下列为两边同时清除浮动（或右边或左边）

clear: both（或right或left）;

它的意思是，当设置该属性以后，将不允许被设置方向的一侧或两侧存在元素（不论是否紧挨），但显而易见的是我们不可能把旁边的元素给删了，所以只能改变自己的位置已达到某一侧或两侧不存在元素。

这样操作实现下来就会使得被设置该操作的元素会单独在一行其某一侧或两侧不存在元素。

5.4父级边框塌陷的问题

在你实现上述代码操作时会发现父级边框div会变成很小的一行，整个页面看起来乱糟糟的。要想解决这个问题我们仅需要这样做就行了：

解决方法1：

直接设置一个父级div的高度和宽度，把它固定起来。

解决方法2：

增加一个没有任何内容的div，清除两边浮动以使它会出现在最底部。

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

CSS：

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

解决方法3：

在父级div的CSS里面添加一个

overflow: hidden;

这里我自己也不明白为什么可以解决父级塌陷的问题。

但我也学到了关于overflow的用法。

overflow这个属性定义溢出元素内容区的内容会如何处理。

常见的操作有visible，hidden，scroll，auto；

（1）默认就是visible，溢出的内容会继续在父级区域外面继续展示；

（2）hidden就是溢出的内容会被隐藏将不再展示出；

（3）scroll会在父级加上滚动条，可以像浏览网页一样通过滚动条来查看那些无法同时全部装在父级区域的内容；

（4）auto和scorll差不多，但会自动调节需不需要滚动条。

解决方法4：

父类添加一个伪类

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

after相当于在其后执行一些操作

conten为定义一些内容，display: block是把它视为块元素，clear: both使它出现在最底部;

6.定位

6.1相对定位

position: relative

什么是相对定位？

“生成相对定位的元素，相对于其正常位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。”

这是菜鸟教程给出的解释。

该操作为实现相对定位：

position: relative;
top（或left或bottom或right）: 10px;

所以这里你可以理解为往某元素的上面（top方向）增加了10个像素。

增加了10个像素就意味着该元素由于自己的上面出现了10个像素的某样东西导致自己被挤下去10个像素。

所以top：10px就是相对于上面自己往下移了10像素。

这里一定要理解，top（或left或bottom或right）：x px，指的是往某个方向增加了x个像素（x可以为负）自己也就朝着反方向移动了x像素。

下面代码是对以上知识的小练习，可以运行试一试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            margin: 20px;
            padding: 10px;
            height: 300px;
            width: 300px;
            border: 1px solid red;
        }
        a{
            color: white;
            text-decoration: none;
            margin: 0;
            padding: 0;
            line-height: 100px;
            width: 100px;
            display: inline-block;
            text-align: center;
            background-color: pink;
        }
        .a1:hover{
            background-color: blue;
        }
        .a2{
            position: relative;
            left: 95px;
        }
        .a2:hover{
            background-color: blue;
        }
        .a3{
            position: relative;
            top: 100px;
        }
        .a3:hover{
            background-color: blue;
        }
        .a4{
            position: relative;
            top: 100px;
            left: 95px;
        }
        .a4:hover{
            background-color: blue;
        }
        .a5{
            position: relative;
            bottom: 100px;
            left: 100px;
        }
        .a5:hover{
            background-color: blue;
        }
    </style>
</head>
<body>

    <div id="box">
        <a class="a1" href="#">链接1</a>
        <a class="a2" href="#">链接2</a>
        <a class="a3" href="#">链接3</a>
        <a class="a4" href="#">链接4</a>
        <a class="a5" href="#">链接5</a>
    </div>

</body>
</html>

6.2绝对定位

position：absolute

绝对定位相对于最近position不为static的父级元素来定位（在没有人为设置的情况下，元素默认position都是static）。偏移规则仍和相对定位一样

可以通过设置 “left”, “top”, “right” 以及 “bottom” 属性给目标元素定位。

所以一般没有设置position的情况下，会相对于浏览器来定位。

这里有一点与相对定位不同的是，相对定位时，原位置的内容仍然被保留了，即后面的元素不会因为前面的元素相对定位跑到其他地方而补上去。

但，绝对定位不一样，只要你让它偏移了哪怕一点点，后面的元素都会视为前面没有东西，然后补上去，这会导致他们看起来重合了。这需要注意起来。

偏移规则仍和相对定位一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
            position: relative;
        }
        #first{
            border: 1px dashed yellow;
            background-color: aquamarine;
        }
        #second{
            border: 1px dashed  blue;
            background-color: aquamarine;
            position: absolute;
            left: 200px;
            bottom: -100px;
        }
        #third{
            border: 1px dashed green;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3固定定位

position：fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

这个就是直接相对于窗口设定位置，不会因为一个网页上下滚轮就变位置了。只要你打开那个网页，它就一直在那个固定的位置，不论怎么翻滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2000px;
        }
        .A{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .B{
            height: 50px;
            width: 50px;
            background-color: blue;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>


</head>
<body>

    <div class="A">div1</div>
    <div class="B">div2</div>

</body>
</html>

6.4z-index

z-index: 1;

z-index是一个设置层级的操作。

下面的例子你可以亲自运行一下。

.tipText和.tipBg是两个列表内容，.tipBg是空的没有内容，但我们给他设置了一个黑色的背景颜色。 .tipText是一段文字。

.tipText{
    color: white;
    z-index: 0;
}

当我们通过定位，把他们移到同一个地方时。

你会发现，z-index: 1时，白色的字体出现在黑色的背景上面。

z-index: 0时，黑色的背景上面什么也没有。

这就是z-index设置层级的作用。表示该元素在第几层，这个例子因为元素少，所以是1，其实你设置成999也是一样的，表示它在第几层。

.tipBg{
    background-color: black;
    opacity: 0;
}

下面的opacity是设置透明度的，0是完全透明，你看不见黑色的背景。1就是完全不透明，和不设置是一样的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 300px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            height: 300px;
            border: 2px solid red ;
        }
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        #content ul{
            position: relative;
        }
        .tipText,.tipBg{
            position: absolute;
            width: 300px;
            height: 25px;
            top: 200px;
        }
        .tipText{
            color: white;
            z-index: 1;
        }
        .tipBg{
            background-color: black;
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="../tupian/laji.png" alt=""></li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球基地</li>
    </ul>
</div>

</body>
</html>

关于CSS大致就先介绍这么多，平时确实拿不出太多时间学课外内容。