Attribute selectors:
Properties tab is relative to find elements based on the value of the attribute specified name;
. 1: E [attr]: for the specified label E has attributes attr.
2: E [attr = value] : Find has specified: attr attribute and attribute value is value E tag. (Must be)
. 3: E [attr * = value]: Find has specified attr attribute and attribute value included (at an arbitrary position) value of the E-tag; (the wildcard)
. 4: E [attr ^ = value]: Find attr has specified attribute value and attribute values to the beginning of the E-tag;
. 5: E [attr = $ value]: E tag attribute values to find the value of the open end and has specified attributes attr;
Brothers Selector:
+: acquiring adjacent elements satisfying the condition of the current element;
~: acquiring the condition that all siblings of the current element;
Relative to the parent element selector:
. 1: E: First-Child: a first lookup element E E element in the parent element. When looking for does not limit the type element to find, if not the element, does not work;
li: First-Child {
Color: Red;
} Find: parent element in the first li li element;
2：E:last-child:查找E元素的父元素中最后一个指定类型的子元素；
√ 3：查找的时候限制类型 E:first-of-type；E:last-of-type
1.也是相对于父元素
2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素；
4：指定索引位置 E:nth-child(从1开始的索引 || 关键字 || 表达式)；
不限定类型，查找父元素中所有子元素的位置；
1：索引是从1开始的！
2： E:nth-child（even）{}选择偶数；
3： E:nth-child（odd）{}选择奇数；
√ 5： 限定类型 :E:nth-of-type();
限定类型，不是就跳过继续找；查找父元素中指定元素的位置；
（只找li元素）
li:nth-of-type(even){}
li:nth-of-type(odd){}
n:默认取值范围为0~子元素的长度.但是当结果<=0时，选取无效
选取前面5个元素：li:nth-of-type(-n+5)；
选取后面5个元素：li:nth-last-of-type(-n+5)；|| li:nth-of-type(n+5)；
选取空值:没有任何的内容，连空格都没有：E:empty{}；（选中所有为空）；
Pseudo-elements: within a line element; (single tag is not):
:: the before (left default) :: after (the default on the right)
1: You must add content attributes, otherwise the latter not visible;
content: ""; (which is placing text content);
2: default line-level elements, if you want to set the width and height, must be converted to a block-level element;
::first-letter 设置第一个字符；
::first-line 设置第一行内容；
::selection 设置当前选中内容的样式；
Shaded text:
text-Shadow: yaw offset vertically px px px color blur blur;
provided with a multi-layer shadow, separated by commas;
Box Model:
width and height set the width and height is the default size of the content;
Box-Sizing: Box-border; the actual size of the box is provided, will not be stretched padding and border, and the content becomes small; child element after setting will
box-sizing: content-box; set contents size, is softened; (default);
Border fillet:
border-RADIUS :;
values: the four corners;
two values: top left bottom right; top right bottom left;
three: Upper left; top right bottom left; lower right;
four: Upper left lower left upper right lower right;
round : half width and height;
semicircular: set to half the height, top left and right fillets provided;
Hatched boxes:
Box-Shadow: Color range and outside the shadow of the yaw px px px vertically offset blurring blurring px shadow (shadow within the inset from);
provided with a multi-layer shadow, separated by commas;
Gradient:
linear gradient: background: linear-gradient :( direction, start color location, color 2 position, 3 position of the color ...);
direction: to top; top bottom (not written direction default); to left; to right;
of: deg;
radial gradient: background: (shape and size coordinates, color 1, color 2 ...) radial-gradient;
shape: shape:
Circle: generating a square gradient
ellipse: a shape adapted to the current, if the container is a square, two If the effect of the same width and height are not the same, the effect of switching to the default Ellipse;.
aT position: coordinates, in the center of the default. Coordinates can be assigned (refer to the upper left corner of the element), you may be assigned keywords (left center right top bottom);
Size size :: closest-side: the nearest edge; farthest-side: the farthest edge; closest-corner: Recent angle; farthest-corner: the most far corner. The default is the farthest corner farthest-corner;
Background style:
add back picture:
If the image is larger than the container, then the default start placement from the top left corner of the container;
if the image is smaller than the container, then the default picture tile;
tile: background-REPEAT:
REPEAT: Tile incomplete display;
round : the image will be re-tiled after scaling; (full display)
Space: the picture is not scaled tile, but will have the same spacing values between picture
滚动：
fixed:背景图片的位置固定不变；
scroll:当滚动容器的时候，背景图片也会跟随滚动，但不会跟随内容一起滚动；
local:背景图片会跟随内容一起滚动；
背景图大小：
background-size：
1：设置背景图片的大小 宽度/高度 宽度/auto(保持比例自动缩放)
建议：在使用这个属性之前需确定宽高比与容器的宽高比是否一致，否则会造成图片失真变形；
2：设置百分比，是参照父容器可放置内容区域的百分比；
3：设置contain让图片完美（针对于图片）：按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内；
1.图片大于容器：有可能造成容器的空白区域,将图片缩小；
2.图片小于容器：有可能造成容器的空白区域，将图片放大；
√ 4：设置cover让容器完美（针对于容器）：背景图片会按比例缩放自适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出；
1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见；
2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出；
background-origin：（填充）
背景图的默认原点，如果有padding，原点就基于padding，如果有padding，就基于内容；
border-box:从border的位置开始填充背景，会与border重叠；
padding-box:从padding的位置开始填充背景，会与padding重叠；
content-box:从内容的位置开始填充背景；
background-clip：（裁剪）
border-box:其实是显示border及以内的内容;
padding-box:其实是显示padding及以内的内容;
content-box:其实是显示content及以内的内容;
Transition:
Click: the Active;
Transition: After the transition effect is finished, the default will be restored to its original state;
1.transition-Property: add a transition style attribute name
Transition-Property: left;
2.transition-DURATION: transition effects Processed in seconds as the unit of
Transition-DURATION: 2S;
3.transition-Timing-function: function set time - controlling the movement speed of
transition-timing-function: linear (uniform); ease-in-out (from slow to fast );
4.transition-delay: delay transition effect
transition-delay: 2S;
√ abbreviation: transition: attribute name transition time exhibits several steps (steps (5)) function of the delay time;
为多个样式同时添加过渡效果：
transition: left 2s linear 0s,background-color 5s linear 0s;
为所有样式添加过渡效果 all:所有样式；
transform：
移动：translate（px）；
1：移动是参照元素的左上角
2：执行完毕之后会恢复到原始状态
3：如果只有一个参数就代表x方向；如果有两个参数就代表x/y方向；
只对水平方向的移动：transform:translateX(300px);
只对垂直方向的移动：transform:translateY(300px);
负值为反方向；
缩放：scale（不带单位）；
1：如果只有一个参数，就代表x和y方向都进行相等比例的缩放；
如果有两个参数，就代表x/y方向；
2：值为1指不缩放；值>1放大 ； 值<1缩小；
只对水平方向的缩放：transform:scaleX(0.5);
只对垂直方向的缩放：transform:scaleY(0.5);
旋转：rotate（deg）；
1：默认只有一个值；沿着z轴旋转；z轴：是物体对屏幕之间的距离；
2：rotateX ：沿着x轴进行旋转；
rotateY：沿着y轴进行旋转；
3：正值为顺时针；负值为逆时针；
斜切：skew（deg）；
1：一个值是x轴倾斜；
2：skewX,skewY;
设置旋转轴心：
默认是以中心点旋转；
transform-origin: right top;
transform-origin：50px 50px; 第一个值是x轴；第二个是y轴；
同时添加多个transform属性：（先加移动，旋转放在最后）空格隔开；
任意元素水平垂直居中：
position: absolute;
/*定位的百分比是参照父容器的宽高*/
left: 50%;
top: 50%;
/*使用transform实现元素的居中 百分比是参照元素本身的宽高*/
transform: translate(-50%,-50%);
三维：
三维移动：
transform：translate3d（）；三个值少一不可；
(X方向的偏移，Y方向的偏移，Z方向的偏移)；
Z轴：设置元素距离屏幕的距离；
perspective：px；设置眼睛距离屏幕的距离；
三维缩放：
transform:scale3d（）；
(x方向上的缩放，y方向的缩放，z方向的缩放)；
Animation (animation):
创建动画：@keyframes moveTest {
/*百分比是指整个动画耗时的百分比*/
from （0%） {}
50% {}
to （100%）{}
}
使用动画：
1.animation-name:指定动画名称：
animation-name: moveTest;
2.设置动画的总耗时：
animation-duration: 2s;
3.设置动画的播放次数，默认为1次 可以指定具体的数值，也可以指定infinite(无限次)
animation-iteration-count: 1|| infinite;
4.设置交替动画 alternate:来回交替
animation-direction: alternate;
5.设置动画的延迟
animation-delay: 0s;
6.设置动画结束时的状态：
默认情况下，动画执行完毕之后，会回到原始状态；
animation-fill-mode：；
forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态；
backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态；
both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态；
7.设置动画的时间函数
animation-timing-function: linear;（匀速）；
8.设置动画的播放状态
paused:暂停 running:播放
animation-play-state: running;
连写：animation: moveTest 2s linear 0s infinite alternate both;
（动画名字 总耗时 速度函数 延迟时间 播放次数 交替 结束状态）；
Multi-column layout:
1. Set the number of columns: column-COUNT:. 3;
2. Add gap pattern columns, and add the same border style: column-rule: Red Dashed 3px;
3. set the gap size columns: column-gap: 50px ;
4. set column width: principle: whichever is the greater priority
1. If artificially set larger width, then take a larger value, but fills the entire screen, means the final width may be greater than the set width also - fill the screen ;
2. if the width is smaller artificially set, using the default width calculated;
column-width: 200px;
5. the column is provided across the display 1 / all: column-span: all;
Stretch layout (elastic layout):
1：设置父容器为伸缩盒子：会使每一个子元素自动变成伸缩项
display: flex;
1：把子元素转为块级元素；
2：会有浮动的效果；
2：（同时生效）
a：设置子元素的主轴方向的排列方式（设置在父元素上）：justify-content:
横轴：水平排列；（默认主轴）；
纵轴：垂直排列；
flex-start：让子元素从父容器的起始位置开始排列；（默认）
flex-end：让子元素从父容器的结束位置开始排列；
center：让子元素从父容器的中间位置开始排列；
space-between：两边贴边，左右对齐父容器的开始和结束，中间平均分页，产生相同的间距；
space-around：两边不贴边，将多余的空间平均的分布在每一个子元素的两边 类似于margin:0 auto. 会造成中间盒子的间距是左右两边盒子间距的两倍；
b：设置子元素(伸缩项)在侧轴方向上的对齐方式（设置在父元素上）：（设置单行） align-items:
（默认纵轴）
center:设置在侧轴方向上居中对齐；
flex-start:设置在侧轴方向上顶对齐；
flex:end:设置在侧轴方向上底对齐；
stretch:拉伸：让子元素在侧轴方向上进行拉伸，不能设置height
baseline:文本基线；
（设置双行...）align-content: space-between：两边贴边，左右对齐父容器的开始和结束，中间平均分页，产生相同的间距；
align-content: space-around; 两边不贴边，将多余的空间平均的分布在每一个子元素的两边
设置单个元素在侧轴方向上的对齐方式（设置在子元素上）：align-self: （属性同上）
3：当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩：
flex-wrap: 控制子元素是否换行显示，默认不换行；
nowrap:不换行--则收缩；
wrap:换行；（如果想让子元素换行显示，必须为子元素设置宽度）
wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列；
flex-wrap: wrap;
flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)；
row:水平排列方向，从左到右；（默认）
row-reverse:水平排列方向，从右到左；
column:垂直排列方向，从上到下；
column-reverse：垂直排列方向，从下到上；
flex-direction: column-reverse;
√ flex-flow:是flex-wrap和flex-direction的综合：
flex-flow: row wrap;水平换行；
flex的常用属性：
flex-grow（写在子元素里）:扩大子元素的宽度：设置当前元素应该占据剩余空间的比例值；
1：默认值是0:说明子元素并不会去占据剩余的空间；
2：比例值计算 ：当前空间的flex-grow / 所有兄弟元素的flex-grow的和；
flex-grow: 1;（不带单位）
flex-shrink：收缩子元素的比例，通过设置的值来计算收缩空间：
1：默认值为1；
2：比例值计算 ：当前空间的flex-shrink*width/所有flex-shrink*width并且累加*超出的部分；
flex-shrink: 2;
√ flex属性：flex是用来设置当前伸缩子项占据剩余空间的比例值；（动态宽度）
利用flex实现任意元素居中显示：justify-content: center； align-items: center；
Intersection selector: h3 simultaneously added when the current element and the second time will have the effect of current * /
.second.current H3 {
font-size: 100px;
};
em: is a unit of length, it is a reference to the current element number, if not set, refer to the default font size of the parent container or the current browser; a representative of 17px in Google em in;
REM: css3 added is a unit of length, which is a reference to the root element (html) font size;
adaptation principle: scaling, according to the size of the font-size of the calculated html;
1, the screen is divided into several parts , every size is the size of the font-size of html; font size equal to the screen size of the divided parts;
2, REM = measured magnitude / html (screen size) of the font-size;