- background
- background的所有属性在一个申明之中：背景颜色 图像背景链接 是否平铺 是否固定位置 初始位置。
- 如果想把一个行内元素的第一行缩进，可以用左内边距或外边距。
2.text
- 将text-indent设置为负值可以实现“悬挂缩进效果”——段落中第一行不缩进而其余行进行缩进。
- span标签就是一个便签，用来在任意位置进行一个样式设置。
- 设置text-transform可以让改变文字的形状，例如大小写，首字母大写等。
- 当文字没有italic属性的时候，使用oblique使文字倾斜。
- text的所有属性在一个申明之中：字体风格 字体粗细 字体大小 字体家族。
3.border
- border的所有属性在一个申明之中：颜色、形状、厚度。
- border-width属性如果单独使用的话是不会起作用的，请首先使用border-style属性来设置边框，配置顺序是上、右、下、左。
- 放在div这种块标签里面的元素，文档为自动为其分配长度和宽度，而在a标签这种行内标签，是看子元素的宽度，然后适配子元素的宽度。
- border-bottom:厚度 样式 颜色。这样写的话就会单独设置样式，如果只写了bottom-style，就会设置样式，其他属性会继承自其他样式。
4.margin
- 上、下、左、右边的属性都在一个申明中，顺序分别是上、左、下、右。
5.padding
- 只有一个就是全部边的padding都共同设置。
- 两个是上下、左右。
- 可用单位有cm、百分比。
6.列表实例（ul、li）
- 无序列表文字前面原点的样式：实心圆(disc)、空心圆(circle)、实心矩形(square)、无样式(none)。
- 有序列表文字前面原点的样式：数字（decimal）、小写罗马字母(lower-roman)、大写罗马字母(upper-roman)、小写英文字母(lower-alpha)、大写英文字母(upper-alpha)。
- 还可以设置文字前面的为图片。
- 设置放在段外还是段内。
- 一个申明中定义所有属性：样式、位置、图标地址。
7.表格样式
- 布局：automatic——根据文本内容自动调价表格框大小。fixed：文档库大小已经固定。不随文本内容变化而变化。
- 调价每个格子之间的距离——border-spacing。
- 设置空格子是否显示——empty-cells。
- 标题的位置：caption-side。
- 可以直接选中每一行进行样式的调节。
- border-collapse:设置单元格合并。
8.轮廓样式
- outline-style：设置轮廓的样式
- outline-color：设置轮廓的颜色。
- outline-width：设置轮廓的高度。
- 设置outline：none，可以去掉input、textarea、select的默认选中聚焦事件。
9.CSS尺寸
-
height：高度。 img标签设置时，会让大小同比例设置。
-
可以设置数值（根据原图的大小进行缩放），也可以设置百分比（根据父类的大小进行缩放，然后根据原图大小进行原比例缩放）。
-
使用max-height和max-width可以设置最大的高度和宽度,min-height、min-width,可以设置最小的高度和高度，最小值小于文本的高度就以文本的高度来决定，最小值大于文本的高度，就以最小值为准，可是px像素值也可是相对于父类元素的百分比来设置。
-
line-height:可以以百分比、像素值、数字值来设置行高
10.CSS分类
-
允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
-
display设置元素的显示模式
- none ：不显示。
- block：显示为块元素。
- inline：显示为内联元素。
- float属性将元素浮动显示在页面的某一个位置
-
left:悬浮在左边显示。
-
right：悬浮在右边显示。
-
有float时，margin里面控制上下左右的顺序可能有所不同，需要注意。
-
可以给浮动的元素添加自己的样式。
-
em单位表示为当前字体大小的几倍。
-
line-hight可继承。
-
clear属性：
-
设置float之后要设置宽度才可让块级元素在同一行显示。
-
有时候因为可能会覆盖浮动的元素，所以需要对某些元素进行清除浮动，这个时候被清除浮动的元素就不会覆盖浮动的元素了。
-
clear表示元素的哪个方向不允许出现浮动元素。
-
position布局
-
relative：相对定位，相对于元素正常位置进行移动。
-
absolute：绝对定位，可以将元素放在页面上的任何位置，脱离文档流。
-
并且观察到设置了potision的元素的index会提升会覆盖到其他元素上面。
-
fixed定位：固定位置，不随页面的滚动而改变。已经脱离文档流。
-
sticky：粘性定位。相当于fixed和relative的结合。
-
clip属性可以剪裁图片。position是绝对定位时才有效果。
- 设置元素可见或者不可见——visibility
- visible:可见的。
- hidden：隐藏的。
- 改变鼠标的形状——cursor
1.wait：等待。
2.help：帮助。
3.move：移动。
- 溢出的内容
- 设置overflow为sroll，可以显示滚动条。此时可能内容没有超过范围，但是也会出现滚动条。
- 设置overflow为hidden，可以隐藏超过边界的内容，不显示。
- 设置overflow为auto，可以让浏览器自己自动处理溢出的内容。
- 垂直排列图像
- vertical-align，top顶部对齐，bottom底部对齐。
- z-index
- 默认为0，调为-1时，优先级更低，此时需要将position调为absolte或者其他将元素移出文档流的属性并且指定top、left等位置属性，这样才能实现覆盖效果。
- 调为1时，优先级更高。
- top、left、right、bottom可用像素、百分比值来设置。
12.CSS伪类
- hover必须位于link和vistied之后，才能生效。
- active必须位于hover之后才能生效。
- 一般顺序是link、visited、hover、active。
- 还可以改变字体、背景颜色、字号等属性。
- input的focus属性可以改变input处于focus状态下的样式，注意在IE某些版本
- first-child是位置伪类，可以访问第一个子节点。
- q标签可以给一段话添加标签，或引号或其他符号（通过lang属性）。
13**.伪元素**
- first-letter：首字母样式。
- first-line：首行特效。
- 当两者同时存在时，首字母特效依然存在，不会被第一行特效覆盖。
14.CSS单位
- vh:视口高度。
15**.两个类并列选择表示同时具备这些类名的元素**。
- 如果元素同时包含多个类，且多个类中对同一属性进行赋值，那么按照层叠原则，取最后一次类选择器定义时的赋值为最终的赋值。
16.当浏览器开始渲染HTML文档时，它从窗口的顶端开始，经过整个文档内容的过程中，分配元素需要的空间。除非文档的尺寸被CSS规则限定，否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到边界，然后换到下一行垂直渲染（转自：juejin.cn/post/691640…
17.使用dispaly属性可以将元素进行格式化，即创建格式化上下文。例如，contents属性可以让某一元素的子元素成为网格项目。
18.已知上面和下面的高度，怎么确定中间的高度，可以利用height：calc（）属性来计算，也可以通过position：absolute来进行绝对对应（这时候应该注意有个相对定位的父元素）。
19.input常与label一起使用。
20.使用margin：固定值 auto，可让元素在左右自动配置margin，会有居中效果。
21.CSS可以使用backgroundPosition来控制背景图片的位置来实现精灵图，使用循环来使不同的位置显示图片的不同位置。
22.CSS中li和ul都可以设置list-style-type，但是li中设置的优先应用。
23.backgorund里面可用center让图片居中显示。
24.box-shadow设置：
25.元素页面居中：一是iv使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。二是仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%（移动中心点去左上角），也就达到居中效果。
26.不指定元素宽和长，指定了定位没指定top、left之类的都是不好的行为。
27.使用float，会影响后续的div，必须通过clear清除。
28.相对定位和绝对定位是去找对应的父元素。
29.radio设置同样的name属性即可实现多选一效果。
30.flex调节父元素的宽度小于子元素的总框度，会自动压缩子元素的宽度，而float会让子元素换行显示。
31.父元素设置overflow：hidden可以清除子元素的float浮动导致的高度塌陷（BFC被触发？）。
32.BFC：
33.当内边距（padding）是一个百分比的时候， 百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。
34.CSS的权重和优先级：
-
从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。
-
优先级是，权重相同，写在后面的覆盖前面的，使用！important达到最大优先级，都使用！important，权重大优先级高。
-
如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。
-
使用复合写法的时候，它不光只加载了背景颜色样式，还加载了其它一些样式。
-
内联样式和外联样式的优先级和加载顺序有关。但是还是以权重为主。
-
!important > 行内样式 > 内联样式 and 外联样式。
-
选中非目标元素的情况下，距离目标越近者优先。
-
同等权重下，靠近目标的优先。
35.Flex布局
-
弹性盒布局，CSS3 的新属性，用于方便布局，比如垂直居中。
-
flex属性是
flex-grow、flex-shrink和flex-basis的简写。 -
设置在容器上面的属性：
-
flex-direction:属性决定主轴的方向（即项目的排列方向）。
-
flex-wrap:默认情况下，项目都排在一条线（又称"轴线"）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。 -
flex-flow:
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 -
justify-content:
justify-content属性定义了项目在主轴上的对齐方式。 -
flex-start（默认值）：左对齐 -
flex-end：右对齐 -
center： 居中 -
space-between：两端对齐，项目之间的间隔都相等。 -
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 -
align-items:属性定义项目在交叉轴上如何对齐。
-
flex-start：交叉轴的起点对齐。 -
flex-end：交叉轴的终点对齐。 -
center：交叉轴的中点对齐。 -
baseline: 项目的第一行文字的基线对齐。 -
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 -
align-content:
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 -
flex-start：与交叉轴的起点对齐。 -
flex-end：与交叉轴的终点对齐。 -
center：与交叉轴的中点对齐。 -
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 -
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 -
stretch（默认值）：轴线占满整个交叉轴。 -
项目上面的属性：
-
order：``order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可用于排在前面。 -
flex-grow：``flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 -
flex-shrink：``flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 -
flex-basis：``flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 -
flex：``flex属性是flex-grow（怎么放大）,flex-shrink（怎么缩小）和flex-basis（基准值是否有）的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto(1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 -
align-self：``align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
36.CSS3多媒体查询根据设置自适应显示。媒体查询可用于检测很多事情，例如：
-
viweport(视窗)的宽度与高度
-
设备的高度与宽度
-
朝向(智能手机横屏与竖屏)
-
分辨率
