CSS基础知识点（详细）

YL0301
156 阅读22分钟

CSS基础知识点（详细）

一、CSS简介

1、什么是CSS

CSS即层叠样式表

它是一种用来表现html或xml等文件样式的计算机语言。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2、CSS具有的特点

（1）丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本背景和属性的能力

（2）易于使用和修改

CSS样式表可以将所有的样式声明统一存放，统一管理

（3）多页面应用

CSS样式表可以单独存放在一个CSS文件中，可以在多个页面中使用同一个CSS样式表

（4）层叠

对一个元素多次设置同一个样式，这将使用最后一个设置的属性值

（5）页面压缩

缘由：

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加

CSS样式表优点：

（1）将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少

（2）CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间

二、CSS引入

CSS引入方式有三种：内嵌式、外联式、行内式

1、内嵌式

内嵌式---CSS要写在 style 标签中

注意：style 标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>这是div标签</div>
</body>
</html>

2、外联式

外联式---CSS写在一个单独的.css文件中

注意：需要通过 link 标签在网页中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="my.css">
</head>
<body>
    <div>这是div标签</div>
</body>
</html>

my.css文件内容如下：

div {
    color: red;
}

3、行内式

行内式---直接在标签里面写style属性（开发时不推荐这么写）

<p style="color:red;">这是p标签</p>

三、CSS基本语法

1、CSS的组成：选择器和声明块

1、选择器指向需要设置样式的HTML元素

2、声明块包含一条或多条用分号分隔的声明

（1）每条声明都包含一个CSS属性名称和一个属性值，以冒号分隔

（2）所有声明被放置在一对大括号“{}”内，然后整体紧邻选择器的后面

image.png

四、选择器分类

1、标签选择器

（1）结构：使用HTML标签作为选择器的名称，以标签名作为样式应用的依据

p {
    color: aqua;
}

（2）作用：通过标签名，找到页面中所有这类标签，设置样式

（3）注意点

  • 标签选择器选择的是一类标签，而不是单独某一个
  • 标签选择器无论嵌套关系有多深，都能找到对应的标签

2、类选择器

（1）结构：使用自定义的名称，以·号作为前缀，然后再通过HTML标签的class属性调用类选择器，以标签的class属性作为样式应用的依据

<style>
    .red{
        color: red;
    }
    .size{
        font-size: 66px;
    }
</style>

（2）作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

（3）注意点

  • 所有标签上都有 class 属性，class 属性的属性值称为类名（类似于名字）
  • 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
  • 一个标签可以同时有多个类名，类名之间以空格隔开

如：<p class="red size">这是p标签</p> ---red size都是类名

  • 类名可以重复，一个类选择器可以同时选中多个标签

3、id选择器

（1）结构：使用自定义名称，以#作为前缀，然后通过HTML标签的ID属性进行名称匹配，以标签的id属性作为样式应用的依据，一对一的关系

<style>
    #blue{
        color: blue;
    }
</style>

（2）作用：通过 id 属性值，找到页面中带有这个 id 属性值的标签，设置样式

（3）注意点

  • 所有标签上都有 id 属性
  • id 属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
  • 一个标签上只能有一个 id 属性值
  • 一个 id 选择器只能选中一个标签

4、通配符选择器

（1）结构：使用通配符 * 表示所有的标签

<style>
    *{
        padding:0;
	margin:0;
    }
</style>

（2）作用：找到页面中所有的标签，设置样式

（3）注意点：可以用来去掉标签默认的margin和padding

5、后代选择器

（1）结构：选择器1 选择器2 {CSS}

（2）作用：根据HTML标签的嵌套关系，选择父元素所有后代中满足条件的元素

（3）结果：在选择器1所找到标签的后代（儿子、孙子、重孙子,,,）中，找到满足选择器2的标签，设置样式

（3）注意点：后代选择器中，选择器与选择器之前通过空隔开，后代包含儿子、孙子、重孙子...

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个P标签</p>
    <div>
        <p>这是DIV的儿子P</p>
    </div>
</body>
</html>

6、子代选择器

（1）结构：选择器1 > 选择器2 {css}

（2）作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

（3）结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

（4）注意点：子代选择器中，选择器与选择器之间通过 > 隔开，子代只包括儿子

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > p > a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">这是div里面的p</a>
        <p>
            <a href="#">这是div里面的p的a</a>
        </p>
    </div>
</body>
</html>

7、并集选择器

（1）结构：选择器1,选择器2{css}

（2）作用：同时选择多组标签，设置相同的样式

（3）结果：找到选择器1和选择器2选中的标签，设置样式

（4）注意点：

  • 并集选择器中的每组选择器之间通过，分隔
  • 并集选择器中的每组选择器可以是基础选择器或者复合选择器
  • 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div,span,h1 {
            color: red;
        }
    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
    <h2>h2</h2>
</body>
</html>

8、交集选择器

（1）结构：选择器1选择器2{css}

（2）作用：选中页面中同时满足多个选择器的标签

（3）结果：(既右原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

（4）注意点：

  • 交集选择器中的选择器之间是紧挨着的，没有东西分隔
  • 交集选择器中如果有标签选择器，标签选择器必须写在最前面

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 找到第一个p，带box类的，设置标签颜色 -->
    <p class="box">这是p标签：box</p>
    <p>pppppppppp</p>
    <div class="box">这是div标签：box</div>
</body>
</html>

9、伪类选择器

（1）结构：选择器：hover{css}

（2）作用：选中鼠标悬停在元素上的状态，设置样式

（3）注意点：伪类选择器即设置选中的元素的某种状态

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 悬停时文字颜色为红色 */
        a:hover{
            color: red;
            background-color: yellow;
        }
        div:hover{
            color: green;
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何一个标签都可以添加伪类 -->
    <div>这是div</div>
</body>
</html>

10、结构伪类选择器

（1）目的：能够使用结构伪类选择器在HTML中定位元素

（2）作用：根据元素在HTML中的结构关系查找元素，常用于查找某父级选择器中的子元素

（3）选择器：

E：first-child{ } ---匹配父元素中第一个子元素，并且是E元素

E：last-child{ } ---匹配父元素中最后一个子元素，并且是E元素

E：nth-child(n){ } ---匹配父元素中第n个子元素，并且是E元素

E：nth-last-child(n){ } ---匹配父元素中倒数第n个子元素，并且是E元素

（4）注意点：选择器中n取值：0、1、2、3、4、5.......

通过 n 可以组成常见公式

1、偶数：2n 、even

2、奇数：2n+1 、2n-1 、odd

3、找到前5个：-n+5

4、找到从第5个往后：n+5

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:nth-child(4n) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- ul>li{这是第$个li}*8 -->
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

五、文字相关样式

1、字体样式

（1）设置字体大小---font-size

谷歌浏览器默认文字大小是 16px

单位需要设置，否则无效

（2）设置字体粗细---font-weight

1、取值

（1）关键字：正常 - normal、加粗 - bold

（2）纯数字：100~900的整百数（正常-400，加粗-700） --- 推荐使用

2、注意点：不是所有字体都提供了九种粗细，因此部分取值页面中无变化

（3）设置字体是否倾斜---font-style

取值：正常- normal（默认值） 、倾斜-italic

（4）设置字体类型---font-family

字体类型渲染规则

  • 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
  • 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

1、常见取值

（1）具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等

（2）字体系列：sans-serif、serif、monospace等

2、字体系列具体分类

（1）无衬线字体（sans-serif）--较为常用：文字笔画粗细均匀，并且首尾无装饰，常见该系列字体：黑体、Arial

（2）衬线字体（serif）：文字笔画粗细不匀，并且首尾有笔锋装饰，常见该系列字体：宋体、Times New Roman

（3）等宽字体（monospace）：每个字母或文字的宽度相同，常见该系列字体：Consolas、fira code

3、windows 默认微软雅黑字体

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* font-family: 宋体; */
            font-family: 微软雅黑，黑体，sans-serif;
        }
    </style>
</head>
<body>
    <div>这是一个字体</div>
</body>
</html>

（5）设置字体颜色---color

<style>
    div{
        color: red;
    }
</style>

（6）字体 font 相关属性的连写

1、取值：font：style weight size family

2、省略要求：只能省略前两个，如果省略了相当于设置了默认值

3、注意点：如果需要同时设置单独和连写形式，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            /* font: style weight size family */
            font: italic 700 66px 宋体;
            font-style: normal; 
            /* 省略写法 */
            font: 700 100px 微软雅黑；
        }
    </style>
</head>
<body>
    <p>这是一个字体</p>
</body>
</html>

2、文本样式

（1）文本缩进---text-indent

取值：

1、数字+px

2、数字+em（推荐：1em=当前标签的 font-size 的大小，即1个字的大小）

代码示例

<style>
    p {
        /* em为一个字的大小 */
        text-indent: 2em;
        font-size: 20px;
    }
</style>

（2）文本水平对齐方式---text-align

1、取值：left ---左对齐（默认值）、center ---居中对齐、right ---右对齐

2、注意点：如果需要让文本水平居中，text-align 属性给文本所在标签（文本的父元素）设置

代码示例

<style>
    h1{
        text-align: right;
    }
    h2{
         text-align: center;
    }
    body{
        text-align: center;
    }
</style>

（3）文本修饰---text-decoration

取值：

1、underline---下划线（常用）

2、line-through---删除线（不常用）

3、overline---上划线（几乎不用）

4、none---无装饰线（常用） 如：text-decoration：none；---清除 a 标签默认的下划线

（4）设置行间的距离（行高）---line-height

取值：

（1）数字 + px ---常用

（2）倍数（当前标签 font-size 的倍数）

应用：

（1）让单行文本垂直居中可以设置 line-height：文字父元素高度

（2）网页精准布局时，会设置 line-height：1 可以取消上下间距

代码示例

p {
    text-indent: 2em;
    /* line-height: 50px; */
    /* line-height: 1.5; */
    font: italic 700 66px/2 宋体;
    }
</style>

六、背景相关属性

1、背景颜色---background-color

（1）属性值：关键字、rgb表示法、rgba表示法、十六进制....

（2）注意点：

  • 背景颜色默认值是透明：rgba(0,0,0)、transparent
  • 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* background-color: rgb(155, 25, 46); */
            width: 400px;
            height: 400px;
            /* background-color: #ccc; */
            background-color: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div>这是div</div>
</body>
</html>

2、背景图片---background-image

（1）属性值：background-image：url（‘图片的路径’）;

（2）注意点：

  • 背景图片 url 中可以省略引号
  • 背景图片默认是在水平和垂直方向平铺的
  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
	    /* 图片路径根据实际修改*/
            background-image: url(../image/小女孩.png);
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

3、背景平铺---background-repeat

属性值：

  • repeat：水平和垂直方向都平铺（默认值）
  • no-repeat：不平铺
  • no-repeat：沿着水平方向（x轴）平铺
  • repeat-y：沿着垂直方向（y轴）平铺

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            background-color:pink;
            background-image: url(../image/小女孩.png);
            /* background-repeat: repeat-y; */
            background-repeat: no-repeat;  
        }
    </style>
</head>
<body>
    <div>div文字</div>
</body>
</html>

4、背景位置---background-position

（1）属性值：background-position：水平方向位置 垂直方向位置；

  • background-position: left bottom; ---左下角显示
  • background-position: 50px 100px; ---按像素移动，正数：向右向下；负数：向左向上

（2）注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            background-color:pink;
            background-image: url(../image/小女孩.png);
            background-repeat: repeat-y;
            /* background-position: center center; */
            /* background-position: left bottom; */
            /* background-position: center; */
            background-position: 50px 100px;
        }
    </style>
</head>
<body>
    <div>div文字</div>
</body>
</html>

5、背景相关属性连写---background

（1）属性值：单个属性值的合写，取值之间以空格隔

（2）书写顺序：background：color image repeat position （推荐）

（2）注意点：如果需要设置单独的样式连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            /* 不分先后顺序 */
            /* background: pink url(../image/小女孩.png) no-repeat center center; */
            background: pink no-repeat center bottom url(../image/小女孩.png);
            background: pink url(../image/小女孩.png) no-repeat 100px 50px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

七、元素显示模式

1、块级元素

（1）显示特点：

  • 独占一行
  • 可设置宽高
  • 宽度默认是父元素的宽度，高度默认由内容撑开

（2）代表标签：

div 、 p 、 h系列、ul 、 li 、 dl 、 dt 、dd 、 form 、 header 、 nav 、 footer......

2、行内元素

（1）显示特点：

  • 一行可以显示多个
  • 不可设置宽高
  • 宽度和高度默认由内容撑开

（2）代表标签：

a 、 span 、b 、u 、 i 、 s 、strong 、ins 、em 、del......

3、行内块元素

（1）显示特点：

  • 一行可以显示多个
  • 可以设置宽高

（2）代表标签：

input 、textarea 、button 、select......

4、元素显示模式转换

（1）目的：改变元素默认的显示特点，让元素符合布局要求

（2）语法：

  • display : block ------转换成块级元素，常用
  • display : inline-block -----转换成行内块元素，常用
  • display : inline ------转换成行内元素，不常用

八、CSS特性

1、继承性

（1）特性:子元素有默认继承父元素样式的特点，文字控制属性都可以继承，其他不能继承

（2）可继承的常见属性：

  • color
  • font-style、font-weight、font-size、font-family
  • text-indent、text-align
  • line-height

（3）特殊性

a 标签的 color 会继承失效

h 系列标签的 font-size 会继承失效

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
            font-size: 10px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

2、层叠性

（1）特性：

  • 给同一个标签设置不同的样式--->此时样式会层叠叠加--->会共同作用在标签上
  • 给同一个标签设置相同的样式--->此时样式会层叠覆盖--->最终写在最后的样式会生效

（2）注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
            color: green;
        }
        .box {
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class="box">文字文字</div>
</body>
</html>

3、优先级

（1）特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

（2）优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important

（3）注意点：

  • ！important 写在属性值的后面，分号的前面
  • ！important 不能提升继承的优先级，只要是继承则优先级最低
  • 实际开发中不建议使用 ！important

（4）权重叠加计算

1、场景：

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

2、权重叠加计算公式：

复合选择器：（0<第一级：行内样式的个数>，0<第二级：id选择器的个数>，0<第三级：类选择器的个数>，0<第四级：标签选择器的个数>）

3、比较规则：

（1）先比较第一级数字，如果比较出来了，之后的统统不看

（2）如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看

（3）如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）

4、注意点：！important 如果不是继承，则权重最高

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            color: orange;
        }
        .box {
            color: blue;
        }
        body{
            color: red;
        }
        div {
            color: green!important;
        }
    </style>
</head>
<body>
    <div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>

九、CSS盒子模型

1、盒子模型的介绍

（1）理解

  • 浏览器在渲染网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称为盒子
  • 页面中的每一个标签，都可看作是一个“盒子”，通过盒子的视角更方便的进行布局

（2）分类：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

image.png

2、内容区域（content）---宽高

（1）作用：利用 width 和 height 属性默认设置是盒子内容区域的大小

（2）属性：width 和 height

代码示例

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

3、边框（border）

（1）作用：表示盒子的边界，它可以设置成可见的，样式多样的

（2）边框-连写形式：

1、属性名：border

2、属性值：border：10px solid red;

3、注意点：单个取值的连写，取值之间以空格隔开，即 border：粗细 线条样式 颜色;

（3）边框-单方向设置

1、场景：只给盒子的某个方向单独设置边框

2、属性名：border-方位名词

3、属性值：border-top：10px solid red;（同连写取值一致）

4、方位名词有：

border-top：上边界

border-bottom：下边界

border-left：左边界

border-right：右边界

（4）边框-单个属性

1、作用：设置边框粗细、边框样式、边框颜色效果

2、单个属性：

（1）边框粗细

border-width:数字+px;

（2）边框样式

border-style:取值（solid ---实线 ；dashed---虚线；dotted---点线）

（3）边框颜色

border-color:颜色取值

4、内边距（padding）

（1）作用：设置边框与内容之间的距离

（2）属性值：padding:数字+px

属性简写：

padding:5px;（上下左右都有5px内边距）

padding:5px 10px;（上下为5px，左右为10px）

padding:5px 10px 20px;（上为5px，左右为10px，下为20px）

padding:5px 10px 20px 40px;（上为5px，右为10px，下为20px，左为40px）

（3）单方向设置：

padding-left是左内边距

padding-right是右内边距

padding-top是上内边距

padding-bottom是下内边距

（4）注意点：padding会影响盒子实际的大小，若盒子已经有了宽或高，此时再指定内边框会撑大盒子

5、外边距（margin）

（1）作用：控制盒子与盒子之间的距离

（2）属性值：margin:数字+px

属性简写：

margin:5px;（上下左右都有5px外边距）

margin:5px 10px;（上下为5px，左右为10px）

margin:5px 10px 20px;（上为5px，左右为10px，下为20px）

margin:5px 10px 20px 40px;（上为5px，右为10px，下为20px，左为40px）

（3）单方向设置：

margin-left是左外边距

margin-right是右外边距

margin-top是上外边距

margin-bottom是下外边距

十、CSS浮动

1、伪元素

（1）场景：能够使用伪元素在网页中创建内容，一般页面中的非主体内容可以使用伪元素

（2）元素与伪元素的区别：元素-HTML设置的标签；伪元素-由CSS模拟出的标签效果

（3）种类：

：：before ---在父元素内容的最前添加一个伪元素

：：after ---在父元素内容的最后添加一个伪元素

（4）注意点：

1、必须设置 content 属性才能生效

2、伪元素默认是行内元素

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before {
            /* 内容 */
            content: '老鼠';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 默认为行内元素，宽高不生效 */
            display: inline-block;
        }
        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素：通过CSS创建标签--一些装饰性的不重要的东西 -->
    <div  class="father">爱</div>
</body>
</html>

2、标准流

（1）含义：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

（2）常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行

行内元素/行内块元素：从左往右，水平布局，空间不够自动折行

3、浮动

（1）作用：清除标签与标签之间的距离，如去掉div与div之间的间距

（2）代码：float: left;

（3）特点：

1、浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4、浮动元素有特殊的显示效果：一行可以显示多个、可以设置宽高

（4）注意点：浮动的元素不能通过 text-align:center 或者 margin:0 auto 来居中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 浮动的标签 顶对齐 */
        /* 浮动：在一行排列，宽高生效  ---浮动后的标签具备行内块特点 */
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-top: 50px;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
            /* 因为有浮动，不能生效---盒子无法水平居中 */
            margin: 0 auto;
        }
        .three {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

4、清除浮动

（1）含义：清除浮动带来的影响---如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

（2）原因：子元素浮动后脱标--->不占位置

（3）目的：需要父元素有高度，从而不影响其他网页元素的布局

（4）方法：

方法1：给父盒子高度

/* 清除浮动 */
.box {
    /* 第一种方式：给父盒子高度---box为父盒子 */
    height: 50px;  
}

方法2：额外标签法：在最后一个浮动标签后，新添加一个标签

/* 清除浮动 */
.clear{
      /* 第二种方式：额外添加一个标签 */
　　　clear:both;
　　　width:0;
　　　height:0;
}

方法3：overflow方法：父级添加overflow属性方法

/* 清除浮动 */
.box {
    /* 第三种方式：overflow方法 */
    overflow: auto;
}

方法4：伪元素方法：为父元素添加after伪元素清除浮动（推荐）

/* 清除浮动-伪元素方法 */
.clearfix {
    *zoom: 1;
    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.clearfix::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

方法5：双伪元素方法：为父元素添加before和after双伪元素清除浮动

/* 清除浮动-双伪元素方法 */
.clearfix:after,.clearfix:before {
    content: "";
    display: table;
}
 
.clearfix:after {
    clear: both;
}
 
.clearfix {
    *zoom: 1;
}

十一、CSS定位

1、基本介绍

（1）网页常见布局方式：

标准流：块级元素独占一行，垂直布局；行内元素/行内块元素一行显示多个，水平布局

浮动：可以让原本垂直布局的块级元素变成水平布局

定位：可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况

（2）常见应用场景：

解决盒子与盒子之间的层叠问题

让盒子始终固定在屏幕中的某个位置

2、基本使用

（1）设置定位方式：

属性名：position

常见属性值：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）

（2）设置偏移值：偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

偏移值选取的原则：就近原则（离哪边近用哪个）

left---数字+px---距离左边的距离

right---数字+px---距离右边的距离

top---数字+px---距离上边的距离

bottom---数字+px---距离下边的距离

3、静态定位

（1）代码：position：static

（2）特点：没有定位，当我们没有写定位的时候默认就是静态定位

4、相对定位

（1）介绍：相对于自己之前的位置进行移动

（2）代码：position:relative;

（3）特点：

1、需要配合方位属性实现移动

2、相对于自己原来位置进行移动

3、在页面中占位置，即没有脱标

（4）应用场景：用于小范围的移动，配合绝对定位组CP（子绝父相）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 如果left和right都有，以left为准;top和bottom都有，以top为准 */
            position: relative;
            left: 100px;
            top: 200px;


            right: 200px;
            bottom: 400px;

            /* 1、占有原来位置
               2、仍然保留标签原有的显示模式特点
               3、改变位置参照自己原来的位置
            */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>理智，是一朵花，盛开于智慧的春风申;情感，是一阵雨，常常将这一朵花摧残。情与理，对立而又共生于现实世界。</p>
    <div class="box">box</div>
    <p>情感、这一人类与生俱来的元素在一代仁人贤士的一生中抒写得淋漓尽致。</p>
</body>
</html>

5、绝对定位

（1）介绍：相对于非静态定位的父元素进行定位移动

（2）代码：position:absolute;

（3）特点：

1、需要配合方位属性实现移动

2、默认相对于浏览器可视区域进行移动

3、在页面中不占位置，即已经脱标

（4）应用场景：子绝父相

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 绝对定位：
                1、先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位
                2、有父级，但父级没有定位，以浏览器窗口为参照物进行定位
            */
            /* 第一种：父级没有定位 */
            position: absolute;
            /* left: 200px; */
            left: 0;
            top: 0;


            /* 1、脱标，不占位置
               2、改变标签的显示模式特点：具备了行内块的特点（在一行共存，且宽高生效）
            */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>理智，是一朵花，盛开于智慧的春风申;情感，是一阵雨，常常将这一朵花摧残。情与理，对立而又共生于现实世界。</p>
    <div class="box">box</div>
    <p>情感、这一人类与生俱来的元素在一代仁人贤士的一生中抒写得淋漓尽致。</p>
</body>
</html>

6、固定定位

（1）介绍：相对于浏览器进行定位移动

（2）代码：position:fixed;

（3）特点：

1、需要配合方位属性实现移动

2、相对于浏览器可视区域进行移动

3、在页面中不占位置，即已经脱标

（4）应用场景：让盒子固定在屏幕中的某个位置

CSS代码示例：

<style>
    .box {
        position: fixed;
        left: 0;
        top: 0;

        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

7、元素层级问题

（1）不同布局方式元素的层级关系：标准流 < 浮动 < 定位

（2）不同定位之间的层级关系：相对、绝对、定位默认层级相同，此时HTML中写在下面的元素层级更高，会覆盖上面的元素

十二、CSS装饰

1、垂直对齐方向

（1）属性名：vertical-align

（2）属性值：

baseline---默认，基线对齐

top---顶部对齐

middle---中部对齐

bottom---底部对齐

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 200px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="../images/3.jpg" alt=""><input type="text">
</body>
</html>

2、光标类型

（1）场景：设置鼠标光标在元素上时显示的样式

（2）属性名：cursor

（3）场景属性值：

default ---默认值，通常是箭头

pointer ---小手效果，提示用户可以点击

text ---工字型，提示用户可以选择文字

move ---十字光标，提示用户可以移动

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            
            /* 手型 */
            /* cursor: pointer; */
            /* 工字型，表示可以复制 */
            /* cursor: text; */
            /* 十字光标，可以移动 */
            cursor: move;
        }
    
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

3、边框圆角

（1）场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

（2）属性名：border-radius

（3）常见取值：数字+px、百分比

（4）赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

（5）常见应用：

画一个正圆：盒子必须是正方形，设置边框圆角为盒子宽高的一半

胶囊按钮：盒子必须是长方形，设置边框圆角为盒子高度的一半

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 正圆：正方形，border-radius取值为宽高的一半 */
            border-radius: 50%;
        }

        /* 胶囊状：长方形，border-radius取值为高度的一半 */
        .two {
            width: 400px;
            height: 200px;
            background-color: skyblue;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

4、overflow溢出部分显示效果

（1）溢出部分：指的是盒子内容部分所超出盒子范围的区域

（2）场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条........

（3）属性名：overflow

（4）常见属性值：

visible ---默认值，溢出部分可见

hidden ---溢出部分隐藏

scroll ---无论是否溢出，都显示滚动条

auto ---根据是否溢出，自动显示或隐藏滚动条

CSS代码示例：

<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: pink;

        /* 溢出隐藏 */
        /* overflow: hidden; */

        /* 溢出滚动：无论内容是否超出都显示滚动条的位置 */
        /* overflow: scroll; */

        /* 根据内容是否超出判断是否显示滚动条 */
        overflow: auto;
    }
</style>

5、元素本身隐藏

（1）场景：让某元素本身在屏幕中不可见，如：鼠标:hover之后元素隐藏

（2）常见属性：

1、visibility:hidden;

2、display:none; ---推荐使用

（3）区别：visibility:hidden---占位隐藏；display:none---不占位隐藏

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .one {
            /* 占位隐藏效果 */
            /* visibility: hidden; */

            /* 不占位的隐藏 */
            display: none;
            background-color: pink;
        }

        .two {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>
avatar
文章
阅读
粉丝