CSS

2022/6/17 23:26:11

编程Tag： 选择器 css 元素 background border 正正文文

本文主要是介绍CSS，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS：

学习视频-狂神说CSS：视频链接

CSS

码出高效：Java开发手册

源码之家

模板之家

element

飞冰

HTML + CSS + JavaScript

结构 + 表现 + 交互

什么是CSS

如何学习：百度→菜鸟教程

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

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

1.2、发展史

CSS1.0

CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

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>

建议使用这种规范

html与css分离

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>

    <!-- 优先级：就近原则：行内样式 > 内部样式 >or< 外部样式 -->

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

</body>
</html>

1、行内样式

<h1 style="color: red">我是标题</h1>

2、内部样式

<!-- 内部样式 -->
<style>
    h1{
        color: green;
    }
</style>

3、外部样式

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

拓展：外部样式两种方法

链接式

html

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

导入式 @import

@import是CSS2.1特有的！

<!-- 导入式：弊端，样式多了会先显示骨架，再显示样式，存在延时 -->
<style>
    @import "css/style.css";
    /*@import url("css/style.css");*/
</style>

2、选择器

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

2.1、基本选择器

标签选择器：选中一类标签 标签{}
类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}
id 选择器：全局唯一！#id名{}

1、标签选择器

h1{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /*标签选择器
            格式：(h1{}，p{} ...)
                标签名称{}
        */
        h1{
            color: #f4e;
            background: #7e7;
            border-radius: 10px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

    <h1>糖果学Java</h1>
    <h1>糖果学前端</h1>
    <p>闺蜜思雨</p>

</body>
</html>

2、class (类)选择器

.tangGuo{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*类选择器
            格式：(.tangGuo{} ...)
                .class的名称{}
            好处：
                可以多个标签归类，是同一个class，可以复用
        */
        .tangGUo{
            color: #3f98e8;
        }
        .siYu{
            color: #bf00ff;
        }
    </style>
</head>
<body>

	<h1 class="tangGUo">标题1</h1>
	<h1 class="siYu">标题2</h1>
	<h1 class="tangGUo">标题3</h1>
    <p class="siYu">P标签</p>

</body>
</html>

3、id 选择器

siYu{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id选择器 ：必须保证全局唯一！
            格式：(#tangGuo{}，#siYu{} ...)
                #id名称{}
            优先级：
                不遵循就近原则，固定的
                id选择器 > class选择器 > 标签选择器
        */
        #siYu{
            color: #bf00ff;
        }
        #tangGUo{
            color: #3f98e8;
        }
        #shuMin{
            color: #77ee77;
        }
    </style>
</head>
<body>

    <h1 id="siYu">标题1</h1>
    <h1 id="tangGUo">标题2</h1>
    <h1 id="shuMin">标题3</h1>

</body>
</html>

4、优先级：

id > class > 标签

2.2、高级选择器

1、层次选择器

1、后代选择器：在某个元素的后面

/*后代选择器*/
body p{
    background: yellow;
}

2、子选择器，一代，儿子

/*子选择器*/
body>p{
    background: yellow;
}

3、相邻兄弟选择器，同辈

/*相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p{
    background: yellow;
}

4、通用选择器，向下兄弟元素

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*p{
            background: yellow;
        }*/
        /*后代选择器*/
        /*body p{
            background: red;
        }*/
        /*子选择器*/
        /*body>p{
            background: green;
        }*/
        /*相邻兄弟选择器：只有一个，相邻（向下）*/
        /*.active + p{
            background: blue;
        }*/
        /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: cyan;
        }

    </style>
</head>
<body>

    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p class="active">p7</p>
    <p>p8</p>
    <p>p9</p>

</body>
</html>

2、结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <!-- 避免使用，class，id选择器 -->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: red;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: blue;
        }

        /*选中 p1 定位到父元素，选中当前的第一个元素，按顺序选择
            选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
        */
        body p:nth-child(1){
            background: yellow;
        }

        /*选中父元素，下的p元素的第二个，按类型选择
            选中当前p元素的父级元素，选中父级元素中第一个当前元素
        */
        p:nth-of-type(2){
            background: #bf00ff;
        }
    </style>
</head>
<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>

</body>
</html>

3、属性选择器（常用）

id + class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        .demo a{
            float: left;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background: #bf00ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性名， 属性名 = 属性值（正则）
            = 绝对等于
            *= 包含这个元素
            ^= 以这个开头
            $= 以这个结尾
        */
        /*存在id属性的元素  a[]{}*/
        /*a[id]{
            background: yellow;
        }*/
        /*id=first的元素*/
        /*a[id=first]{
            background: #3f98e8;
        }*/
        /* class中有 links 的元素，这个选择不靠谱*/
        /*a[class*="links"]{
            background: red;
        }*/
        /*选中href中以http开头的元素*/
        a[href^="https://"]{
            background: aqua;
        }
        /*选中href中以pdf结尾的元素*/
        a[href$="pdf"]{
            background: #77ee77;
        }

    </style>
</head>
<body>

    <p class="demo">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="https://www.cnblogs.com/ZhaiTangGuo/" class="links item active" target="_blank " title="test">2</a>
        <a href="images/123.html" class="links item">3</a>
        <a href="images/1.png" class="links item">4</a>
        <a href="images/1.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="acd.doc" class="links item last">10</a>
    </p>

</body>
</html>

= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

3、美化网页元素

3.1、为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮，才能吸引客户
凸显页面的主题
提高用户的体验

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、字体样式

font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

<!---
    font-family：字体
    font-size：字体大小
    font-weight：字体粗细
    color：字体颜色
-->
<style>
    body{
        font-family: "Arial Black",楷体;
        color: #6e1b1b;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bolder;
    }

</style>

3.3、文本样式

颜色–>color rgb rgba
文本对齐方式–>text-align：center
首行缩进–>text-indent：2em
行高–>line-height：单行文字上下居中！line-height=height
下划线–>text-decoration
文本图片水平对齐：vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>

    <!--
        颜色：
            单词
            RGB 0~F
            RGBA A:0~F 或者 0~1 或者 0%~100%
        text-align : 排版 ，居中
        text-indent: 2em，段落首行缩进两个字母
        line-height: 行高， 和块的高度一致，就可以上下居中
        text-decoration: none 去除下划线
        vertical-align: 文本 图片，水平对齐的方式
    -->
    <style>
        h1{
            /*color: rgba(0,255,255,0.5);*/
            /*color: rgba(0,255,255,50%);*/
            color: #0f08;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: magenta;
            height: 200px;
            line-height: 50px;
        }
        /*上划线*/
        .l1{
            text-decoration: overline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*下划线*/
        .l3{
            text-decoration: underline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*文本 图片，水平对齐*/
        img,span{
            vertical-align: middle;
        }

    </style>
</head>
<body>

<a href="">123</a>

<p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p>

<h1>标题</h1>
<p class="p1">
    正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正，正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正，正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正，正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正
</p>
<p>
    文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文，文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文，文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文，文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文
</p>
<p class="p2">
    queryEntryWtuTuYtWearTrtEachClassDigitTuYtWearTrtEachClass，queryEntryWtuTuYtWearTrtEachClassDigitTuYtWearTrtEachClass，queryEntryWtuTuYtWearTrtEachClassDigitTuYtWearTrtEachClass，queryEntryWtuTuYtWearTrtEachClassDigitTuYtWearTrtEachClassI
</p>
<p>
    <img src="images/1.gif" alt="心心相印" height="200px">
    <span>abcdeferwerrewrwe</span>
</p>

</body>
</html>

3.4、阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: deepskyblue 10px 10px 5px;
}

3.5、超链接伪类

正常情况下，a，a:hover

/*默认的状态*/
a{
    text-decoration: none;
    color: #000;
}
/*鼠标悬浮的状态（只需要记住 : hover）*/
a:hover{
    color: blue;
    font-size: 1.2em;
}

3.6、列表样式

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

</body>
</html>

css代码：

/*ul li*/
/*
list-style:
    none 去掉圆点
    circle 空心圆
    decimal 数字
    square 正方形
*/
ul{
    background: #ddd;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7、背景样式

背景颜色：

background

背景图片

<style>
	/*
	div 块元素
        display: inline-block; 行内块元素
		background-repeat: 
            默认: 全部平铺
            no-repeat: 不平铺
            repeat-x: X轴平铺
            repeat-y: Y轴平铺
        */
    div {
        width: 1200px;
        height: 1200px;
        border: 1px solid red;
        background-image: url("images/1.gif");
        display: inline-block;
        /*默认是全部平铺的*/
    }
    .div1{
        background-repeat: no-repeat;
    }
    .div2{
        background-repeat: repeat-x;
    }
    .div3{
        background-repeat: repeat-y;
    }
</style>

练习

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

</body>
</html>

css代码：

div{
    width: 500px;
    background: #ddd;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*背景颜色，图片，图片位置，平铺方式*/
    background: #f7f url("../images/2.gif") 465px 0 no-repeat;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/3.gif");
    background-repeat: no-repeat;
    background-position-x: 446px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
}

3.8、渐变

渐变背景网址
径向渐变
圆形渐变

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

    <!-- 径向渐变，圆形渐变 -->
    <style>
        body{
            background-color: #21d4fd;
            background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
        }
    </style>
</head>
<body>

</body>
</html>

4、盒子模型

4.1、什么是盒子模型

盒子模型

margin：外边距

padding：内边距

border：边框

4.2、边框

border：粗细样式颜色

1、边框的粗细

2、边框的样式

3、边框的颜色

代码练习

<style>
    /*body总有一个默认的外边距margin: 0，常见操作*/
    h1,h2,ul,ol,li,a,body{
        margin: 0;
        padding: 0;
    }
    /*border: 粗细，样式，颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }
    h2{
        font-size: 16px;
        text-align: center;
        background: #edb3f6;
        line-height: 30px;
    }
    form{
        background: #ddd;
    }
    div>form div:nth-of-type(1) input{
        border: 3px solid green;
    }
    div>form div:nth-of-type(2) input{
        border: 3px dashed red;
    }
    div>form div:nth-of-type(3) input{
        border: 3px solid blue;
    }
</style>

4.3、内外边距

外边距的妙用：居中元素
margin/padding-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置

<!-- 外边距的妙用：居中元素 -->
<style>
    /*border: 粗细，样式，颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
        margin: 0 auto;
    }
    /*
    margin: 0
    		上下左右
    margin: 0 1px
    		上下 左右
    margin: 0 1px 1px
    		上 左右 下
    margin: 0 1px 2px 3px
    		上 右 下 左
	padding与上面一样
    */
    h2{
        font-size: 16px;
        text-align: center;
        background: #edb3f6;
        line-height: 30px;
        color: white;
        margin: 0 1px;
    }
    form{
        background: #ddd;
    }
    input{
        border: 1px solid black;
    }
    div:nth-of-type(1){
        padding: 5px;
    }
</style>

盒子模型尺寸计算：

margin+border+padding+内容宽度

总结：

body总有一个默认的外边距，常见操作：初始化

margin:0;
padding:0;
text-decoration:none;

4.4、圆角边框

border-radius 有四个参数（顺时针），左上->右上->右下->左下；圆圈：圆角=半径

<!--
    左上 右上 右下 左下，顺时针
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 40px 30px 20px 10px;
    }
</style>

4.5、阴影

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

    <!--
        margin: 0 auto;块元素居中
        text-align: center;文本居中，图片居中
    -->
    <style>
        div{
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        img{
            border-radius: 200px;
            box-shadow: 0px 0px 50px #ff0;
        }
    </style>
</head>
<body>

<div></div>
<div>
    <img src="images/1.gif" alt="">
</div>


</body>
</html>

5、浮动

5.1、标准文档流

文档流

块级元素：独占一行

 h1~h6  p  div  列表 ...

行内元素：不独占一行

span  a  img  strong ...

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

5.2、display（重要）

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

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

none：消失

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

    <!--
        block 块元素
        inline 行内元素
        inline-block 行内元素-块元素
        none 消失
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>

    <div>div块元素</div>
    <span>span行内元素</span>

</body>
</html>

1、这个也是一种实现行内元素排列的方式，但是很多清空都是用float

5.3、float

左右浮动 float

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

    <style>
        #father{
            border: 1px #000 solid;
        }
        .div1,.div2,.div3{
            border: 1px #f00 dashed;
            display: inline-block;
            float: left;
        }
        .div4{
            border: 1px #f00 dashed;
            display: inline-block;
            float: left;
            clear: both;
        }
    </style>
</head>
<body>

<div id="father">
    <div class="div1">
        <img src="images/1.gif" alt="">
    </div>
    <div class="div2">
        <img src="images/2.gif" alt="">
    </div>
    <div class="div3">
        <img src="images/3.gif" alt="">
    </div>
    <div class="div4">
        wirwrhwerhuierhueruuew
    </div>

</div>
</body>
</html>

5.4、解决父级边框塌陷的问题

clear清除浮动

/*
    clear: right; 右侧不允许有浮动元素
    clear: left; 左侧不允许有浮动
    clear: both; 两侧不允许有浮动
    clear: none; 未设置，默认可以浮动
*/

解决父级边框塌陷问题的方案：

1、增加父级元素的高度

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

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

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

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

3、overflow

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

overflow: hidden; /*一直隐藏滚动条*/
overflow: scroll; /*一直显示滚动条*/
overflow: auto; /*滚动条，根据情况，自动出现和消失*/

4、父类添加一个伪类：after

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

小结：

浮动元素增加空div
- 简单、代码中尽量避免空div
设置父元素的高度
- 简单，但是元素假设有了固定的高度，可能就会被限制
overflow
- 简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）
- 写法稍微复杂一点，但是没有副作用，推荐使用！

5.5、对比display与float

display
- 方向不可以控制
float
- 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

6、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>

    <!-- 相对定位
        相对于自己原来的位置进行偏移~
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background: #dd74f5;
            border: 1px dashed #bb52d3;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: -20px;
        }
        #second{
            background: #9de64f;
            border: 1px dashed #7bc42d;
        }
        #third{
            background: #87b9fd;
            border: 1px dashed #6597db;
            position: relative;
            bottom: -20px;
            right: -20px;
        }
    </style>
</head>
<body>

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

</body>
</html>

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

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

练习题：链接卡

相对定位练习

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

    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            background: #e174db;
            display: block;
            line-height: 100px;
            text-decoration: none;
            color: white;
            text-align: center;
        }
        .a2,.a4{
            position: relative;
            top: -100px;
            left: 200px;
        }
        .a5{
            position: relative;
            top: -300px;
            left: 100px;
        }
        a:hover{
            background: #0064d8;
        }
    </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、绝对定位

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

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

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background: #dd74f5;
            border: 1px dashed #bb52d3;
        }
        #second{
            background: #9de64f;
            border: 1px dashed #7bc42d;
            position: absolute;/*absolute 绝对定位*/
            left: 0;
        }
        #third{
            background: #87b9fd;
            border: 1px dashed #6597db;
        }
    </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>

    <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;
            border: 1px dashed #7bc42d;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

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

</body>
</html>

6.4、z-index

z-index

图层~

html代码：

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

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

    <div id="content">
        <ul>
            <li><img src="images/1.gif" alt=""></li>
            <li class="tipText">学习微服务</li>
            <li class="tipBg"></li>
            <li>时间：2099-01-01</li>
            <li>地点：月球一号基地</li>
        </ul>
    </div>

</body>
</html>

css代码：

opacity: 0.5;透明度

filter: alpha(opacity=50);早期版本，透明度

#content{
    width: 400px;
    height: 400px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    color: white;
    top: 325px;

}
li:nth-of-type(4){
    position: absolute;
    color: white;
    top: 350px;
}
li:nth-of-type(5){
    position: absolute;
    color: white;
    top: 375px;
}
.tipText,li:nth-of-type(4),li:nth-of-type(5){
    width: 400px;
    height: 25px;
    z-index: 999;
}
.tipBg{
    width: 400px;
    height: 75px;
    background: #555;
    opacity: 0.5;/*透明度*/
    filter: alpha(opacity=50);/*早期版本，透明度*/
}

7、动画及视野拓展

css做动画过于繁琐，已有很多工具间接性做出

百度：css动画
百度：canvas动画
百度：卡巴斯基监控站（仅作了解）

8、总结

略。

这篇关于CSS的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS

CSS

什么是CSS

1.1、什么是CSS

1.2、发展史

1.3、快速入门

基本入门

建议使用这种规范

CSS的优势

1.4、CSS的3种导入方式

1、行内样式

2、内部样式

3、外部样式

拓展：外部样式两种方法

链接式

导入式 @import

2、选择器

2.1、基本选择器

1、标签选择器

2、class (类)选择器

3、id 选择器

siYu{}

4、优先级：

2.2、高级选择器

1、层次选择器

1、后代选择器：在某个元素的后面

2、子选择器，一代，儿子

3、相邻兄弟选择器，同辈

4、通用选择器，向下兄弟元素

2、结构伪类选择器

3、属性选择器（常用）

3、美化网页元素

3.1、为什么要美化网页

3.2、字体样式

3.3、文本样式

3.4、阴影

3.5、超链接伪类

3.6、列表样式

html代码：

css代码：

3.7、背景样式

背景颜色：

背景图片

练习

html代码：

css代码：

3.8、渐变

4、盒子模型

4.1、什么是盒子模型

4.2、边框

border：粗细 样式 颜色

4.3、内外边距

盒子模型尺寸计算：

总结：

4.4、圆角边框

4.5、阴影

5、浮动

5.1、标准文档流

5.2、display（重要）

5.3、float

左右浮动 float

5.4、解决父级边框塌陷的问题

clear清除浮动

解决父级边框塌陷问题的方案：

1、增加父级元素的高度

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

3、overflow

4、父类添加一个伪类：after

小结：

5.5、对比display与float

6、定位

6.1、相对定位

练习题：链接卡

6.2、绝对定位

6.3、固定定位 fixed

6.4、z-index

图层~

html代码：

css代码：

opacity: 0.5;透明度

border：粗细样式颜色