1.选择器
element Selector 元素选择器 基于元素名称
id Selector ID选择器 元素id在一个网页里具有唯一性 ，选择一个特定的元素
class Selector 类选择器 选择一组特定的元素 ，不同类型元素可以是通过一个class，一个元素可以有多个class
group Selector 组选择器 当多个元素具有相同属性和样式时可以写在一起使用逗号
Combinator Selector 组合选择器
2.注释
/* css注释*/
3.外部样式表 css文件
内部样式表 写在head中的style
内联样式 写在元素里
4.层叠效应
优先级从低到高分别是：浏览器缺省设置 -->外部样式表–>内部样式表–>内联样式
按顺序正确加载css样式
5.颜色
表示方法
（1）英文名 red blue
（2）rgb（255，0，0）红色 rgb（0，255，0）绿色
（3）#ff0000
6.单位
相对：首行缩进，元素字体属性em，rem ；元素布局 %， px；
em:相对于当前元素应有的尺寸的n倍
rem：相对于根，即html设置的尺寸，浏览器默认为16px
%：相对于父类
px：像素相对于不同设备的绝对单位，1in=96px=2.54cm
绝对
7.盒子模型
8.border
（1）border-style
none无边框
dotted 虚线边框
dashed 虚线边框
solid 实线边框
double 双边框
groove 凹槽边框
ridge 垄状边框
inset 嵌入边框
outset 外凸边框
hidden 隐藏边框
（2）border-width
上下左右px em
thin medium thick
（3）border-color
（4）简写 width style color
border：3px solid red
（5）border-redius 圆角度
9.padding
内边距，决定了内容至边线的距离，透明，撑起的空间颜色由背景颜色决定
padding-top padding-right padding-bottom padding-left
简写为4项：上右下左
简写为2项：上下 左右
简写为1项：all
10.margin
外边距，决定了元素边线到其他元素的距离，透明，空间颜色由父容器决定
当指定了宽度，将margin设置为auto，元素随窗口尺寸动态变化，始终居中
元素垂直方向的margin会坍塌，选两个margin的最大值而不是和
11.background
background-color 背景颜色
background-image 背景图片 默认为横纵都重复 url（“paper.gif”）
background-repeat 背景图片横纵向重复
background-position 背景图片固定位置
12.image
border-radius圆角
object-fit
fill 默认缩放填充整个容器
contain 等比例缩放
cover 按图片高宽比缩放直至高或宽占满容器
.image{
max-width: 100%;/*当窗口尺寸小于图片时，随窗口缩小*/
/*width:100%;*//*无论图片实际尺寸，随窗口缩放*/
height: auto;
}
13.text
color
text-align 对齐方式 left center right 两端对齐justify
text-decoration 文本修饰 overline line-through underline none
text-indent 缩进 50px 2em
14.font字型
font-style
font-size
15.opacity transparency透明度
0-1容器透明度会影响容器内元素的透明度
只想背景透明，元素不透明
background：rgba（0，255，0，0.5）
16.组合选择器
在选择器选择的元素容器内继续指定选择器选择元素，即通过多级选择器选择元素
（1）后代选择器 空格（子孙都可）
元素内所有符合第二级选择器的元素，子元素的嵌套子元素依然受影响
（2）子选择器 >（只有儿子）
仅元素内所有符合第二级选择器的直接子元素，子元素的嵌套子元素不受影响
（3）同级紧邻选择器 +（只有邻居）
仅与一级元素平级的下部的紧邻的，符合条件的二级元素
.Container+p{
color: #6194f1;
}
<p>在九月</p>
<div class="Container">
<p>潮湿的车窗</p>
</div>
<p>你靠着车窗</p>
<h6>我喜欢上你时的内心活动</h6>
<p>我心脏一旁</p>
（4）同级选择器 ~（一个社区都可）
一级元素平级的下部的，所有符合条件的二级元素
17.伪类
元素的一种特殊状态，伪类可以对自身/子元素/关系元素产生影响，但不支持改变任意元素
：checked 选中时的样式
：disabled 禁用时的样式
：enabled 启用时的样式
：link 未访问时的样式
：visited 访问过的样式
：hover 鼠标置于上的样式
：active 点击执行时的样式
：focus 具有焦点时的样式
：invaild 未通过验证时的样式
：nth-child（odd/even）table行奇数行/偶数行
#nth p:nth-child(odd){
background-color: #7df8db;
}
#nth p:nth-child(even){
background-color: #eac2fc;
}
<div id="nth">
<p>奇数1</p>
<p>偶数2</p>
<p>奇数3</p>
<p>偶数4</p>
</div>
18.attribute selector属性选择器
a[target]{
background-color: yellow;
}
a[target=_blank]{
background-color: red;
}
input[type=password]{
padding:12px 20px;
width:100%;
margin:8px 0;
}
18.列表
表格 border-collapse边框坍塌
19.display 改变块级元素和内联元素的布局
display：block 内外边距高宽属性均有效，但是不能和其他元素在同一行
display：inline 内外边距横向有效，纵向无效，高宽属性无效，但可以与其他元素在一行
display：inline-block
20.隐藏某元素
display：none 不占用布局
visibility：hidden 存在但不可见仍占用空间
21.link
a：link
a：visited
a：hover 必须置于link和visited之后有效
a：active 必须置于hover之后有效
21.按钮式超链接
#inline-block a{
display: inline-block;
background-color: #fc0335;
color: white;
padding: 14px 25px;
margin: 5px;
border-radius: 5px;
text-decoration: none;
}
<div id="inline-block">
<a href="#">编辑</a>
<a href="#">删除</a>
</div>
22.vertical-align对齐方式
top
bottom
center
默认baseline水平对齐
#vertical div{
border: 1px solid blue;
vertical-align: bottom;
display: inline-block;
}
<div id="vertical">
<div style="line-height: 2.5em;font-size: 2.5em">test1<br>test2</div>
<div>test3</div>
</div>
23.溢出部分处理overflow
#overflow{
display: inline-block;
border: 1px solid blue;
width: 230px;
height: 100px;
background-color: #ffea7f;
overflow: hidden;/*auto visible scroll
}
24.float浮动
只能左右浮动，不能上下浮动，浮动元素不算入高度，其他元素围绕浮动元素
none
left
right
initial 原始
inherit 继承
25.position位置
static 按页面正常流程定位 top bottom left right 无效
relative 相对于默认正常位置 top bottom left right 有效
absolute 相对于多级容器中最近的一个可定位容器 悬浮按钮，下拉导航
fixed 相对于浏览器窗口区域的固定位置
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
