本文已参与「新人创作礼」活动，一起开启掘金创作之路
1 CSS概述
概念 :CSS（Cascading Style Sheets）:层叠样式表，又叫级联样式表，简称样式表 功能：美化页面。
1.1 CSS的使用
1.1.1 CSS样式的使用方式
内联样式：写在开始标记中，针对单独的一个标记元素起作用
内部样式：写在HTML页面中的<head>标记里
外部样式：写在单独定义的一个以.css结尾的文件中，该文件要引入进来
1.1.2 CSS样式的优先级
- 浏览器默认设置样式
- 外部样式或者内部样式 就近原则
- 内联样式
优先级由上往下，由低到高的
1.2 选择器(针对于外部样式或者内部样式)
（1）元素选择器/标记选择器
（2）类class选择器
- 常规用法：
先在开始标记中定义class=””属性
选择器通过'.className{}'的方式调用
- 高级用法：
将标记选择器和类选择器结合使用
语法：标记选择器'.className{ }'
（3）id选择器
- 根据id的值来查找
- 先在开始标记中定义'id'的值，一般'id'的值是要保证唯一的
- 选择器通过'#idName{}'的方式来获取
说明：优先级'id>class>标记'
（4）选择器分组
- 一般将一些相同的样式作用于多个标记元素中
- 语法：将多个选择器写在一起，用逗号分隔开
（5）派生选择器
- 通过依据标记元素在其位置的上下文关系来定义样式
- 语法：选择器使用空格分隔开
例如: h3 div span p{ xxxx }
<h3>
<div>
<span>
<p id=” ”></p>
</span>
</div>
</h3>
（6）伪类选择器
伪类用于向某些标记添加特殊的效果
语法：使用冒号作为分隔符，左边是选择器，右边是伪类
选择器:'link' 未访问
选择器:'visited' 访问后
选择器:'hover' 鼠标指向时
选择器:'active' 鼠标按下时
2、尺寸和边框
2.1 尺寸/大小（宽度 高度）
'width' 宽度
'height' 高度
'overflow' 当内容溢出时如何处理
'visible' 默认，内容超出会溢出
'hidden' 超出部分隐藏
'scroll' 显示滚动条，不管内容会不会溢出，都有有滚动条
'auto' 自动适应，如果内容未溢出，不显示滚动条，如果内容溢出才会显示滚动条
2.2 边框
--简单写法：
border:width style color; 线宽 样式 颜色
--单边写法1：
border-left/right/top/bottom:width style color;
--单边写法2
border-left/right/top/bottom-width: 只设置边框的线宽
border-left/right/top/bottom-style: 只设置边框的类型
border-left/right/top/bottom-color: 只设置边框的颜色
2.3 框模型—盒子模型
- 框模型/盒子模型包含：外边距+边框+内边距
（1）内边距:内容和边框之间的距离
单边写法：
padding-left/right/top/bottom:value
简单写法：
padding:v1 v2 v3 v4 top right bottom left
（2）外边距:与下一个控件之间的距离
单边写法：
margin-left/right/top/bottom:value值
简单写法：
margin:v1 v2 v3 v4 top right bottom left
4、背景
4.1 背景颜色
background-color:red/#ff0000;
4.2 背景图片
background-image:url(“图片名称”);
4.2.1 背景图片的重复问题
- 默认情况下，背景图片在水平和垂直方向上重复出现，创建一种称为“墙纸”的效果。
- 可以使用'background-repeat'属性控制背景图片的平铺效果
1）'repeat' 默认,在垂直和水平方向重复
2）'repeat-x' 仅在水平方向上重复
3）'repeat-y' 仅在垂直方向上重复
4）'no-repeat' 仅显示一次
4.2.2 背景定位
'background-position'属性改变图片在背景中的位置
1）x y 第一个是水平位置
第二个是垂直位置
2）'left' 左边显示
'center' 居中显示
'right' 右边显示
'top' 顶部显示
'bottom' 底部显示
4.2.3 背景图片的固定
'background-attachment'
--默认情况下，背景图片会随着页面的滚动而移动
--可以通过'background-attachment'来设置
1)默认值'scroll'，会随着滚动而移动
2)'fixed'，固定，背景图片不会移动
5、文本
5.1 控制字体
font-family:字体; 设置字体的
font-size:数字; 设置字体大小
font-weight:nomal/bold;正常/粗体
5.2 控制文本格式
- 文本颜色 color:颜色
- 文本排列（水平对齐方式）说明：只能用于块标记
text-align:”left/center/right”
- 文本修饰（下划线）
text-decoration:none/underline
- 行高
line-height:数字距离
- 首行文本缩进
text-indent:数字距离
6、定位
6.1 定位的概念
定位：定义元素内容相对于其正常位置应该出现的位置。
6.2 分类
- 普通流定位（默认）
- 浮动定位
- 相对定位
- 绝对定位
- 固定定位
6.3 普通流定位（默认）
- 块标记:页面中的块级标记从上到下一个接一个的排列；每一个块级标记都会出现在一个新行中。
- 行内标记:将在一行中从左往右水平排列；不需要从新行开始。
6.4 浮动定位
- 浮动定位是指：
- 1）将元素排除在普通流定位之外
- 2）将元素浮动以后，可以向左边或者右边移动，直到碰到边框或者另一个浮动的元素为止。
- 3）浮动定位一般来实现特定的定位效果
- 浮动定位的属性：在CSS中，任何元素都可以浮动
float:none/left/right;
- clear属性，用于清除浮动带来的影响。（定义了元素的那边上不允许出现浮动元素）
clear:none/left/right/both;
6.5 相对定位
position属性：更改定位模式为相对、绝对或者固定定位
position:relative/absolute/fixed
- ①设置定位模式'relative'
- ②偏移量
- 'left/right'水平位置的偏移
- 'top/bottom'垂直偏移
- ③相对定位元素原本所占的空间保留
- ④相对定位是相对于它原来位置进行偏移的距离
6.6 绝对定位
对元素进行绝对定位的设置，会让该元素从普通定位流中移除，不占用空间（理解为浮起来了效果）
- ①设置定位模式为'absolute'
- ②偏移量
- 'left/right'水平位置的偏移
- 'top/bottom'垂直偏移
堆叠顺序
- (1)一旦修改了元素的定位方式，则元素可能会发生堆叠。
- (2)可以使用'z-index'属性来控制元素出现堆叠的顺序。
- (3)'z-index'属性
-- 值为数值，数值越大表示堆叠顺序更高，即离用户更近
-- 数值可以设置为负值，表示离用户更远
6.7 固定定位
设置固定定位：
- (1)设置'position'的值为'fixed'
- (2)也是通过'left top right bottom'来定义元素的位置
固定定位的特点：
- (1)固定定位会将元素从普通流定位中完全移除，不占用页面的空间。
- (2)当页面向下滚动时,不会跟着一起移动
7、显示方式
（1）设置元素的显示隐藏
display:none;/*让元素不再显示，不占用文档的空间*/
（2）设置块标记为行内标记特性
display:inline;
（3）设置行内标记为块标记特性
display:block;
8、光标
使用cursor属性来设置光标的形状，可使用的值：
- 'default'
- 'pointer'
- 'crosshair'
- 'text'
- 'wait'
- 'help'
9、列表样式
list-style-type属性用于控制列表中列表项的样式
1）无序列表
- 'none' 无标记
- 'disc' 实心圆，默认
- 'circle' 空心圆
- 'square' 实心方块
2）有序列表
- 'none' 无标记
- 'decimal' 数字(1,2,3..)默认的
- 'lower-roman' 小写罗马数字
- 'upper-roman' 大写罗马数字
- 'list-style-image' 属性用图片来替换列表项的符号
取值：url()
10、关于元素隐藏
- 1）display:none/block/inline
隐藏 显示
让元素不再显示，不占用文档的空间
- 2）visibility:hidden/visible
隐藏 显示
占位隐藏
11、关于列表的嵌套使用
在一个列表中可以嵌套另一个列表来使用
