前端CSS学习，快速简单上手

warm...

已于 2022-07-20 15:31:04 修改

阅读量972

点赞数

分类专栏：前端学习文章标签： css 前端学习

于 2022-07-05 11:17:21 首次发布

本文链接：https://blog.csdn.net/qq_46292926/article/details/105207426

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

CSS的基础知识
CSS属性
浮动
常见的网页布局
定位
显示隐藏元素
土豆案例
精灵图
字体图标
用户界面
- 鼠标样式

CSS的基础知识

css概念

css：cascading style sheets,层叠式样式。规定了html标签在网页上的显示样式。
前端三层：
1、html 结构层，打网页的整体骨架。
2、css 样式器，装饰页面
3、Javascript 行为层，一些页面的交互效果。
css作用
1、css两个重要的概念：层叠式，样式。
2、样式：html标签在页面的显示效果。某一标签有什么样式，直接将对应的属性及属性值罗列出来。
3、css样式设置的时候，有两个关键：选择器，样式表。
- css作用细化：
  1、给文本添加文字显示样式。
  2、给盒子添加属性进行结构布局。
css的几个小样式
- 文本样式：字体，颜色，大小。
  1、大小：font-size。本身是一个复合属性font，里面的单一属性，需要用font-单一属性名。
  属性值，以像素为单位。
  2、颜色：color。属性值有几种选择方案：十六进制、RGB、RGBA、颜色名（英文）。
  3、字体：font-family。复合属性的一个单一属性，中文字体和英文字体。
  书写的时候将英文写在前面，中文字体写在后面。
  中文字体：默认为宋体，常用字体有宋体，微软雅黑。
- 字体用引号包裹，字体直间用逗号隔开，表示或。
  1、为了追求加载速度，将一些中文字体名字写成英文表示法。
  微软雅黑：Micro Yahei
  宋体：SimSun
- 盒子实体化属性
  - 实体化：将盒子给宽、高、背景色、边框。
    - 宽度：width。属性值像素为单位。
    - 高度：height。属性值像素为单位。
    - 背景色：background-color。属性值就是颜色色值。
    - 边框：border。复合属性，有多个属性值，属性直间用空格隔开。边框的宽度，颜色，线的类型。

css书写位置

根据书写css书写位置的不同，将我们的样式分为：行内式、内嵌式、外链式。

行内式
1、写在标签内部，css属性写在标签style的属性里，可以书写他的所i有css样式。

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

内嵌式
* 实际学习过程中：常用内嵌式。
1、写在html文件里的，head标签内有一对style标签，是一个双标签，我们的所有css样式属性都写在双标签内部。
2、style标签有一个属性type，属性值"text/css"，表示我们内部写的是纯文本类型的css样式代码。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外链式
将css单独写在另外一个css文件里。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

mystyle.css文件

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

css书写的注意事项

  	1、html的属性和属性值，键值对的形式。
  	2、css属性和属性值，k : v；
  	3、多个属性之间必须用分号分隔。
  	4、内嵌式：所有样式必须写在一对大括号中。
  	5、css样式，对于换行，空格，缩进也不敏感。
  	6、代码书写时，要合理的缩进，换行。
  	7、将代码上传到网上时，为了提高加载速度，将多余的空格，缩进，换行等删除，压缩代码。

基础选择器

选择器：指的是我们选择需要添加样式的标签元素的模式。

标签选择器

1、通过标签名直接选择相应的标签。标签是什么就用什么选择。
2、标签选择器选中的是页面所有对应的标签。不管嵌套关系多复杂，都能通过标签选择器选中。
因为标签选择器会选中所有的标签，在实际工作中，不会用来更改某一元素属性，因为会影响其他。
用途：利用标签选择所有，进行初始化样式的设置，默认样式的清除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        p{
            font-size: 20px;
            color: chocolate;
        }
        h2{
            color: red;
        }
    </style>
</head>
<body>
    <P>这是一个段落标签</P>
    <h2>这是一个h2标签</h2>
    <P>这是一个段落标签</P>
    <h2>这是一个h2标签</h2>
    <P>这是一个段落标签</P>
    <P>这是一个段落标签</P>
    <h2>这是一个h2标签</h2>
    <P>这是一个段落标签</P>

</body>
</html>

效果：
在这里插入图片描述

id选择器

通过标签的id属性值来选择相应的标签。
选择器书写：#开头，后面紧跟id名。中间没有任何空格。
由于id是页面的唯一，id选择器只能选中一个元素。
标签都有id属性，属性值也就id名需遵循一个规则：
1、必须以字母开头（严格区分大小写）。
2、后面可以是数字，下划线或者横线。
3、一个页面不允许出现相同的id名。即使是不同类型的标签。
id选择器的劣势：只能选中一个元素，如果有相同的样式，只能分别命id名，多次书写相同的属性。
标签选择器的劣势：会选中所有的元素，不能进行单独或者部分控制。
id常用场景：并不是用来添加样式，留给js添加行为。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        p{
            font-size: 20px;
            color: chocolate;
        }
        h2{
            color: red;
        }
        #para{
            color: aqua;
        }
    </style>
</head>
<body>
    <P>这是一个段落标签</P>
    <h2>这是一个h2标签</h2>
    <P>这是一个段落标签</P>
    <h2>这是一个h2标签</h2>
    <P id="para">这是一个段落标签</P>
    <P>这是一个段落标签</P>
    <h2>这是一个h2标签</h2>
    <P>这是一个段落标签</P>
</body>
</html>

效果：
在这里插入图片描述

类选择器

通过标签的class属性来选择这个标签。

选择方法：. 开头，后面class属性值。中间不能有空格。
class属性，值可以不唯一。类选择器选中的是所有相同class名的元素。
标签的class属性，属性命名值规则与id相同。
优点：可以选择一部分标签，添加相同的样式。
根据类的特性，要习惯使用原子类。原子类设置的规则，里面☞设置单一的css属性，某一标签需要添加这个属性，可以直接添加这个原子类的类名。
一个标签的class可以有多个属性值，有多个类名。多个属性值之间要用空格隔开。
多用于css样式的书写。类上样式，id上行为

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
     <style type="text/css">
        p{
            font-size: 20px;
            color: chocolate;
        }
        h2{
            color: red;
        }
        /*原子类，只定义一个css属性*/
         .ad{
             color: blue;
         }
         .ft{
             font-size: 40px;
         }
    </style>
</head>
<body>
    <P>这是一个段落标签</P>
<!--    原子类的使用-->
    <h2 class="ad ft">这是一个h2标签</h2>
    <P>这是一个段落标签</P>
    <h2>这是一个h2标签</h2>
    <P id="para">这是一个段落标签</P>
    <P>这是一个段落标签</P>
    <h2 class="ad ft">这是一个h2标签</h2>
    <P>这是一个段落标签</P>
</body>
</html>

在这里插入图片描述

通配符 *

可以选中包括body在内的所有标签。不常用，效率不高。可以用作简单案例里面的清空默认样式。

实际工作中清楚默认样式：用的是有默认样式的标签选择器。

*{
            margin: 0;
            padding: 0;
        }

效果：
在这里插入图片描述

高级选择器

基础选择器并不能满足我们的所有的需求，在基础选择器上进行一些延伸。
三种：后代选择器、交集选择器、并集选择器。

后代选择器（包含选择器）

通过标签直间的嵌套关系、层级关系，限定我们大体范围，在范围内具体查找相关元素。

后代选择器：根据嵌套关系，空格，左侧是右侧的祖先元素。
后代选择器空格两边只要是后代关系都可以，不一定是父子关系。
一般开始的祖先元素都不使用标签选择器。
可以根据嵌套关系来确定元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
         /*后代选择器*/
        .box2 li{
            color: chocolate;
        }
         /*后代选择器*/
        .box1 li{
            color: bisque;
        }

    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>这里是第一个div的li</li>
            <li>这里是第一个div的li</li>
            <li>这里是第一个div的li</li>
            <li>这里是第一个div的li</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>这里是第二个div的li</li>
            <li>这里是第二个div的li</li>
            <li>这里是第二个div的li</li>
            <li>这里是第二个div的li</li>
        </ul>
    </div>

</body>
</html>

效果：
在这里插入图片描述
示例代码：
解释：类名为box1的所有后代里面类名叫做one的标签。

.box1 .one{
            color: bisque;
        }

效果：
在这里插入图片描述

交集选择器

即满足条件1也满足条件2.
两种或者以上种选择器同时存在一个标签上。
写法：选择器之间直接连接，没有任何符号。
交集选择器使用的基础选择器，可以是类选择器。可以是标签和类id的混写。

以下是交集的连续书写：表示这个元素既是li标签的类名，还得有lis的类型。

/*交集选择器*/
        li.one.lis{
            color: green;
        }

兼容问题：IE6不支持类的连续交集。

并集选择器

有很多元素可能有相同的CSS样式，我们可以通过并集选择器将这些标签写在一起，统一设置css样式。前面所有的选择器都可以作为并集里的一项，在选择器中间用逗号隔开即可。
多个选择器选中的元素使用同一个样式。
用途：清空默认样式。

/*清空默认样式*/
        div,ul,li,p{
            margin: 0;
            padding: 0;
        }

等价于：
在这里插入图片描述

 /*并集选择器*/
        p,li.one{
            color: red;
        }

效果：
在这里插入图片描述

选择器优先级

继承性和层叠性

继承性
有一些属性给祖先元素设置了，后代元素会继承。
css继承性：后代元素能够继承来自祖先的元素的文字样式，不能继承盒子样式。
可以将整体的文字样式写在最祖先元素的body，后面的标签会自动继承。只会继承文字样式，不会继承盒子样式。
层叠式的第一个特性：继承性
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background: chocolate;
            border: 1px solid #999999;
            font-size: 16px;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>这里是标题</h2>
        <p>这里是段落</p>
        <p>这里是段落</p>

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

效果：
在这里插入图片描述

层叠性
同意标签可以用多个选择器选中。多个选择器选中一个元素，到底该听谁的问题？
涉及到选择器优先级的问题。
权重高的层叠掉权重低的
权重：id的选择器 > 类选择器> 标签选择器，通配符最低
计算权重的方法：数基础选择器的个数。如果有并集选择器，计算权重分开来算
如果权重一样，比较的是书写顺序，写在后面的层叠前面的

如果没选中元素，样式靠继承。
1、祖先元素距离目标元素距离不同。继承的样式，就近原则。
2、如果距离相同，比较权重。
3、如果距离相同，权重相同，后写层叠先写的。
关键字 !important
- 给单一属性添加，会给这个属性的权重提升到最大。
- 前提：不适用就近原则

CSS属性

主要有：文本、盒模型、背景、浮动、定位。

文本

color：字体颜色
色值：十六进制、RGB、颜色名、RGBA。
实际工作中，设计提供色值，用工具吸取。
颜色使用：背景色，边框色。
font-family:字体
常用中文：微软雅黑，宋体
常用英文：Arial，Consola

font-family:"Aria","Microsoft Yahei"

font-size：字号
文字大小，自己设置一个通用字体大小，如果不设置，网页会有一个默认的字体大小。
谷歌浏览器：最小显示12像素，如果小于12像素，会自动显示为12像素。
IE浏览器：没有默认最小显示像素，甚至1像素
常用字体像素值：12/14/16/18/20，都是一些偶数值。
实际工作中字号看设计图。
没有设计图时，测量。

盒子模型

网页布局三大核心：盒子模型，浮动，定位
盒子模型的组成：边框，内外边距，内容
border：边框
内边距：padding
外边距：margin
内容：content

边框

border-width ：边框的粗细，单位是px
border-style：边框的样式
border-color：边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之边框</title>
    <style>
        div {
         /* 字体颜色 */
        color: green;
        width: 300px;
        height: 200px;
        /*定义边框的粗细，单位是px */
        border-width: 5px; 
        /* 边框的样式 */
        border-style: solid;
        /* 边框的颜色 */
        border-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>练习1</p>
        <p>练习2</p>
        <p>练习3</p>
    </div>
</body>
</html>

效果：
在这里插入图片描述

边框的复合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框的复合写法</title>
    <style>
        div {
            /* 须指定边框样式才能显示边框 */
            /* border-color: green;
            border-width: 5px;
            border-style: solid; */
            /* 复合写法 */
            width: 300px;
            height: 200px;
            border: 3px solid pink; /*16行和18行不能互换 */
            /* 设置边框线 */
            border-top: 10px solid purple  ;

        }
    </style>
</head>
<body>
    <div>
        <p>练习1</p>
        <p>练习2</p>
        <p>练习3</p>
    </div>
</body>
</html>

效果：
在这里插入图片描述

表格细线边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格细线边框</title>
    <style>
        table {
            width: 500px;
            height: 249px;
        }
        table, th, td {
            border: 1px solid green;
            text-align: center;
            /* 重叠部分的表格改为细线 */
            border-collapse: collapse;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <table cellspacing="0"> 
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>下</td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">百度 新浪 微博</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>西游记</td>
            <td>上</td>
            <td>654</td>
            <td>456</td>
            <td><a href="#">百度 新浪 微博</a></td>
        </tr>
    </table>
</body>
</html>

效果：
在这里插入图片描述
注意：边框会影响实际盒子的大小

内边距padding

padding属性用于设置内边距，即内容与边框之间的距离。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: rgb(236, 40, 210);
        }
        p {
            padding-left: 20px;
            padding-top: 30px;
        }
    </style>
</head>
<body>
    <div>
        <p>内容是padding</p>
    </div>
</body>
</html>

效果：
在这里插入图片描述

padding复合属性写法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding复合属性写法</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: yellow;
            /* padding的复合属性写法 */
            padding: 10px 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div>内容是padding复合属性写法</div>
</body>
</html>

效果：
在这里插入图片描述

注意：内边距会影响盒子的实际大小。
解决办法：让width和height减去多出来的内边距大小。

外边距margin

清除内外边距

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background:green;
            /* 设置圆角边框，数值越大，边框越圆润 */
            border-radius: 17px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：
在这里插入图片描述

圆角边框的一般使用

圆角边框的设置使用border-radius即可设置。后面可以直接跟数值也可以跟百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        .radio1 {
            height: 200px;
            width: 200px;
            background:green;
            /* 盒子为正方形，圆角设置为宽或高的一半即可*/
            border-radius: 100px;
            text-align: center;
        }
        .radio2 {
            height: 200px;
            width: 300px;
            background:blue;
            /* 设置圆角矩形，数值设置为高度的一半 */
            border-radius: 100px;
            text-align: center;
            margin: 20px 0;
        }
        .radio3 {
            height: 200px;
            width: 200px;
            background:purple;
            /* 设置圆角边框，数值越大，边框越圆润 */
            border-radius: 10% 20% 30% 40%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="radio1">1.圆形的做法</div>
    <div class="radio2">2.圆角矩形的做法</div>
    <div class="radio3">3.设置不同的圆角</div>
</body>
</html>

效果：
在这里插入图片描述

盒子阴影（重要）

盒子阴影通过box-shadow设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            height: 200px;
            width: 300px;
            background-color:purple;
            margin: 10px auto;
            /* 数值依次代表：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，内外阴影(默认为外阴影，outset为指定外阴影，inset为指定内阴影) */
            box-shadow: 10px 10px 10px 10px grey;
        }

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

效果：
在这里插入图片描述
鼠标经过时显示盒子的阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            height: 200px;
            width: 300px;
            background-color:purple;
            margin: 10px auto;
            /* 数值依次代表：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，内外阴影(默认为外阴影，outset为指定外阴影，inset为指定内阴影) */
            /* box-shadow: 10px 10px 10px 10px grey; */
        }
        /* 鼠标经过时显现盒子的阴影 */
        .shadow:hover {
            box-shadow: 10px 10px 10px 10px grey;;
        } 
    </style>
</head>
<body>
    <div class="shadow"></div>
</body>
</html>

效果：
在这里插入图片描述

文字阴影

用属性text-shadow可以设置文字阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发光文本悬停效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: black;
        }
       h2 {
           text-align: center;
           font-size: 150px;
           color: #f5f5f5;
           line-height: 200px;
       }
       .i:hover{
            text-shadow: 0px 0px 10px blue;
            text-shadow: 0px 0px 20px blue;
            text-shadow: 0px 0px 30px blue;
       }
       h2:hover {
            text-shadow: 0px 0px 10px blue;
            text-shadow: 0px 0px 20px blue;
            text-shadow: 0px 0px 30px blue;
       }
    </style>
</head>
<body>
    <h2 class="light">
        <span class="i">I</span> 
        <span class="m">M</span>
        POSSIBLE
    </h2>  
</body>
</html>

效果：
在这里插入图片描述

浮动

传统网页布局的三种方式
网页布局的本质：用CSS来摆放盒子，把盒子放到相应位置。
CSS提供了三种传统网页布局方式（简单来说，就是盒子如何进行排列顺序）
- 普通流（标准流）
标签按照规定好的默认方式排列
1、块级元素会独占一行，从上到下顺序排列
常见元素：div、hr、h1-h6、ul、ol、dl、form、table、p
2、行内元素会按照顺序从左到右顺序排列，碰到父元素边缘则自动换行。
常见元素：span、a、i、em等
标准流是最基本的布局方式。

什么是浮动

浮动最经典的应用：可以让多个块级元素一行并排显示。
网页布局第一准测：多个块级元素纵向排列找标准列，多个块级元素横向排列找浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动特性—脱标

浮动特性—浮动元素一行显示

浮动特性—浮动元素具有行内块特性

浮动元素经常搭配标准流的父元素

浮动布局练习1

浮动布局练习2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习下</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1226px;
            height: 615px;
            background-color:pink;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: grey;
        }
        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color:skyblue;
        }
        li {
            list-style: none;
        }
        .lin li {
            float: left;
            width: 234px;
            height: 300px;
            background-color: rgb(131, 250, 220);
            margin-left: 14px;
            margin-bottom: 14px;
        }
        a {
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            eleven
        </div>
        <div class="right">
            <ul class="lin">
                <li>seven</li>
                <li>seven</li>
                <li>seven</li>
                <li>seven</li>
                <li>seven</li>
                <li>seven</li>
                <li>seven</li>
                <li>seven</li>
            </ul>
        </div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

常见的网页布局

浮动注意的两个点

浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
一个盒子浮动了，理论上其他的盒子也要浮动
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也要浮动，以防止引起问题。
浮动的盒子只会影响浮动后面的标准流，不会影响前面的标准流。

为什么要清楚浮动

清楚浮动的本质及额外标签法

清楚浮动之父元素overflow

清楚浮动元素之after伪元素

清除浮动之双伪元素

定位

定位组成：将盒子定在某一个位置，所以定位也是摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
在这里插入图片描述

边偏移

边偏移就是定位盒子移动到最终位置，有top、bottom、left和right4个属性。
在这里插入图片描述

静态定位static（了解）

静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器：{position：static}
静态定位按照标准流的特性摆放位置，它没有边偏移
静态定位很少使用

相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法：
选择器:{position:relative；}
相对定位的特点（务必记住）
1、它是相对于自己原来的位置移动的。（移动位置的时候参照自己原来的位置）
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

绝对定位absolute（重要）

绝对定位是元素移动位置的时候，是相对于它祖先元素来说的。
语法：
选择器：{position：absolute；}
绝对定位的特点：（务必记住）
1、如果没有父元素或父元素没有定位，则以浏览器为准定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        .son {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background: grey;
        }
    </style>
</head>
<body>
    <div class="son"></div>
</body>
</html>

效果：
在这里插入图片描述
2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>绝对定位 父级元素有定位</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son span {
            position: absolute;
            top: 250px;
            right: 10px;
            font-size: 20px;
            color: green;
        }
        .lt {
            position: absolute;
            top: 250px;
            left: 10px;
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <span>&gt;</span>
            <span class="lt">&lt;</span>
        </div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
3、绝对定位不再占有原先的位置。（脱标）

子绝父相

子级是绝对定位的话，父级要用相对定位
1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2、父盒子需要加定位限制子盒子再父盒子的显示。
3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。

固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时位置不变。
语法：
选择器：{position：fixed；}
固定定位的特点：
1、以浏览器的可视窗口为参考点移动元素。

跟父元素没有任何关系。
不随滚动条滚动
2、固定定位不再占有原先的位置。

固定定位小技巧：固定在版心右侧位置

小算法：
1、让固定定位的盒子left：50%，走到浏览器可视区的一半的位置。
2、让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置

粘性定位sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合。
语法：
选择器 {position ：sticky；top：10px}
粘性定位的特点：
1、以浏览器的可视窗口为参照点移动元素（固定定位的特点）
2、粘性定位占有原先的位置（相对定位的特点）
3、必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性差，IE不支持。

定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
语法：
选择器：{z-index：1；}

数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来居上。
数字后面不能加单位
只有定位的盒子才有z-index属性

定位的拓展

1、绝对定位水平垂直居中

父级盒子的一半
偏移盒子的一半

2、定位的特殊特性

绝对定位和固定定位也和浮动类似
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3、脱标的盒子不会触发外边距塌陷。浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并的问题。
4、绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片），但是绝对定位（固定定位）会完全压住下面标准流的盒子。

显示隐藏元素

display显示隐藏元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏元素display</title>
    <style>
        .box1 {
        width: 200px;
        height: 200px;
        background: green;
        }
        .box2 {
            display: block;
            width: 200px;
            height: 200px;
            background: grey;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

后面应用广泛，搭配js可以做出网页特效。

visibility显示隐藏元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏元素visibility</title>
    <style>
        .box1 {
        	visibility：hidden
            width: 200px;
            height: 200px;
            background-color: grey;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

visibility隐藏元素后，继续占有原来的位置。效果：
在这里插入图片描述

overflow显示隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏元素overflow</title>
    <style>
        .box1 {
            overflow: scroll;
            width: 200px;
            height: 200px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>
            暮色里，小镇名叫泥瓶巷的僻静地方，有位孤苦伶仃的清瘦少年，此时他正按照习俗，一手持蜡烛，一手持桃枝，照耀房梁、墙壁、木床等处，用桃枝敲敲打打，试图借此驱赶蛇蝎、蜈蚣等，嘴里念念有词，是这座小镇祖祖辈辈传下来的老话：二月二，烛照梁，桃打墙，人间蛇虫无处藏。
        </p>
    </div>
</body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

土豆案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>土豆案例</title>
    <style>
        .box {
            position: relative;
            width: 450px;
            height: 288px;
            margin: 0 auto;
        }

        .mask {
            /* 隐藏遮罩 */
            display: none;
            position: absolute;
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, .5) url(12.png) no-repeat center
        }
        /* 当鼠标经过的时候，就让遮罩显示出来 */
        .box:hover .mask {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="mask"></div>
            <img src="1.jpg" alt="动漫">
    </div>
</body>
</html>

在这里插入图片描述

精灵图

字体图标

用户界面

鼠标样式

图片底侧空白缝隙解决

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决办法：
1、给图片添加vertical-align：middle，top，bottom等（提倡使用）
2、把图片转化为块级元素，display：block；

单行文字溢出省略号显示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行文本溢出省略号显示</title>
    <style>
        .box {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box">啥也不说，此处省略一万字</div>
</body>
</html>

效果：
在这里插入图片描述

多行文字溢出省略号显示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本溢出省略号显示</title>
    <style>
        .box {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="box">啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字</div>
</body>
</html>