一，选择器
1，元素选择符
*通配符（选择HTML中的所有元素）
E类型选择符（选择标签为E的元素）
E#id id选择符（id值是唯一的）
E.class 类选择符（选择class值相等的一类元素）
2，关系选择符
- E F后代选择器（选择祖先元素为E的所有F元素）
- E>F 子代选择器（选择父元素为E的F元素）
- E+F 相邻选择符（选择紧邻E的下一个兄弟元素F）
- E~F 兄弟选择符（选择E之后的所有兄弟元素F）
3，属性选择符
- E[attribute] 选择带有某属性值的元素
例：p[class]选择带有类的元素
- E[attribute=value] 选择属性值为某值的元素
例：p[class=list]选择带有类名为list的元素
- E[attribute~=value] 选择属性内包含某个单词的元素
例：p[class~=list]选择带有类名中含有list的元素
- E[attribute|=value] 选择属性值以value开头的元素
例：p[class~=aa]选择带有类名中以aa开头的元素
4,伪类伪元素选择器
- a:link 选择所有未被访问的链接
- a:visited 选择所有已被访问的链接
- a:active 选择活动链接
- a:hover 选择鼠标指针位于其上的链接
- a::focus 选择获得焦点的 input 元素
- a:first-letter 选择每个元素的首字母
- a:first-line 选择每个元素的首行
- a:first-child 选择属于父元素的第一个子元素的每个元素
- a:before 在每个元素的内容之前插入内容
- a:after 在每个元素的内容之后插入内容
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素
二，弹性盒模型
flex
1.flex
Flex是Flexible Box的缩写，意为弹性布局，用来为盒子模型提供最大的灵活性、任
何一个容器都可以指定为Flex布局。
设为Flex布局后子元素的float、clear、vertical-align属性将失效。
2. flex-grow
占父元素剩余空间比例
3. flex-direction
容器内元素的排列方向(默认横向排列)
flex-direction:row; 沿水平主轴让元素从左向右排列
flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
flex-direction:row-reverse;沿水平主轴让元素从右向左排列
4. flex-wrap
容器内元素的换行(默认不换行)
flex-wrap: nowrap; (默认)元素不换行
flex-wrap: wrap; 元素换行
5. justify-content
元素在主轴（页面）上的排列
* justify-content : center;元素在主轴（页面）上居中排列
* justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
* justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
* justify-content :space-between;元素在主轴（页面）上左右两端或者上下两端开始排列 justify-content :space-around;两元素间距相等 距父容器距离相等
6.align-items
元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
1,align-items : flex-start;
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
2,align-items : flex-end;
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）
3,align-items : center;
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
4,align-items : baseline;
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。（靠上对齐）
grid
1，grid
grid通常用于二维布局，同时操作子元素的行和列
flex通常用于一维布局
2，grid-template-columns
用于确定子元素的列的数目和宽度
3，grid-template-rows
用于确定子元素的行的数目和高度
4，grid-column-grap
用于设置列间距
5，grid-row-grap
用于设置行间距
6，grid支持的单位 %，px,fr(表示占有剩余的几份1fr,2fr...) auto;
7，grid-column和grid-row
分别用于设置列跨度和行跨度
比如:子元素1：grid-column：2 / 5 表示第一个元素跨越第二到第五列
8，justify-self和align-self 在子元素中，设置元素的列属性和行属性
stretch: 默认值，拉伸内容的宽度为预设的宽度
start: 宽度为内容宽度，内容在左侧展示
center: 宽度为内容宽度，内容在居中展示
end: 宽度为内容宽度，内容在右侧展示
9，justify-items和align-items在父元素中，用于设置子元素在水平和竖直方向上的排列
center,left,right
10,grid-template-areas为每一个栅格化命名
11，repeat(params1,params2)简化和minmax(params3,params4);
repeat直接设置重复的行数/列数和对应的高度和宽度
用法：repeat(2,100px);
minmax可以同时设置元素维度的最大值和最小值
用法：minmax(100px,200px);
三，元素布局
- 左右固定中间自适应
浮动时的自适应实现: 1，flex 2,position 3,浮动+margin 4,calc（100%-50px）
方法一：flex
body{
display: flex;
}
#left{
width: 200px;
height: 300px;
background: #ff0036;
}
#right{
width: 200px;
height: 300px;
background: #000000;
}
#center{
flex-grow: 1;
background: green;
}
方法二：position
#container{
width:100%;
height:300px;
position:relative;
}
.left{
width: 200px;
height: 300px;
background: #ff0036;
position: absolute;
top: 0;
left: 0;
}
.center{
width:100%;
margin-left:200px;
margin-right:200px;
background:green;
}
.right{
height: 300px;
margin-left: 200px;
background: #000000;
position: absolute;
top: 0;
right: 0;
}
方法三：float
#container{
float:left;
}
.left{
width: 200px;
height: 300px;
background: #ff0036;
}
.center{
width:100%;
margin-left:200px;
background:green;
}
.right{
height: 300px;
margin-left: 200px;
background: #000000;
}
- 上下固定中间自适应
html{
width:100%;
height: 100%;
}
body{
width:100%;
height: 100%;
position: relative;
}
.top{
width:100%;
height:100px;
background-color:blue;
position: absolute;
top:0;
left:0;
}
.center{
width:100%;
background-color: brown;
position: absolute;
left:0;
right: 0;
top:100px;
bottom: 100px;
}
.bottom{
width:100%;
height:100px;
background-color: red;
position: absolute;
bottom: 0px;
left:0;
right: 0;
}
四，常用属性
-
border-radius
-
transform perspective 观察视角，产生三维特效
-
translate rotate scale
-
transition
-
opacity 同时更改背景和内容的透明度
-
rgba 可以只进行更改背景或内容的透明度
-
filter 模糊
-
box-shadow //可以用来实现绝对的一像素
有四个参数（a,b,c,d）
a是指水平向右的偏移量；
b是指垂直向下的偏移量；
c是指模糊半径 一定大于零；
d是指外延值 小于零时向内延伸；
box-shadow:
-1px 0 0 green, //左边阴影
0 -1px 0 blue, //顶部阴影
0 1px 0 red, //底部阴影
1px 0 0 yellow; //右边阴影
-
border-radius(上左，上右，下左，下右)
50%时获得最大⚪，大于50%时将不再改变 -
背景
1，background-img 默认从padding区域开始
2，background-orign 设置背景图显示的原点
3，background-attachment （1）scroll(2)fixed 设置背景图根据什么进行定位
4，background-clip 背景图从哪个位置开始裁剪
5,使文本透过图片；
-webkit-background-clid:text
-webkit-text-fill-color:transparent
6，background-size:长度/百分比
cover背景全部被填充；content保证图片完整进入
五，动画
animation:run (自定义的名字) 2s（维持的时间） linear(完成动画的方式) 1s(延迟的时间) infinite（完成动画的次数）
@keyframs run{
0%{
}
50%{
}
100%{
}
}
六，元素居中的方法
1，块级元素
1，margin
margin:0 auto;
2,定位
position:absolute;
left:50%;
margin-left:-元素宽度的一半
3,css3 flex
justify-content:center;
4,css transform
transform:translateX:50%;
2,行级元素
1，margin
margin:0 auto;//对于其内部元素
2,定位
position:absolute;
left:50%;
margin-left:-元素宽度的一半
3,css3 flex
justify-content:center;
4,css transform
transform:translateX:50%父元素的宽度;
margin-left:-元素宽度的一半
5，text-align:center;
七，元素垂直居中的方法
1，块级元素
1，定位
position:absolute;
top:50%;
margin-top:-元素高度的一半；
2，css flex
align-item:center;
3, css3 transform
transform:translateY:50%;
4，vertical-align:middle
2,行级元素
1，定位
position:absolute;
top:50%;
margin-top:-元素高度的一半；
2，css flex
align-item:center;
3, css3 transform
transform:translateY:50%父元素的高度;
margin-top:-元素高度度的一半
4，vertical-align:middle
5,line-height
line-height=行高
