一. css是什么,有什么作用?
1、层叠样式表(英文全称：CascadingStyle Sheets)是一种用来表现HTML等文件样式的计算机语言，为html文档结构添加样式。
二、 css的结构和选择器的分类（相同样式，权重高的覆盖权重低的。）
1、css的结构： 选择器 { 样式属性名：属性值 }
2、 选择器：css样式作用的对象。
a) id选择器（不推荐使用）：具有某一特定id属性值的元素，权重为100,以#号来定义。如：#name{}
b) 类选择器（推荐使用）：具有某一class属性值的一个或者一组元素，权重为10，以.来定义，多个元素可以共用一个class属性。 如：.name{}
c) 元素选择器（推荐使用）：以元素名称来作为选择器，权重为1。如：div{}
d) 选择器嵌套（权重累加）：用父元素的选择器嵌套子元素的选择器，为选择器指定应用范围。如：ul li{}
e) 选择器分组：将选择器写在同一个样式前，以逗号结尾。如：.box1,.box2{}
f) 通配符（权重0）：代表所有元素，以*号来定义。
g) 权重叠加和优先级（这个很重要）
三、css引入方式
一. 在html中引入css的三种方式:（权重相同，谁在后面谁优先，权重不同，谁大谁优先）
a) 内联样式表（不推荐使用，影响html结构，提倡结构与样式分离）:在元素的style属性中直接定义样式属性和值以分号结尾,如:<div style="width:100px;heihgt:100px;"></div>
b) 内部样式表（不推荐使用）：在style标签中直接定义样式属性和值，如：<style>div{}</style>
c) 外部样式表（推荐使用）：通过link标签引入外部css文件,如：<link rel="stylesheet" type="text/css" href="css/style.css">
四、 元素类型与盒模型。
a) 盒模型：元素内容，内边距，外边距，边框。
b) 四种元素类型：块级元素，内联元素，内联块元素，空元素。
五、 background用来设置html元素的背景。
a) background-color用来定义元素的背景颜色，值为颜色代码，如:#fff;
b) background-image用来定义元素的背景图片,值为图片地址，如:url(images/icon.png)
c) background-repeat用来设置背景图片是否平铺。
i. repeat表示平铺。
ii. no-repeat表示不平铺。
iii. repeat-x表示横向平铺。
iv. repeat-y表示纵向平铺。
d) background-position用来设置图像在元素中的位置，默认值为left,top(0%,0%)。
i. 第一个参数表示横向位置，有三个值（left,cener,right），还可以用百分比和px表示，以该元素的宽度作为参照。
ii. 第二参数表示纵向位置，有三个值（top,center,bottom），还可以用百分比和px表示，以该元素的高度作为参照。
iii. 如果只设置了第一个参数,另外一个参数将会是居中(center,50%).
六、 浮动
a) 左浮动float:left;
b) 右浮动float:right;
c) 不浮动float:none;
d) 当浮动元素的父盒子宽度不足时,它会自动换行.
七. 四大定位
a) 静态static定位：文档里正常盒子的定位。
b) 相对定位relative：盒子现在位置距离盒子原来位置有一段偏移的距离。
c) 绝对定位absolute：盒子脱离html文档，相对于某一个拥有（相对定位和绝对定位）的父盒子来定位，如果盒子的父元素都没有（相对定位和绝对定位），它相对于根元素html来定位。
d) 固定定位fixed：盒子相对于浏览器可视区域来定位。
e) 四个偏移属性：上偏移：top，right：右偏移，bottom：下偏移，left：左偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css基础知识总结</title>
<!--style元素用来定义html文档样式信息，
也称为内部样式表，type定义style元素内容为css -->
<style type="text/css">
/* css样式的结构：选择器{样式属性：属性值}
选择器：css样式作用的对象 */
/* 元素选择器：以元素名称来命令的选择器，如div */
div{
/* 为元素设置宽度，px像素为css尺寸单位 */
width:500px;
/* 为元素设置高度 */
height: 100px;
/* 行高，常用于设置元素垂直方向居中 */
line-height: 100px;
/* 为元素设置背景颜色，颜色值可以是英文，可以是颜色代码（rgb） */
background-color:rgb(34, 46, 216);
/* 与字体相关的css样式 */
/* 设置字体大小 */
font-size: 20px;
/* 设置字体粗细，bold加粗，bolder超粗 */
font-weight:bold;
/* 设置字体风格：normal正常，italic斜体，oblique倾斜 */
font-style: normal;
/* 字体系列，中文以及多个英文单词需要用双引号括起来 */
font-family: "微软雅黑";
/* 设置字体颜色 */
color: palegoldenrod;
/* 文本缩进,常用于设置负值，用于隐藏文字*/
text-indent: 50px;
/* 文本对齐，居中对齐center，两端对齐justify，左对齐left，右对齐right */
text-align:center;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="css/css基础2.css">：外部样式引入 -->
</head>
<body>
<!--div是一个没有任何意义的元素，在实战中通常当作容器使用 -->
<div>我是一个div我是一个div我是一个div我是一个div</div>
</body>
</html>