CSS
样式引入
样式种类
外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表:<style>
内联样式表: style=""
优先级:
通用选择器（*）
标签选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
!important 规则例外
盒子模型
盒子有哪些：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。Outline(轮廓) - 位于border外部，不占用宽度。
border：
1. 颜色可用transparent（透明颜色）
2. border-radius可以设置圆角，可以使用length或者百分比：50%为圆形，最大表现不超过100%；若相邻出现交叉则等比例缩小，所以四个角全为100%也是圆形。
3. 可通过边框设置透明的方式绘画三角形。
-margin技术
设置左上margin本身移动；
设置右下，对应元素移动；
外边距合并：
只有普通文档流中的垂直外边距才会发生外边距合并现象
简写（以border为例）
简写方式
border: 10px solid blue;
border-width: 10px 20px 30px 40px;（上 右 下 左）
border-width: 10px 20px 30px ;（上 左右 下）
border-width: 10px 20px; （上下 左右）
border-width: 10px （上下左右）
链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
文本
color: name / rgb /#nnnnnn；字体颜色
direction：ltr / rtl / inherit; 字体方向
text-decoration: none / underline / overline / line-through / inherit 字体装饰
vertical-align: baseline / middle ;设置对齐方式
text-align:center/left/right
font:设置字体大小，样式
背景
background-color
background-image:url("")
background-repeat:no-repeat / repeat-x / repeat-y
background-attachment: scroll(默认) / fixed
background-position
列表和表格
ul ol li
table th td
BFC
BFC内部的元素和外部的元素不会互相影响。
如何创建BFC?
overflow不为visible;
float的值不为none；
position的值不为static或relative；
display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;
作用？
自适应两栏布局、清除浮动、防止垂直margin重叠
行内元素和块元素
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
选择器
普通符号
，: 分组
空格：嵌套
: 一级
+：第一个相邻兄弟
~：所有相邻兄弟
属性选择器：
标签\[属性名A\](\[属性名B\])
[attr=value] 相等
[attr~=value] 其中一个值等于，value用空格隔开
[attr^="value"] value开始
[attr$="value"] value结束
[attr|=“value”] 值可以正好为“value”或以“value”开头并跟上“-”
[attribute*=“value”] 选择指定属性其值至少包括一次“value”作为子串
定位
static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
relative 元素的位置相对于浏览器窗口是固定位置。
fixed 相对定位元素的定位是相对其正常位置。
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
sticky 粘性定位的元素是依赖于用户的滚动
float
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
float:left/right/inherit
clear:left/right/both
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
1.为父元素设置高度
2.父元素设置BFC
3.通过后面的元素或者伪元素进行clear both
对齐
居中对齐：
margin: auto
文本居中对齐：
text-align: center;
左右对齐：
absolute/float/padding
垂直居中：
line-height/position 和 transform/为元素＋vetical-align/flex+margin
z-index
1. z-index堆叠上下文static时无效。
2. 当父元素和子元素都处于堆叠上下文时，子元素继承父元素的优先级，故父元素大的就大，如果父元素没有处于堆叠上下文时，即z-index:auto;或者position:static;时，子元素不会继承父元素的优先级。
3. z-index为0时依然处于堆叠上下文中，比负值高，比正值低。
4. z-index为负值时不仅会处于z-index为0和正值元素的后面，还会处于非堆叠元素的后面。
flex
flex-direction: row | row-reverse | column | column-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
grid
overflow
Overflow-x overflow-y
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
伪类
伪类就是开头为冒号的关键字
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
:focus 焦点
伪元素
伪元素开头为双冒号::
::after
::before
渐变
默认纵向，可以通过to改变渐变方向
background: linear-gradient(to right,transparent 10%,gray 90%);
2D转换
translate(x,y) 移动
rotate(xedg) 旋转
scale(x,y) 放大缩小
skew() 倾斜
matrix()
3D转换
rotateX()
rotateY()
过渡
transition: property duration timing-function delay;
动画
@keyframes animationname {keyframes-selector {css-styles;}}
animation: name duration timing-function delay iteration-count direction fill-mode play-state;