CSS基础知识，必须掌握！！！

这篇具有很好参考价值的文章主要介绍了CSS基础知识，必须掌握！！！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Background（背景）

CSS背景属性用于定义HTML元素的背景
CSS属性定义背景效果：

background-color -> 定义背景颜色
background-image -> 定义背景图片
background-repeat -> 是否平铺，水平平铺（repeat-x）、垂直平铺（repeat-y）、不平铺（no-repeat）
background-attachment -> 是否固定背景图片，不随滚动而发生位置改变
background-position -> 背景图片位置（top、left、right）

<!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>背景元素</title>
    <style>
        body {
            background-image: url(image/lisa.jpeg);
            background-color: pink;
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
    <p>有点意思</p>
</body>
</html>

注意： 段落多的用意是为了显示图片固定的效果

CSS文本格式

文本颜色

颜色属性可以用来设置文字的颜色。
CSS中的颜色经常的指定

十六进制值如：#FFFFFF
一个RGB值如： RGB(255,0，0)
颜色的名称如： red、pink、blue

style {
	h1 {
		color:red;
	}
	h2 {
		color:#ff00ff;
	}
	p {
		color:RGB(255,0,0);	
	}
}

文本对齐格式

文本排列属性是用来设置文本的水平对齐格式
文本可居中或者左对齐及右对齐

用法：

text-align:center -> 居中对齐
text-align:left -> 左对齐
text-align -> 右对齐

<!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>文本对齐</title>
    <style>
        p {
            text-align:center;
            color: red;
        }
    </style>
</head>
<body>
    <p>
        真的很有意思
    </p>
</body>
</html>

文本修饰

text-decoration属性用来设置或删除文本的装饰
注意： 主要用来删除超链接的下划线

案例：

<!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>文本装饰</title>
    <style>
        p a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>这是一个超链接:<a href="#">去往有点意思的地方</a></p>
</body>
</html>

文本缩进

**特点：**文本缩进是用来指定文本第一行的缩进
演示：

<!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>文本缩进</title>
    <style>
        #one {
            /* text-indent: 2em; */
            text-indent: 50px;
        }
    </style>
</head>
<body>
    <p id="one">还是有点意思啊</p>
    <p>这就没意思了啊</p>
    <p>这就没意思了啊</p>
    <p>这就没意思了啊</p>
    <p>这就没意思了啊</p>
</body>
</html>

注意： 如果要使用首行缩进两个字，可以使用2em,每个em都会自己计算每个文字缩进的大小。

CSS中的字体

CSS中字体属性定义字体、加粗、大小、文字样式
**字体系列：**可以设置为宋体、微软雅黑等等。

<!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>字体样式</title>
    <style>
        h1 {
            font-family:"Times New Roman",Times,serif;
        }
    </style>
</head>
<body>
    <h1>有点意思</h1>
</body>
</html>

字体样式

用途： 主要用来指定斜体文字的字体样式属性
主要有三个值：

正常-正常显示文字 {font-style:normal;}
斜体-以斜体来显示文字 {font-style:italic;}
倾斜的文字-文字向一般倾斜 {font-style:oblique;}

CSS链接（link）

链接的样式可以用CSS属性来设置，如颜色、字体、大小等
常见的链接伪类选择器：

a:link -> 未被访问的链接
a:visited -> 已经被访问过的链接
a:hover -> 鼠标移动到链接上时显示的效果
a:active -> 链接被点击的那一时刻，鼠标未松开

注意： 若设置若干链接样式，也有一些顺序规则

a:hover 必须跟在a:link 和 a:visited 的后面
a:active 必须跟在a:hover 的后面

演示：

<!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>链接伪类</title>
    <style>
        
        a:link {
            color: yellow;
            text-decoration: none;
        }
        a:visited {
            color: red;
        }

        a:hover {
            color: orange;
        }

        a:active {
            color: pink;
        }
        
    </style>
</head>
<body>
    <a href="#" target="_blank">有点意思</a>
</body>
</html>

CSS列表

在HTML中设置列表有两种类型：

无序列表ul，在CSS中可以设置列表标记项（如：小黑点、小方框等）
有序列表ol，列表项可以是数字也可以是字母

在CSS中可以进一步给出样式，并可以用图像作为列表标记项

不同列表标项

CSS中list-style-type 可以指定列表标记项类型
实例：

<!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>列表标记项</title>
    <style>
        .a {
            list-style: circle;
        }
        .b {
            list-style: square;
        }

        .c {
            list-style: lower-roman;
        }

        .d {
            list-style: upper-latin;
        }

    </style>
</head>
<body>
    <ul class="a">
        <li>有点意思</li>
        <li>真有意思</li>
        <li>太有意思</li>
    </ul>

    <ul class="b">
        <li>有点意思</li>
        <li>真有意思</li>
        <li>太有意思</li>
    </ul>

    <ol class="c">
        <li>有点意思</li>
        <li>真有意思</li>
        <li>太有意思</li>
    </ol>

    <ol class="d">
        <li>有点意思</li>
        <li>真有意思</li>
        <li>太有意思</li>
    </ol>
</body>
</html>

CSS列表项用图片作为标记

用法： 使用list-style-image： 可以设置图像列表标记项
示例：

<!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>图像列表标记项</title>
    <style>
        .a {
            list-style-image:url(image/lisa.jpeg);
        }
    </style>
</head>
<body>
    <ul class="a">
        <li>有点意思</li>
        <li>真有意思</li>
        <li>太有意思</li>
    </ul>
</body>
</html>

CSS列表标记项位置

这CSS中可以使用list-style-position设置列表标记项位置
一般有三个属性：

inside -> 列表项标记放在文本内，环绕文本根据标记对齐
outside -> 默认值。保持标记文本的左侧
inherit -> 表示从父亲元素继承list-style-position的值

示例：

<!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>图像列表标记项</title>
    <style>
        .a {
            list-style-image:url(image/lisa.jpeg);
        }
    </style>
</head>
<body>
    <ul class="a">
        <li>有点意思</li>
        <li>真有意思</li>
        <li>太有意思</li>
    </ul>
</body>
</html>

CSS中表格（table）

表格边框

用法： 指定表格边框，使用boarder属性

<!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>表格边框</title>
    <style>
        table,th,td {
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>数据类型</th>
            <th>大小</th>
        </tr>
        <tr>
            <td>byte</td>
            <td>1字节</td>
        </tr>
        <tr>
            <td>short</td>
            <td>2字节</td>
        </tr>
        <tr>
            <td>int</td>
            <td>4字节</td>
        </tr>
    </table>
</body>
</html>

折叠边框

用法： 使用boarder-callopse设置表格边框是否折叠为单个边框或者分开

<!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>表格边框</title>
    <style>
        table,th,td {
            border: 1px solid pink;
        }
        table {
            /* 指定折叠边框 */
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>数据类型</th>
            <th>大小</th>
        </tr>
        <tr>
            <td>byte</td>
            <td>1字节</td>
        </tr>
        <tr>
            <td>short</td>
            <td>2字节</td>
        </tr>
        <tr>
            <td>int</td>
            <td>4字节</td>
        </tr>
    </table>
</body>
</html>

设置表格的宽度和高度

用法： 使用height和width属性分别设置表格的宽度和高度

<!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>表格边框</title>
    <style>
        table,th,td {
            border: 1px solid pink;
        }
        table {
            /* 设置表格宽度和高度 */
            width: 400px;
            height: 50px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>数据类型</th>
            <th>大小</th>
        </tr>
        <tr>
            <td>byte</td>
            <td>1字节</td>
        </tr>
        <tr>
            <td>short</td>
            <td>2字节</td>
        </tr>
        <tr>
            <td>int</td>
            <td>4字节</td>
        </tr>
    </table>
</body>
</html>

表格文字对齐方式

用法： 使用text-align属性一般设置center（居中对齐）、left（居左对齐）、right（居右对齐）；使用vertical-align可以实现垂直方向对齐，top（顶部对齐）、bottom（底部对齐）。

<!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>表格边框</title>
    <style>
        table,th,td {
            border: 1px solid pink;
        }
        td {
            /* 设置表格文字对齐方式 */
            text-align: center;
        }
        td {
            /* 设置垂直对齐 */
            height: 50px;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>数据类型</th>
            <th>大小</th>
        </tr>
        <tr>
            <td>byte</td>
            <td>1字节</td>
        </tr>
        <tr>
            <td>short</td>
            <td>2字节</td>
        </tr>
        <tr>
            <td>int</td>
            <td>4字节</td>
        </tr>
    </table>
</body>
</html>

表格填充与表格颜色

表格填充： 如需设置表格中的内容与边框的距离可以使用pidding属性设置相应的像素值
表格颜色： 可以使用background-color 设置表个背景颜色，color直接可以设置表格中的字体颜色。

<!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>表格边框</title>
    <style>
        table,th,td {
            border: 1px solid pink;
        }
        td {
            /* 控制表格内容与边框的距离 */
            padding: 20px;
        }
        th {
            background-color: orange;
            color: white;
        }
        
    </style>
</head>
<body>
    <table>
        <tr>
            <th>数据类型</th>
            <th>大小</th>
        </tr>
        <tr>
            <td>byte</td>
            <td>1字节</td>
        </tr>
        <tr>
            <td>short</td>
            <td>2字节</td>
        </tr>
        <tr>
            <td>int</td>
            <td>4字节</td>
        </tr>
    </table>
</body>
</html>

CSS盒子模型

说明： 所有HTML元素都可以看作为一个盒子模型，CSS盒子模型本质上就是一个盒子，它包括：边距、边框、填充、内容。
CSS基础知识，必须掌握！！！

Margin（外边距） -> 清除边框外的区域，外边距是透明的。
Borader（边框） -> 围绕在内边距和内容外的边框。
Padding （内边距）-> 内容周围区域，内边距也是透明的
Content （内容） -> 盒子中的内容，显示图像和文字

元素的宽度和高度

注意： 一般指定一个CSS元素的宽度和高度属性时，你只是设置内容上的宽度和高度。完整的大小元素，你还需要添加内边距、边框、外边距

下面看一个例子理解：

<!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>盒子模型</title>
    <style>
        div {
            background-color: pink;
            width: 600px;
            height: 400px;
            /* 边框大小30像素、实线、橙色 */
            border: 30px solid orange;
            padding: 40px;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div>
        看看我吧，真的有点意思
    </div>
</body>
</html>

CSS基础知识，必须掌握！！！

CSS边框

在CSS中允许设置一个元素边框的样式和颜色，比如有四条边的边框和不是方形的边框也是可以设置的。

边框样式

用法： 一般通过boarder-style属性来定义边框的样式

值	说明
none	默认无边框
dotted	定义一个点线边框
solid	定义实线边框
double	定义两个边框，两个边框宽度相同
groove	定义3D沟槽边框，效果取决于边框颜色值
ridge	定义3D脊边框，效果取决于边框颜色值
inset	定义3D嵌入边框，效果取决于颜色值
outset	定义3D突出边框，效果取决于颜色值

边框宽度和颜色

通过borader-color可以设置边框的颜色，颜色三种写法
通过borader-width可以设置边框的宽度，给定响应的像素值

边框单独设置各边

说明： 在CSS中可以指定不同侧边不同的边框

通过boarder-top-style设置上边框的样式
通过boarder-right-style设置右边框的样式
通过boarder-bottom-style设置下边框的样式
通过boarder-left-style设置左边框的样式

CSS轮廓（outline）属性

说明： 轮廓位于边框边缘的外围，可起到突出元素的作用。
使用： outline属性规定元素轮廓的样式、颜色、宽度。
属性值：

outline-color -> 设置轮廓的颜色
outline-style -> 设置轮廓的样式
outline-width -> 设置轮廓的宽度

属性	值
outline-color	颜色的三种表达方式
outline-style	none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit
outline-width	thin、medium、thick、length、inherit

CSS块级元素、行内元素、行内快元素

块级元素： 块级元素占用了全部的宽度（页面一整行），收尾都是换行符。
行内元素： 行内元素只需要必要的宽度，不强制换行
行内块元素： 行内快元素既有块级元素的特点也有行内元素的特点，主要特点就是它可以指明宽度和高度。

块级元素举例：

行内元素举例：

行内快元素： 行内块元素可以从块级元素和行内元素转换而来，同时，块级元素可以转换为行内元素，行内元素也可以转换为块级元素。
转换方式：

display:inline-block -> 转换为行内块元素
dispaly:inline -> 转换为行内元素
display:block -> 转换为块级元素

例子： 这是一个块级元素转换为行内块元素的例子

<!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>块级元素</title>
    <style>
        div.a {
            display: inline-block;
            width: 200px;
            height:100px;
            background-color: pink;
            font-size: 20px;
        }
        div.b {
            display: inline-block;
            width: 200px;
            height:100px;
            background-color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="a">有点意思</div>
    <div class="b">我也有点意思</div>
</body>
</html>

CSS中的position定位

说明： position属性指定了元素的定位类型
属性值：

static -> 无特殊定位
relative -> 相对定位元素移动
fixed -> 相对于浏览器位置是固定的，不随滚轮滑动而改变位置
absolute -> 相对于已经定位的父元素，如果元素没有已经定位的父元素，这个父元素就是
stiky -> 粘贴定位依赖与滚轮来定位，滚轮往下滚的时候效果才能显示出来

例子： 这是一个粘贴定位的例子
注意： 指定属性后一定要制定粘贴定位的位置，否则不起效果

<!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>元素定位</title>
    <style>
        p.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 10px;
            border: 5px solid pink;
            background-color: orange;
        }
    </style>
</head>
<body>
    <p class="sticky">有点意思</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
    <p>滑动滚轮</p>
</body>
</html>

CSS中 overflow的用法

说明：

值	说明
inherit	从父元素继承overflow的值
visible	默认值，内容不会被修剪，呈现在元素框之外
hidden	内容会被修剪，其余内容不会呈现
scroll	内容会被修剪，但是浏览器显示滚动条呈现
auto	如果内容被修剪，浏览器显示滚动条查看其余内容

例子： 演示scroll效果

<!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>overflow的使用</title>
    <style>
        div {
            width: 200px;
            height:50px;
            border: 5px solid pink;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        <p>有点意思</p>
        <p>有点意思</p>
        <p>有点意思</p>
        <p>有点意思</p>
    </div>
</body>
</html>

CSS浮动（Float）

作用： 一般这个属性会用于一段文字中的图片浮动，可以图片浮动在文字的左边，也可以浮动在文字的右边。

用法： 在图片标签使用属性float

float:left -> 浮动在文字左边
float:right -> 浮动在文字右边
float:inline-start -> 浮动在文字的开头
float:inline-end -> 浮动在文字的结尾

<!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>float的使用</title>
    <style>
        p img{
            float: inline-start;
        }
    </style>
</head>
<body>
    <p> <img src="image/lisa.jpeg" width="200px">
        --有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思--
        --有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思--
        --有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思--
        --有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思--
        --有点意思----有点意思----有点意思----有点意思----有点意思----有点意思----有点意思--
    </p>
</body>
</html>

CSS中的对齐&垂直居中对齐

说明： CSS中的对齐无非就两种，一种是使用特点的属性使元素居中对齐，还有一种就是通过指定的宽度将两边的边距平均分配。

元素div对齐，可以使用margin：auto
表格中的文本居中对齐可以只用padding设置左右边距一样可以实现居中对齐

元素居中对齐

例子： div元素居中对齐

<!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>对齐&垂直居中对齐</title>
    <style>
        div {
            background-color: pink;
            border: 3px solid orange;
            margin: auto;
            /*如果没有设置则起不到效果*/
            width: 60%;
        }
    </style>
</head>
<body>
    <div>
        有点意思
    </div>
</body>
</html>

文本居中对齐

说明： 最常用text-align:center就能实现

图片居中对齐

说明： 可以是图片元素包裹到块级元素中，让块级元素居中对齐，例如吧img元素包裹到p标签中，让p标签中的内容居中对齐；还可以图片（行内元素）转换为块级元素，按照块级元素的方式居中对齐。

例子：包裹在块级元素中对齐

<!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>图片居中对齐</title>
    <style>
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <p><img src="image/pyy.jpeg" width="300"></p>
</body>
</html>

垂直居中对齐（使用padding）

说明：使元素的头部和底部都设置同样的边距来呈现垂直居中的效果

padding参数介绍：

参数个数	效果
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>padding参数使用</title>
</head>
<style>
    div {
        /* 设置成行内块元素就可以指定宽高 */
        display: inline-block;
        background-color: pink;
        /* padding效果在盒子宽高不够的情况下会把盒子给顶开 */
        padding: 30px 80px;
    }
</style>
<body>
    <div>
        有点意思
    </div>
</body>
</html>

CSS中的选择器

说明： 选择器就是选择对应的元素添加相应的样式，重点突出在选择方面
CSS中包含四种选择器：

后代选择器（使用空格分隔）
子元素选择器（使用>分隔）
相邻元素选择器（使用+分隔）
普通兄弟选择器（以~分隔）

后代选择器

例子： 选择div中所有的p标签添加样式

<style>
    div p {
        text-align: center;
    }
</style>

子元素选择器

说明： 与后代选择器相比，子元素选择器只能选择嵌套的一级子元素
例子：

<style>
    div>p {
        text-align: center;
    }
</style>

相邻兄弟选择器

说明： 相邻选择器在同一级中选择，或者拥有同一父元素
例子：

<style>
    div+p {
        text-align: center;
    }
</style>

普通兄弟选择器

说明： 选取指定元素之后的相邻兄弟元素
例子：

<!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>选择器</title>
    <style>
        div~p {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <p>没有意思</p>
        <p>没有意思</p>
        <p>没有意思</p>
    </div>
    
    <span>
        <p>真有点意思哦</p>
    </span>
    <p>有点意思</p>
    <p>有点意思</p>
</body>
</html>

css导航栏（重要）

说明： 导航栏主要分为垂直导航栏和水平导航栏，熟练掌握导航栏对于开发来说非常重要，导航栏同时也搭配链接来使用

水平导航栏

下面主要通过例子来介绍导航栏

<!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>水平导航栏</title>
    <style>
        a {
            display: inline-block;
            width: 230px;
            height: 40px;
            background-color: gray;
            text-decoration: none;
            line-height: 40px;
            text-indent: 3em;
            color: white;
        }

        #a {
            margin-left: -10px;
        }

        #s {
            margin-top: 200px;
            margin-left: 180px;
        }

        a:hover {
            background-color: orange;
            color: black;
        }
    </style>
</head>

<body>
    <a href="#" id="s">主页</a>
    <a href="#" id="a">国产</a>
    <a href="#" id="a">日韩</a>
    <a href="#" id="a">欧美</a>
    <a href="#" id="a">联系我们</a>
</body>

</html>

效果：
CSS基础知识，必须掌握！！！

垂直导航栏

例子： 这里尝试做一下小米侧边栏
效果图：
CSS基础知识，必须掌握！！！

<!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>小米侧边栏</title>
    <style>
        a {
            display: block;
            text-decoration: none;
            background-color: gray;
            font-size: 18px;
            text-indent: 3em;
            height: 40px;
            width: 230px;
            line-height: 40px;
            color: white;
        }

        a:hover {
            background-color: rgb(255, 103, 0);
        }
    </style>
</head>
<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">家电</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿搭</a>    
    <a href="#">健康 儿童</a>    
    <a href="#">耳机 音响</a>    
    <a href="#">生活 箱包</a>    
    <a href="#">智能 路由器</a>    
    <a href="#">电源 配件</a>    
</body>
</html>