1.CSS基础语法
格式：
选择器{属性1：值1；属性2：值2；}
单位：
1.px像素
2.%百分比
父容器 -> 600px, 当前容器 -> 300px
基本样式：
width、height、background-color
注释：
2.CSS样式的引入方式
1.内联样式
style属性
2.内部样式
style标签
区别：
内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开
3.外部样式
引入一个单独的CSS文件，name.css
使用<link>标签引入外部资源，rel属性指定资源跟页面的关系，href地址
样式引入的优先级：
1.在一个HTML元素内，内联样式优先级最高，会覆盖外部样式和内部样式以及浏览器默认样式
2.在hea里添加的内部样式和引入的外部样式，后添加和引入的优先级高。
3.浏览器默认样式优先级最低
3.CSS中的颜色表示法？
1.单词表示法 直接写出单词
2.十六进制表示法 #000000
3.rgb三原色表示法： rgb(255,255,255)
4.CSS背景样式？
background-color
background-img: url();
url(背景地址)
默认：会水平垂直铺满背景图
background-repeat:平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y x和y都平铺)
no-repeat 都不平铺
background-position：背景位置
x y : number(px,%) | 单词
x : left,center,right
y : top,center,bottom
background-attachment : 背景图随滚动条的移动方式
scroll ： 默认值 背景位置是按照当前元素进行偏移的
fixed ：背景位置是按浏览器进行偏移的
5.边框样式
border-style : 边框样式
solid ：实线
dashed ：虚线
dotted ：点线
hidden : 隐藏
border-width ：边框大小
px thin thick medium
border-color ：边框颜色
边框可以只针对一条边进行设置
颜色：透明颜色 transparent
边框样式优先级：
border-style:hidden > border-style:solid > boreder-style:none
复合：
border-style: top right bottom left;
border-style: top right+left bottom
border-style: top+bottom left+right
简写：
border:border-width border-style border-color
6.文字样式
font-family:字体类型
font-size:字体大小
font-weight:字体加粗
normal | bold
font-style:字体样式
7.段落样式
text-decoration ：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
text-transform：文本大小写 （针对英文）
小写：lowercase
大写: uppercase
只针对单词首字母大写：capitalize
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align：文本对齐方式
对齐方式：left，right，center
line-height：定义行高
什么是行高：一行文字的高度，上边距跟下边距相等
默认行高：不是固定值，而是变化的
取值：1. number （px）| scale （比例值，跟文字大小成比例的）
letter-spacing： 字之间的间距
word-spaceing：词之间的间距 （只针对英文）
英文和数字不自动拆行问题：
1.word-break: break-all；(非常强烈的拆行)
2.word-wrap: break-word；(不是那么强烈的拆行)
8.选择器的类别：
简单选择器：根据名称，ID，类别来选择元素
class可以定义多个样式的叠加
组合选择器：根据元素之间的特定关系来选择元素
1.div标签 + 空格 + p标签：后代选择器
后代选择器：匹配作为指定元素后代的所有元素
2.div标签 + > +p标签：子选择器
子选择器：只能选择作为某元素的子元素，不能选择到孙辈的元素
3.div标签 + “+” + p标签：
相邻的兄弟选择器
4.div标签 + ~ + p标签：
一般兄弟选择器
伪类选择器：根据某种状态来选择元素
a:link {}
a:visited{}
a:hover{}
a:active{}
link跟visited只能用于a标签
hover和active可以用作于所有标签
伪元素选择器：为一个元素的指定部分设置样式
通过伪元素选择器，可以设置元素指定部分的样式。主要用于设置元素内文本的首字母，首行的样式，或是在元素内容之前或之后插入其他内容
selector::pseudo-element{}
selector是目标元素
pseudo-element是向目标元素内，添加伪元素，并对伪元素的内容进行修饰
伪元素选择器：
::first-letter
::first-line
::before
::after
::selection
属性选择器：根据一个属性或属性值来选择元素
[attribute]:来查看html结构中，带有attribute属性的所有元素
[attribute="value"]:来查找HTML结构中，带有attribute属性，并且属性值为value的元素
[attribute~="value"]:来查找HTML结构中，带有attribute属性，并且在多个属性值中包含value的元素
[attribute|="value"]:来查找HTML结构中带有attribute属性，并且属性值以value或者是value-开头的元素
通配符选择器：
用来选择所有元素
9.列表样式
有序列表
无序列表
属性：
list-style-image:
url()
list-style-type:
none等
list-style-position:
outside
inside
简写：
list-style:list-style-type list-style-position list-style-image
10.CSS轮廓
outline-style:轮廓样式
dotted 点轮廓
dashed 虚线轮廓
solid 实线轮廓
double 双实线轮廓
none 无轮廓
hidden 隐藏轮廓
outline-color:轮廓颜色
单词，三原色，十六进制
outline-width：轮廓宽度
thin 一般为1px
medium 一般为3px
thick 一般为5px
一个特定的尺寸：以px ， em为单位
outline-offset：轮廓偏移
px
outline：轮廓简写
outline-width,outline-style,outline-color 注 outline-style是必须设置的
11.CSS边距属性
margin：
auto 浏览器自动计算的边距
length 以px，pt，cm等为单位指定边距
% 以父元素宽度的百分比来指定边距
简写：
margin: 上边距px 右边距px 下边距px 左边距px 四个值
margin: 上边距px 左右边距px 下边距px 三个值
margin：上下边距px 左右边距px 两个值
margin：上下左右边距px 一个值
注：边距塌陷
12.CSS填充
padding：
简写：
padding:顶部px 右部px 底部px 左部px 四个值
padding:顶部px 左右部px 底部px 三个值
padding：顶底部px 左右部px 两个值
padding：上下左右px 一个值
13.CSS盒模型
标准盒模型
怪异盒模型
14.CSS布局之显示属性
display:
block 元素显示为块级元素
inline 元素显示为行内元素
none 隐藏元素
visibility:
hidden 也可以隐藏元素，但是保留元素的原有空间
visible 可以重新显示样式
15.CSS布局之元素类型
行内元素不能设置宽高样式
行内元素可以设置边框线样式
行内元素可以设置内填充样式
行内元素可以设置左右方向的外边距样式
display：
inline-block 既保留inline元素的特点，也保留block元素的特点
设置一个元素的display属性只能改变该元素的显示方式，而不能真正的改变html元素的类型。
16.CSS嵌套规则
规则1：
块元素可以包含行内元素或某些块元素，但行内元素却不能包含块元素，它只能包含其他的行内元素
规则2：
块元素不能放在p元素里面
规则3：
有几个特殊的块级元素只能包含行内元素，不能再包含块元素，这几个特殊的元素是：h1-h6，p，dt
规则4：
块级元素一般与块级元素并列，行内元素一般与行内元素并列
17.块级元素和行内元素
块级元素：
每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。
常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>，表格标签，水平分割线<hr>,预格式化<pre>,图像映射map，表单标签
行内标签：
行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。
一般不可以设置宽度，高度以及对齐等属性。
常见的行内元素有：<a >,<strong>,<b>,<em>,<del>,<span >等
默认的宽度就是它本身的宽度
行内块级元素：
块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素
18.CSS布局之溢出处理
overflow：
visible 默认。溢出的内容没有被剪掉
hidden 溢出的内容被剪切
scroll 溢出的内容被剪掉了
auto 类似于scroll
overflow-y：
overflow-x：
text-overflow：
19.CSS布局之浮动基础
float:
left 左浮动
right 右浮动
none 不浮动
20.CSS布局之浮动清理
clear:
left 表示当前元素不受到左浮动的影响
right 当前元素不受右浮动的影响
both 左右都不受影响
21.CSS布局之定位
position：
static 静态定位
relative 相对定位
相对样式需要配合left，top,right,bottom这些定位属性才能生效
relative 相对的是容器自身的屏幕坐标0 ，0点
容器位置发生位移后，原来占据的空间依然会保留
默认会覆盖没有定位的容器
fixed 固定定位
固定定位的元素是相对于浏览器视口定位的，这意味着即使发生滚动，它也始终保持在同一个位置
top，right，bottom left属性被用来定位元素，但不是必须的
absolute 绝对定位
绝对定位的元素会脱离文档流
绝对定位的参照点为，有定位设置的离他最近的祖先元素的0，0点坐标
绝对定位的容器默认会覆盖没有定位的容器
sticky 粘性定位
父元素不能添加 overflow：hidden 或者 overflow：auto属性
元素自身必须声明top ，bottom，left，right一个或是多个属性，否则就相当于静态定位了
父元素的高度不能低于sticky定位元素的高度
sticky定位元素仅在其父元素内生效
粘性定位初始状态相当于static定位
相对于父容器的定位条件符合时，容器变现为固定定位
top，right，bottom，left至少声明一个，粘性定位才能生效
22.CSS定位的堆叠顺序
盒模型的布局
正常文档流，浮动，定位
z-index：
容器的堆叠顺序的计算，是先比较同级容器的。子容器是不会超出父容器的堆叠顺序的。
23.光标
cursor：值
光标的种类
24.宽高自适应
通常才用：max-width max-height min-width min-height进行设置，同时width height 才用%
