CSS（概念、三种导入方式、三种基本选择器、三种高级选择器、字体\文本\超链接伪类\阴影\列表\背景\渐变、盒子模型、浮动、定位、z-index）

最新推荐文章于 2023-12-18 19:42:34 发布

kww_

最新推荐文章于 2023-12-18 19:42:34 发布

阅读量713

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_40243295/article/details/114880117

版权

网页设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、CSS的简单介绍

如何学习

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

CSS选择器重点掌握，其他了解即可

1.1 什么是CSS?

CSS,全称为Cascading Style Sheets，为层叠样式表。CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS是用来美化网页。

1.2 CSS发展史

CSS1.0
CSS2.0 DIV (块) + CSS, HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1浮动，定位
CSS3.0圆角，阴影，动画...浏览器兼容性~

1.3 快速入门

1.3.1 练习格式

css和html未分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    这是css和html不分离的情况-->
<!--    规范 <style>可以编写css代码
语法：
        选择器{
                声明1；
                声明2；
                声明3；
                }
-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

css和html分离后

1.3.2 CSS的优势

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

用Vue不易被搜索引擎收录

二、 CSS的三种导入方式

2.1 行内样式（不推荐使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

优先级：就近原则

2.2 内部样式（不推荐使用，css和html代码未分离）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 内部样式    */
        h1{
            color: green;
        }
    </style>

</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->

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

</body>
</html>

2.3 外部样式

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

<!--外部样式引用-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<!--优先级：就近原则-->
<h1 >我是标题</h1>

</body>
</html>

/* css的外部样式 */
h1{
    color: blue;
}

2.4 三者优先级

三者优先级：就近原则

2.5 外部样式的两种写法

2.5.1 链接式

属于html，框架和内容同时加载。（推荐使用）

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

2.5.2 导入式

属于CSS2.1，现在不推荐使用，先加载框架再加载内容。

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

2.5.3 两者区别

@import和link的区别

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。

推荐使用link标签

三、三种基本选择器（重要）

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

3.1 基本选择器

标签选择器：选择一类标签标签{}
类选择器：选择所要class属性一致的标签。跨标签，可以多次使用。 .类名{}
id选择器:全局唯一，不可以重复使用。 #id{}

3.1.1 标签选择器

大多数网址的样式是可以调试的，我们可以先在浏览器中调试好之后，再将代码粘贴过来。

具体方法：随便找一页面，然后选择跟随，找到想要更改的文字，然后在styles中修改。

示例1：

示例2：

复制代码至h1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  标签选择器，会选择到页面上所以的这个标签的元素
        可以先去博客园调试，调试好了之后再将代码复制过来
        */
        h1{
            color: #4abcf8;
            background: #123456;
            border-radius: 24px;
        }

        p{
            font-size: 80px ;
        }

    </style>
</head>
<body>
<h1>学java</h1>
<h1>啦啦啦啦</h1>
<p>冲冲冲冲！！！</p>
</body>
</html>

效果图：

3.1.2 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class
        */
        .lkww{
            color: #ff8428;
        }
        .qqq{
            color: #4badff;

        }
    </style>

</head>
<body>

<h1 class="lkww"> 标题1</h1>
<h1 class="qqq">标题2</h1>
<h1 class="qqq">标题3</h1>
<p class="lkww">P标签</p>
</body>
</html>

效果图：

3.1.3 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一
        格式为：#id号{}
        */
        #lala{
            color: #c7ff2d;
        }
        
    </style>


</head>
<body>
<h1  id="lala"> 标题1</h1>


</body>
</html>

3.1.4 三种选择器的优先权

不遵循就近原则，固定顺序：

id选择器>class选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一
        格式为：#id号{}
        不遵循就近原则，固定的顺序
        id选择器>class选择器>标签选择器

        */
        #lala{
            color: #c7ff2d;
        }
        .lkww{
            color: #ffa78f;
        }
        .qqq{
            color: #d377ff;
        }
        h1{
            color: #34133e;
        }

    </style>


</head>
<body>
<h1 class="lkww" id="lala"> 标题1</h1>
<h1 class="qqq">标题2</h1>
<h1 class="lkww">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

效果展示：

3.1.5 如何从网页判断所属选择器

辨别所属选择器：

类选择器：前面有" . "

标签选择器：为标签名，例如：div，h1...

id选择器：前面为“#”

其余可能为高级选择器。

举例1：

举例2：

四、高级选择器

4.1 层次选择器

后代选择器：在某个元素的后面
子选择器：只有一代
相邻兄弟选择器
通用选择器

后代选择器：在某个元素的后面（详解在后面）

/*后代选择器*/
<style>
body p{
    background:red;
}
</style>

子选择器：一代

/*子选择器*/
<style>
body>p{
    background:orange;
}
</style>

相邻的兄弟选择器：同辈

/*相邻兄弟选择器：只选择一个，相邻（向下）*/
<style>
.active+p{
background: red
}
</style>
<body>
    <p class="active">p1<p>
    <p>p2</p>
</body>

通用选择器：

<style>
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
    .active~p{
    background:red;
}
</style>
<body>
    <p class="active">p1<p>
    <p>p2</p>
</body>

4.1.1 后代选择器

在某个元素的后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: antiquewhite;*/
        /*}*/
    /*    后代选择器*/
        body p{
            background: #4abcf8;
        }
        
    </style>
</head>
<body>
<p>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>
</body>
</html>

4.1.2 子选择器

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

        body>p{
            background: #d377ff;
        }

    </style>
</head>
<body>
<p>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>
</body>
</html>

4.1.3 相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
  
    /*  相邻兄弟选择器,用“+”,找相邻向下的一个兄弟，只有一个*/
        .active + p{
        /*代表active周围的p标签*/
            background: #c7ff2d;
        }

    </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>

</body>
</html>

4.1.4 通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*    通用选择器，当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background:#ffa78f;
        }


    </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>

</body>
</html>

4.2 结构伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

伪类选择器后面都加了“ : ”

    <style>
        ul li:first-child{/*ul的第一个子元素*/
            background: aqua;
        }
        ul li:last-child{/*ul的最后一个子元素*/
            background: blue;
        }
        /*选中p1：定位到父元素，选择当前的第一个元素
            选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/
        p:nth-child(1){
            background: orange;
        }
        p:nth-of-type(2){/*选中父元素下的，第2个p元素*/
            background: red;
        }
        a:hover{
            color: green;
        }
    </style>
</head>
<body>
    <a href="">123</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h3>h3</h3>
    <ul>
        <li>1li1</li>
        <li>1li2</li>
        <li>1li3</li>
    </ul>
    <ul>
        <li>2li1</li>
        <li>2li2</li>
        <li>2li3</li>
    </ul>
    <a href="www.baidu.com">百度</a>
</body>

效果图：

4.3 属性选择器（常用）

id + class结合

写法一：属性名， a[id]{}

写法二：属性名=属性值（正则）a[id=first]{}

= 表示绝对等于
*= 表示包含
^= 表示以...开头
$= 表示以...结尾

<!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: aquamarine;
            text-align: center;     /*文字左右居中*/
            color: gray;
            text-decoration: none;  /*去掉下划线*/
            margin-right: 5px;      /*后面偏移5px*/
            /*line-height:50px;*/
            font: bold 20px/50px Arial; /* 粗体，字体大小/行高 字体*/

        }
        /*  写法一：属性名，
            写法二：属性名=属性值（正则）
         = 表示绝对等于
         *= 表示包含
         ^= 表示以...开头
         $= 表示以...结尾
         存在id属性的元素
            a[]{}
         */

        a[id]{/*a标签中带有id属性的*/
            background: yellow;
        }

        a[id=first]{/*id=first的元素*/
            background: green;
        }

        a[class*="links"]{/*class 中包含links的元素*/
            background: bisque;
        }

        a[href^=http]{/*选中href中以http开头的元素*/
            background: aquamarine;
        }
        a[href$=pdf]{/*选中href中以pdf结尾的元素*/
            background: aquamarine;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http:www.baidu.com" class="links item first" id="first">1</a>
    <a href="" 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="abcd.doc" class="links item last">10</a>
</p>
</body>

</html>

结果显示：

五、美化网页元素

为什么要美化网页

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

5.1 span标签

重点要突出的字，使用span标签套起来，要自己设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id标签 */
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
学习语言<span id="title1">JAVA</span>
</body>
</html>

5.2 字体样式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family:"Arial Black",楷体; /*前者为英文字体，后者为汉语字体*/
            color: red;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: 600;
            color: gray;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<p>正文11111</p>
<p class="p1">正文2222222</p>
<p>i love study java</p>
</body>

</html>

字体的常用写法：

<style>
        .demo a{
            /*字体也可以直接写font，一起定义*/
            font: bold 20px/50px Arial; /* 粗体，字体大小/行高 字体*/
        }

 </style>

font-weight:bolder;/*也可以填px，但不能超过900,相当于bloder*/
/*常用写法：*/
font:oblique bloder 12px "楷体"   /*常用写法：斜体 粗细 大小 字体*/

5.3 文本样式

颜色–>color:rgb / rgba()
文本对齐方式–>text-align：center
首行缩进–>text-indent：2em
行高–>line-height：块高；
下划线–>text-decoration
图片、文字水平对齐：img,span{vetical-align:middle}

5.3.1 颜色、文本对齐、首行缩进

首行缩进：text-indent: 2em;

文本居中：text-align: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  rgb
            rgba：0—1透明度
            首行缩进：text-indent: 2em;
            文本居中：text-align: center;
         */
        body{

            font-family:"Arial Black",楷体;
            color: #00ff00;
            /*color: rgb(0,255,0);*/

        }
        h1{
            font-size: 50px;
            color: rgba(0,255,0,0.5);
            text-align: center;             /*文本居中*/
        }
        .p1{
            font-weight: 600;
            color: gray;
            text-indent: 2em;       /*首行缩进2个字*/

        }
    </style>

</head>
<body>
<h1>故事描述</h1>
<p>　每天下班，鲍比和女友丽莎都会结伴穿过纽约的中心公园，有说有笑地回家。
    鲍比注意到，一位衣着破烂的乞丐总是坐在公园的板凳上，
    静静地望着对面的豪华宾馆，脸上洋溢着幸福的笑容。他好奇地走近乞丐：
    “请原谅，我真不明白你为何每天都能如此开心？”
</p>
<p class="p1">乞丐憨憨地笑：“虽然我没家也没钱，可每天都能讨取到一些零钱，
    入了夜还有宾馆的彩灯相伴，这样我便总能梦到自己住进了那栋舒适的宾馆。
    ”鲍比对这种近乎自欺欺人的开心深感同情，
    于是大方地往乞丐的帽子里放了100美元。乞丐显然从未接收过这么大额的施舍，
    他直愣愣地盯住钞票，一个劲地道谢。</p>
<p>i love study java</p>
</body>

</html>

5.3.2 下划线

text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/

5.3.3 超链接伪类

a:hover比较常用，代表鼠标悬浮时的样式。

<style>
	   /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的颜色(重点)*/
        a:hover{
        color: #ffa78f;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: lime;
        }
        /*鼠标点击后的状态*/
        a:visited{
            color: red;
        }
</style>

5.3.4 阴影


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

超链接伪类+阴影代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的颜色(重点)*/
        a:hover{
        color: #ffa78f;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: lime;
        }
        /*鼠标点击后的状态*/
        a:visited{
            color: red;
        }
/*        阴影的颜色，水平偏移 垂直偏移 阴影半径*/
#price{
    text-shadow: #89b0d7 10px 10px 2px;
}

    </style>
</head>
<body>

<a href="#">
    <img src="image/11.jpg" alt="">
</a>
<p>
    <a href="#">书书书</a>
</p>
<p id="price">
    ￥99
</p>
</body>
</html>

效果展示：

5.3.5 列表

主页index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="styles.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代码：

list-style:

non 去掉实心圆
circle 空心圆
square 正方形

#nav{
    width: 300px;
    background: antiquewhite;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;   /*缩进*/
    line-height: 35px;
    background: red;
}

/*
list-style:
    non 去掉实心圆
    circle 空心圆
    square 正方形
*/

/*ul{!*nav替换效果*/
/*    background: antiquewhite;*/
/*}*!*/

/*ul下的所有li标签*/
ul li{
    height: 30px;
    list-style: none;/*去掉实心圈*/
    text-indent: 1em;
}

a{
    text-decoration: none;      /*没有下划线*/
    font-size: 14px;
    color: black;
}
/*鼠标触碰时的状态*/
a:hover{
    color: burlywood;
    text-decoration: underline;     /*触碰上时加下划线*/

}

5.3.6 背景

背景颜色：background
背景图片

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

5.3.7 渐变

渐变背景网址：https://www.grabient.com
径向渐变、圆形渐变

<!DOCTYPE html>
<html lang="en">
<head>
<!--    平铺+渐变-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #8EC5FC;
            background-image: linear-gradient(320deg, #8EC5FC 0%, #E0C3FC 100%);
        }

        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red; /*  边框 实线 红色*/
            background-image:url("image/12.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>

效果展示：

六、盒子模型

6.1什么是盒子模型

margin：外边距
padding：内边距
border：边框

6.2 边框

border：粗细样式颜色

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>  /*border:粗细，样式，颜色;*/
    /*body总有一个默认的外边距*/
    h2,h1,ul,li,body{
        margin: 0px;
        padding: 0px;
        text-decoration: none; /*无下划线*/
    }

    form{
    /*   form为标签选择器*/
        background: #90a4c1;
    }
    div:nth-of-type(1) input{
        border: 3px solid bisque;
    }

    div:nth-of-type(2) input{
        border: 3px dashed #61ce7d;
    }

    div:nth-of-type(3) input{
        border: 3px dashed #bf0f83;
    }
    h2{
        font-size: 16px;
        background: #d377ff;
        line-height: 30px;
    }

        #box{
        width: 300px;
        border: 1px solid red;
            margin: 0 auto;



        }


    </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>

6.3 外边距——妙用：居中

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/

/*例1：居中*/
margin:0 auto /*上下为0，左右居中。auto表示左右自动*/

/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/

/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

6.4 圆角边框——border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
            width: 100px;
            height: 50px;
           border: #ffa78f 2px solid;
            /*一个border-radius，只管一个圆的1/4 */
            border-radius:50px 50px 0px 0px;        /* 左上 右上 右下 左下 ,顺时针方向 */
        
        }
    </style>

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

6.5 盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    margin：0 auto;居中
要求：块元素要有固定的宽度-->
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 50px #d377ff;
        }
    </style>
</head>
<body>
<div style="width:500px;display:block;text-align: center">
    <img src="image/11.jpg" alt="">
<!--  未居中，不知原因-->

</div>

</body>
</html>

模板之家

源码之家

有现成的网站后台，登录界面的源码，我们不需要自己写。

6.6 浮动

6.6.1 标准文档流

块级元素：独占一行 h1~h6 、p、div、列表…
行内元素：不独占一行 span、a、img、strong

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

6.6.2 display（重要）

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--block 块元素
        inline 行内元素
        inline-block 是块元素，但是可以内联 ，在一行
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #3d7aa5;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid #db378c;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

6.6.3 float：left/right左右浮动

clear：both  /* 含义图像的左侧和右侧均不允许出现浮动元素*/

6.6.4 overflow及父级边框塌陷问题

clear的三个属性：

right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素

解决塌陷问题方案：

方法一：增加父级元素的高度；

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

方法二：增加一个空的div标签，清除浮动

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

方法三：在父级元素中增加一个overflow属性

overflow:hidden/*隐藏超出部分*/
overflow：scoll/*有滚动条*/

方法四：父类添加一个伪类:after

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

小结：

四种方法：

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

display与float对比

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

6.7 定位

6.7.1 相对定位

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

top: -20px;     /*距上面的距离减少20，即向上偏移20px*/
left: 20px;     /*距左边的距离增加20，即向右偏移20px*/
bottom: 10px;    /*距下边的距离增加10，即向上偏移10px*/
right: 10px;    /*距右边的距离增加10，即向左偏移10px*/

<!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: #ffa538 1px solid;
            padding: 0;
        }
        #first{
            border: #b3ff38 1px solid;
            background-color: #ffa538;
            position: relative;/*相对定位：上下左右*/
            top: -20px;     /*距上面的距离减少20，即向上偏移20px*/
            left: 20px;     /*距左边的距离增加20，即向右偏移20px*/
        }
        #second{
            border: #427b11 1px solid;
            background-color: #66c77f;
        }
        #third{
            background-color: #b3ff38;
            border: #38d7ff 1px solid;
            position: relative;
            bottom: -10px;/*距下边的距离减少10，即向下偏移10px*/

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            height: 300px;
            width: 300px;
            border: 2px red solid;
            padding: 10px;
        }
        a{
            height: 100px;
            width: 100px;
            background-color: #efa5ce;
            color: white;
            text-align: center;
            text-decoration: none;
            line-height: 100px;/*设置行距100px，为了保证文字居中*/
            display: block;/*设置方块，变成块级元素*/
        }
        a:hover{
            background: #8a9af5;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        /*    把a2，a4都相对于原来位置，向右移200，再上移100*/
        }

        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="a1"><a href="" >链接1</a></div>
    <div class="a2"><a href="" >链接2</a></div>
    <div class="a3"><a href="" >链接3</a></div>
    <div class="a4"><a href="" >链接4</a></div>
    <div class="a5"><a href="" >链接5</a></div>
</div>
</body>


</html>

结果演示：

6.7.2 绝对定位和固定定位

绝对定位：absolute
固定定位：fixed

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

没有父级元素定位的前提下（父集无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 #666666;
            padding: 0;
            position: relative;
        /*   父集有定位position，则下面的元素相对于父集定位*/
        }
        #first{
            background-color: #f8bab1;
            border: 1px solid #e39a6c;
        }
        #second{
            background-color: #7b9bd0;
            border: 1px dashed #58bec6;
            position: absolute;     /*绝对定位。相对于父集*/
            right: 30px;
            top: -10px;
        /*    相对于父集的框，上移10，左移30，因为上移10，就超出了父集的框，因此只能顶着上侧*/
        }
        #third{
            background-color: #c994c7;
            border: 1px dashed #8e59aa;
        }
    </style>

</head>
<body>

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

固定定位：

<!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: #c6c0ef;
            position: absolute;
            right: 200px;
            bottom: 0;
        }
        /*fixed：固定定位(无论浏览器怎么走元素位置不动)*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: #b6ecaf;
            position: fixed;
            right: 100px;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>absolute</div>
<div>fixed</div>

</body>
</html>

6.8 z-index

图层：最低0，最高无限，哪个元素显示在屏幕最上方。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style></style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/11.jpg" alt=""/></li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>
</body>
</html>

CSS代码：

#content{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    /*font-size，line-height一般是配对出现的*/
    border: 1px black solid;
}
ul, li{
    padding: 0;
    margin: 0;
    list-style: none;           /*去掉空行*/

}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    top: 323px;
}
.tipText{
    color: white;
    z-index: 999;
/*    层级0为最低，若文字要浮在最上侧，则将其层级设计为很高即可*/
}
.tipBg{
    background: black;
    width: 380px;
    height: 25px;
    opacity: 0.5;        /*背景透明度*/
}