【CSS详解】一文掌握CSS基础用法（下）

2022-11-23 79

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【CSS详解】一文掌握CSS基础用法（下）

7.背景

背景颜色：background

background-image:url(""); /* 默认是全部平铺的 */
background-repeat:repeat-x; /* 水平平铺 */
background-repeat:repeat-y; /* 垂直平铺 */
background-repeat:no-repeat; /* 不平铺 */

背景图片

<!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("images/ceshi.jpeg");
            /*默认是全部平铺的*/
        }
        .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>

8.渐变

渐变背景网址：https://www.grabient.com

径向渐变、圆形渐变

body{
     background-color: #0cd7f3;
     background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
       body{
            background-color: #08AEEA;
            background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
        }
        div{
            width: 500px;
            height: 200px;
            border: 1px solid mediumaquamarine;
            background-image: url("img/str.png");
            /* 默认是全部平铺的 */
        }
        /*水平平铺*/
        .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>

五、盒子模型

1.什么是盒子模型

margin：外边距

padding：内边距

border：边框

2.边框

边框的粗细

边框的样式

边框的颜色

/* 边框大小 边框样式 边框颜色 */
border: 1px solid #000000;

3.内外边距

margin：外边距

padding：内边距

/*
    当margin/padding
    有一个参数，上下左右，都有边距
    有二个参数，上下，左右，表示
    四个参数时，上，右，下，左，表示
*/
 margin：0 1px 2px 3px;

盒子的计算方式：元素到底多大？

margin+border+padding+内容宽度

4.圆角边框

4个角

div{
    width: 100px;
    height: 50px;
    margin: 30px;
    border: 2px solid red;
    border-radius: 50px 50px 0px 0px; /* 和边距的参数一样，左上，右上，右下，左下 */
}

5.阴影

/*
h-shadow    必需。水平阴影的位置。允许负值。
v-shadow    必需。垂直阴影的位置。允许负值。
blur    可选。模糊的距离。
color    可选。阴影的颜色。
*/
text-shadow: h-shadow v-shadow blur color;

六、浮动

1.标准文档流

块级元素：独占一行

<!-- h1-h6 p div ... -->

行内元素：不独占一行

<!-- span a img strong ... -->

注意：块级元素可以存在行内元素。

2.display

block：块元素；

inline：行内元素；

inline-block：是块元素，但是可以内联，在一行；

这也是一种实现行内元素排列的方式，但是我们很多情况用float。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dispaly</title>
    <style>
        /*
        block: 块元素
        inline: 行内元素
        inline-block: 块元素，但是可以内联
        none: 隐藏
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

3.float

左右浮动

浮动的元素会脱离标准流

div{
    float: right;/*向右浮动*/
}

4.父级边框塌陷问题

/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;  不允许有浮动元素
*/
.text{
    clear:both;
}

解决父级边框塌陷问题：

增加父级元素高度

#body{
    border: 1px #000 solid;
    height: 800px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

父类添加一个伪类：after

#body:after{
    content: '';
    display: block;
    clear: both;
}

七、定位

1.相对定位

相对定位：positon：relstive；

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。

top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */

2.相对定位

定位：基于xxx定位，上下左右

没有父级元素定位的前提下，相对于游览器定位

假设父级元素村咋i定位，我们通常会相对于父级元素进行便宜

在父级元素范围内移动

相对于父级或者游览器的位置，进行指定的偏移，绝对定位后，它仍然在标准文档流中，原来的位置不会被保留

div{
  position: absolute;/*绝对定位*/
  top: -20px;/*相对当前的位置 向上移动，负值相反方向*/
  left: 20px;/*相对当前的位置 向右移动*/
}

3.固定定位

固定定位使元素的位置相对于浏览器窗口来定位

即使窗口是滚动的它也不会移动

div{
    position: fixed;/*固定定位*/
    right: 0;
    bottom: 0;
}

4.z-index

图层，用定位的时候会产生会和其他元素重叠

相当于上一层盖住了下一层的内容

div{
    z-index:2;
}

八、动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s; /* 动画执行时间 */
}
@keyframes myfirst{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>