CSS3基础知识

最新推荐文章于 2022-03-04 11:34:18 发布

AO_AEO

最新推荐文章于 2022-03-04 11:34:18 发布

阅读量304

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/AO_AEO/article/details/107187604

版权

1、什么是CSS3

如何学习

CSS是什么
CSS怎么用(快速入门)
CSS选择器(重点＋难点)
美化网页(文字，阴影，超链接，列表，渐变…)
盒子模型
浮动
定位
网页动画（特效）

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS ：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

1.2、发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS 结构分离的思想

CSS2.1 浮动定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性~

练习格式：

在这里插入图片描述

1.3、快速入门

style

基本入门

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

<!--    规范，<style>可以编写CSS的代码,每一个声明，最好使用分号结尾
        语法：
            选择器{
                声明1;
                声明2;
                声明3;
            }
-->
    <style>
        h1{
            color: red;
        }
    </style>

</head>
<body>
<h1>我是标题</h1>


</body>
</html>

建议使用这种样式

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

css优势：

内容与表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利于SEO，容易被搜索引擎收录！

1.4、CSS的3种导入方式

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

<!--    内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->

<!--行内样式：在标签元素中编写一个style属性-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法

链接式：

html

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

导入式

@import 是CSS2.1特有的！

<!--    导入式-->
    <style>
        @import url("css/style.css");
    </style>

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器

1、标签选择器：选择一类标签标签{}

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

    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #303db1;
            background: #888ebd;
            border-radius: 10px;
        }
        p{
            font-size: 80px;
        }
    </style>


</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说---</p>


</body>
</html>

2、类选择器 class ：选择所有class属性一致的标签，跨标签 .类名{}

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

    <style>
        /*类选择器的格式   .class的名称{}
        好处，可以多个标签归类，是同一个 class，可以复用

        */
        .A{
            color: #b13068;
        }
        .a{
            color: #30b14c;
        }
    </style>

</head>
<body>

<h1 class="A">标题1</h1>
<h1 class="a">标题2</h1>
<h1 class="A">标题3</h1>

<p class="A">P标签</p>

</body>
</html>

3、ID选择器：全局唯一！ #id名{}

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

    <style>
        /*id选择器：id必须保证全局唯一！
           #id名称{}
           不遵循就近原则，固定的
           id选择器> 类class选择器> 标签选择器
        */
        #A{
            color: red;
        }
        .style{
            color: green;
        }
        h1{
            color: #303db1;
        }
    </style>
</head>
<body>

<h1 id="A" class="style">标题1</h1>
<h1 class="style">标题2</h1>
<h1 class="style">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级：id>class>标签

2.2、层次选择器

1、后代选择器：在某个元素的后边祖爷爹你(后代全部)

/*后代选择器*/
/*body后的所有p标签*/
body p{
    background: #7a84e2;
}

2、子选择器一代，儿子 (只选择当前下边的一代)

/*子选择器*/
body>p{
    background: #888ebd;
}

3、相邻兄弟选择器（下边的一个）

/*相邻兄弟选择器：只有一个.相邻(向下)*/
.active+p {
    background: #30b14c;
}

4、通用选择器（下边的全部）

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #888ebd;
}

2.3、结构伪类选择器

伪类：条件

 <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #30b14c;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #303db1;
        }

        /*选择p1:定位到父元素，选择当前的第一个元素
        选中当前p元素的父级元素，选中父级元素的第一个，并且的当前元素才生效！，顺序
        */
        p:nth-child(2){
            background: #b13068;
        }
        /*选中父元素，下的p元素的第二个    类型*/
        p:nth-of-type(2){
            background: antiquewhite;
        }
    </style>

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

<!--    避免使用，class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #30b14c;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #303db1;
        }

        /*选择p1:定位到父元素，选择当前的第一个元素
        选中当前p元素的父级元素，选中父级元素的第一个，并且的当前元素才生效！，顺序
        */
        p:nth-child(1){
            background: #b13068;
        }
        /*选中父元素，下的p元素的第二个    类型*/
        p:nth-of-type(2){
            background: antiquewhite;
        }

        a:hover{
            background: #b13068;
        }
    </style>

</head>
<body>
<!--<a href="">鼠标放我这</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

在这里插入图片描述

2.4、属性选择器(常用)

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

    <style>
        /*后代选择器*/
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: antiquewhite;
            text-align: center;
            color: #888ebd;

            text-decoration: none;  /*去掉a标签下划线*/
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性名， 属性名=属性值(正则)*/
        /*存在id属性的元素
        属性选择器的格式
        a[]{}
        a
       标签里面带有id属性的标签
        */
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
        /*id=first的元素*/
        /*a[id=first]{*/
        /*    background: yellow;*/
        /*}*/

        /*class中有links的元素
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        /*a[class*="links"]{*/
        /*    background: yellow;*/
        /*}*/

        /*选中 href中以http开头的元素*/
        a[href^=http]{
            background: #b13068;
        }

        a[href$=pdf] {
            background: #888ebd;
        }
    </style>

</head>
<body>

<p class="demo">
<!--    target="_blank"新页面打开-->
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http" class="links item active" target="_blank" title="悬浮字">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

在这里插入图片描述

=		绝对等于
*=		包含等于
^=		开头等于
$=		结尾等于

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页、页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

span标签：重点要突出的字，使用span标签套起来(约定属性)

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

    <style>
        #title1{
            font-size: 50px;

        }

    </style>

</head>
<body>

欢迎学习 <span id="title1">Java</span>

</body>
</html>

3.2、字体样式

<style>
    /*font-family：字体*/
    /*font-size：字体大小*/
    /*font-weight：字体粗细*/

    body{
        font-family: "Arial Narrow",楷体;
        color: #b13068;
    }
    h1{
        font-size: 50px; /*em缩进*/
    }
    .p1{
        font-weight: bold;
        /*font: bold 20px/50px Arial;*/
    }

</style>

3.3、文本样式

1、颜色 color rgb rgba

2、文本对齐方式 text-align=center

3、首行缩进 text-indent:2em;

**4、行高 line-height: ** 单行文字上下居中！ line-height=height

5、装饰 text-decoration:

6、文本图片水平对齐: vertical-align:middle

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

<!--    颜色：-->
<!--        单词-->
<!--        #RGB 0~F  16进制
            RGBA  A:透明度(0-1)

        text-align:排版，居中
        text-indent: 2em; 段落首行缩进

        行高，和 块的高度一致，就可以上下居中
 -->
    <style>
        h1{
            color: rgb(0,255,255,0.5);
            text-align: center;/*left,right*/
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #888ebd;
            height: 50px;
            line-height: 50px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*水平对齐~参照物，a，b*/
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>

<a href="">超链接去下划线</a>

<p class="l1">下划线</p>
<p class="l2">中划线</p>
<p class="l3">上划线</p>



<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！
    魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。
    在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。
    魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都
    没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地
    界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成
    了各地热血勇士的终极目标。</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，
    却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵
    令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说
    话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽
    歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用
    热血换取至高的荣誉。</p>
<p class="p3">
    When I wake up in the morning， You are all I see; When I think about you， And how happy you make me。 You're everything I wanted; You're everything I need; I look at you and know; That you are all to me。 Barry Fitzpatrick
</p>

<p>
    <img src="images/清淋.png" alt="">
    <span>如清梦淋</span>
</p>
</body>
</html>

3.4、阴影&超链接伪类

正常情况下，a，a:hover

/*默认的颜色*/
    a{
        text-decoration: none;
        color: #000000;
    }
    /*鼠标悬浮的状态(只需要记住hover)*/
    a:hover{
        color: #b13068;
        font-size: 50px;
    }

在这里插入图片描述

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

<!--    a:link {color: #FF0000}     /* 未访问的链接 */-->
<!--    a:visited {color: #00FF00}  /* 已访问的链接 */-->
<!--    a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */-->
<!--    a:active {color: #0000FF}   /* 被选择的链接 */-->


    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态(只需要记住hover)*/
        a:hover{
            color: #b13068;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: #888ebd;
            font-size: 10px;
        }
        a:visited{
            color: #303db1;
        }
        /*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #06a7f1 10px 10px 2px;
        }
    </style>





</head>
<body>

<a href="#">
    <img src="images/黛辛.png" alt="">
</a>

<p>
    <a href="#">临风心常患,遥故梦中来</a>
</p>
<p>
    <a href="">作者：兰若生</a>
</p>
<p id="price">
    时间：2020/6/25/22:13
</p>

</body>
</html>

3.5、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#"> 音像</a>&nbsp;&nbsp;<a href="#">数字商 品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#"> 手机</a>&nbsp ;&nbsp;<a href= "#" >数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#" >厨具</a></li>
        <li><a href="#">服 饰鞋帽</a>&nbsp;&nbsp;<a href="#"> 个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#" >珠宝</a></li>
        <li><a href="#"> 食品饮料</a>&nbsp;&nbsp;<a href="#">保健食 品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#" >旅行</a>&nbsp;&nbsp;<a href=" #" >充值</a>&nbsp;&nbsp;<a href="#">票务</a>
        </li>

    </ul>
</div>


</body>
</html>

#nav{
    width: 300px;
    background: #afddf1;
}


.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #06a7f1;
}

/*ul  li*/
/*
list-style:
    none 去掉圆点
    circle 空心圆
    decimal 有序列表
    square 正方形
*/
ul{
    background: #afddf1;
}


ul li{
    height: 30px;
    list-style:none;
    text-indent: 1em;
    background: #afddf1;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.6、背景

背景颜色

背景图片

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

    <style>
        div{
            width: 1000px;
            height: 700px;
            /*border边框：边框的粗细 边框的样式 边框的颜色*/
            border: 1px solid red;
            background-image: url("images/抚望.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>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#"> 音像</a>&nbsp;&nbsp;<a href="#">数字商 品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#"> 手机</a>&nbsp ;&nbsp;<a href= "#" >数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#" >厨具</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#" >珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食 品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#" >旅行</a>&nbsp;&nbsp;<a href=" #" >充值</a>&nbsp;&nbsp;<a href="#">票务</a>
        </li>

    </ul>
</div>


</body>
</html>

#nav{
    width: 300px;
    background: #afddf1;
}


.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* 颜色，图片，图片位置，平铺方式*/
    background: red url("../images/空白三角.png") 200px 10px no-repeat;

}

/*ul  li*/
/*
list-style:
    none 去掉圆点
    circle 空心圆
    decimal 有序列表
    square 正方形
*/

ul li{
    height: 30px;
    list-style:none;
    text-indent: 1em;
    background-image: url("../images/空白三角.png");
    background-repeat: no-repeat;
    background-position: 240px 2px;

}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7、渐变

background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

4、盒子模型

4.1、什么是盒子

在这里插入图片描述
margin：外边距

padding：内边距

border：边框

4.2、边框

边框的粗细
边框的样式
边框的颜色

<style>
     h1,ul,li,a,body{
        /*body总有一个默认的外边距margin: 0*/
        margin: 0;
        padding: 0;
        text-decoration: none;
    }
    /*boder: 粗细，样式，颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }

    h2{
        font-size: 16px;
        background-color: #06a7f1;
        link-height: 30px;;
    }
    form{
        background: #878dbf;
    }
    div:nth-of-type(1)>input{
        border: 5px solid red;
    /*              dashed 虚线*/
    }
</style>

4.3、内外边框

盒子的计算方式：你这个元素到底多大？美工

在这里插入图片描述

margin+border+padding+内容的宽度

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


<!--    外边距的妙用：居中元素
        margin: 0 auto;-->
    <style>
        /*boder: 粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
            /*padding: 0 0 0 0;*/
        }

        /*
        margin:0
        margin:0 1px
        margin:0
        */

        h2{
            font-size: 16px;
            background-color: #06a7f1;
            line-height: 30px;
            color: wheat;
            margin: 0 0px;
        }
        form{
            background: #878dbf;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>


</head>
<body>

<div id="box">
    <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.4、圆角边框

4个角

<style>
    /*左上  右上  右下  左上*/

    /*圆圈：     圆角=半径！*/
    div{
        width:100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 50px 20px 10px 5px;

    }
</style>

4.5、阴影

<style>
    /*margin: 0 auto;*/
    /*前提条件：(需求)*/
    /*块元素，块元素有固定的宽度*/
    body{
        margin: 0;
    }
    #box{
        width: 0px;
        margin: 0 auto;
    }
    img{
        border-radius: 450px ;
        box-shadow: 0px 0px 50px yellow;
    }
</style>

5、浮动

5.1、标准文档流

在这里插入图片描述

块级元素：独占一行

h1~h6		p		div		列表····

行内元素：不独占一行

span		a		img		strong····

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

5.2、display

<style>
    /*display:*/
    /*block, 块元素*/
    /*inline, 行内元素*/
    /*inline-block, 是块元素，但是可以内联，在一行*/
    /*none*/
    div{
        width: 100px;
        height: 100px;
        border:1px solid red;
        display: inline;
    }
    span{
        width: 100px;
        height: 100px;
        border:1px solid red;
        display: inline-block;/*即是行内元素也是块元素*/
    }
</style>

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

5.3、float

左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #f00 dashed;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px #00f dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

5.4、父级边框塌陷的问题

clear

/*
clear：right; 右侧不允许有浮动元素
clear：left;  左侧不允许有浮动元素
clear：both;  两侧不允许有浮动元素
clear：none;
*/

解决方案：

增加父级元素的高度~

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

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

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


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

overflow

在父级元素中增加一个 overflow: hidden;

父类添加一个伪类：after

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

小结:

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素的高度

简单，元素假设有了固定的高度，就会被限制
overflow

简单，下拉的一些场景避免使用
父类添加一个伪类: after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用！

5.5、对比

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~

6、定位

6.1、相对定位

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

<!--    相对定位
        相对于自己原来的位置进行偏移~
        -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #06a7f1;
        }
        #first{
            background-color: #888ebd;
            border: 1px dashed #b13068;
            position: relative;/*相对定位*/
            top: -20px;/*上*/
            left: 20px;/*左*/

        }
        #second{
            background-color: #06a7f1;
            border: 1px dashed #30b14c;

        }
        #third{
            background-color: #878dbf;
            border: 1px dashed #B721FF;
            position: relative;
            bottom: 10px;/*下*/
            right: 20px;/*右*/


        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位：position: relative;

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

            top: -20px;/*上*/
            left: 20px;/*左*/
            bottom: -10px;/*下*/
            right: 20px;/*右*/

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: coral;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #06a7f1;
            left: 200px;
            top: -100px;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>



</body>
</html>

6.2、绝对定位

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

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素
在父级元素范围内移动

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

<!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 #06a7f1;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #888ebd;
            border: 1px dashed #b13068;
        
        }
        #second{
            background-color: #06a7f1;
            border: 1px dashed #30b14c;
            position: absolute;
            right: 30px;
            top: -10px;
        }
        #third{
            background-color: #878dbf;
            border: 1px dashed #B721FF;

        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.3、固定定位 fixed

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

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*fixed, 固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

6.4、z-index

在这里插入图片描述
图层~

z-index：默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/伏剑.jpg" alt=""></li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2020/7/7</li>
        <li>地点: 家</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 600px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 20px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 600px;
    height: 25px;
    top: 216px;
}
.tipText {
    color: #878dbf;
    /*z-index: 0;*/

}
.tipBg{
    background: #21D4FD;
    opacity: 0.5;/*背景透明度*/
    filter: alpha(opacity=50);
}

7、动画

https://www.runoob.com/css3/css3-tutorial.html

8、总结

在这里插入图片描述

https://www.bilibili.com/video/BV1YJ411a7dy

AO_AEO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础知识

1、什么是CSS3如何学习CSS是什么CSS怎么用(快速入门)CSS选择器(重点＋难点)美化网页(文字，阴影，超链接，列表，渐变…)盒子模型浮动定位网页动画（特效）1.1、什么是CSSCascading Style Sheet 层叠级联样式表CSS ：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动1.2、发展史CSS1.0CSS2.0 DIV（块）+CSS，HTML与CSS 结构分离的思想CSS2.1 浮动定
复制链接

扫一扫