css中的注释/* */
选择器
标签选择器 li{}id选择器 #id {}
类选择器 .class{}复合选择器
交集选择器 选中同时符合的选择器 语法：选择器1选择器2选择器3 有元素选择器要以元素选择开头 2. 并集选择器 语法：选择器1，选择器2 只要满足一个条件就好关系选择器
父子选择器 语法：div >span{}
祖先选择器 语法： div span{}
兄弟选择器 语法：p + span {} 紧挨着的下一个兄弟 兄 ~ 弟 下边的所有兄弟
属性选择器
p[title =“123”] { color =" red"}
p[title ^=“123”] { color =" red"} 以123开头的
p[title $=“123”] { color =" red"} 以123结尾的
p[title *=“123”] { color =" red"} 包含某个值
伪类选择器
伪类（不存在的类，特殊的类） 用来描述一个元素的特殊状态 一般以：开头:first-child 第一个子元素 :last-child最后一个子元素 :nth-child(n)第n个子元素 2n 2n+1 所有元素:first-of -type :last-of -type :nth-of-type(n) 同一个元素中排序a:link{} 未访问过的链接 a:visited{}访问过的链接 由于隐私只能修改链接颜色 只能用于a链接a:hover{} 鼠标悬浮 a:active{}鼠标点击 可用于任何元素 伪元素 一般以::开头::first-letter{}第一个字母 ::first-line{}第一行 ::selection{}选中的元素div::before{content:’ / ‘}元素的开始 div::after{content:’ / '}元素最后面 content 可以添加元素但是没办法选中选择器的权重 ：!important > 内联 > id > 类选择器 > 元素选择器
单位 em = 1font-size以自身的字体大小 rem 相对于html 的元素来计算
文档流: 网页也是很多层的 类似于层叠玻璃 只能看到最上面一层
块元素
在文档流中： 在页面上独占一行 会把父元素占满 高度会被自动撑满
行元素
在文档流中：从左向右水平排列 一行容纳不下会往下掉（写字习惯一直）
盒子模型
内容区 width height 可见内边距 内边距影响盒子大小 在content外边 可见边框 边框影响盒子大小 在content外边 可见 可以做一个三角形边框外边距 不可见 可以是负的 border-radius:50%；变圆形块元素 外边距折叠：当兄弟元素之间都有外边距的时候 誰大听谁 一正一负 取和 父子元素 子会上交边距给父如果子元素高度大于父元素会溢出可以给父元素设置overflow属性可选项：visible 允许溢出 hidden 被隐藏 auto 出现滚动条 行内元素 不支持设置宽高行快元素 inline-block 可以设置宽高又不独占一行盒子的大小：可见框 box-sizing:可选值有content-box 宽高只是指content border-box宽高指的是整个可见框 不需要计算 定死了浮动
脱离文档流 不占用文档流的位置 设置后可以左右移 float:left； right； none；
可以横向排列
如果父元素中，布局任然满足先后顺序
清浮动 当父元素没有浮动 子元素有浮动 那么父元素必须清浮动 不然会内容塌陷
clear:left ；right；both；可以清除上一个元素对本元素的影响 如果是both 誰大听谁的
原理是通过添加外边距
最终清浮动方案
.clearfix:after { content:" "; display: block; clear:both; }
BFC （ block formatting context）块级格式化环境 开启bfc之后的特点
开启BFC的元素不会被浮动元素覆盖开启BFC的元素的父子元素的外边距不会重叠开启BFC的元素可以包含浮动元素如何开启BFC
设置浮动设置行快元素overflow:auto;定位 position
可选值 ：relative； absolute; fixed; sticky；相对定位：起点是该元素在文档流中的位置 但是会提高该元素的层级 如和其他层相遇会覆盖 不脱离文档流 元素不会脱离文档流（重要）不改变后面的元素布局 绝对定位 ：起点是包含块 起点是开启定位的祖先块元素 行内元素的会变块元素 高度被内容撑开 开启绝对定位的时候，把偏移量都变0就可以在包含块中 垂直水平居中 元素会脱离文档流会影响后面的布局 固定定位：参考与浏览器的可视窗口。粘滞定位：top：10px; 起点是开启定位的祖先块元素.兼容性不好 偏移量 left righr top bottom 层级 必须在设置定位置后才能设置 z-index:9999；文本垂直对齐和水平对齐
水平对齐text-align: 可选值 left right center justity (两边对齐)
垂直对齐 当字体大小不一样时 vertical-align
可选值baseline基线对齐 top 顶部对齐 bottom 底部对齐 middle居中对齐 图片对齐也可以使用vertical-align:bottom
文本修饰 text-decoration: none；
white-space:设置网页如何处理空白 normal正常 nowrap不换行 pre 保留空白
如何实现多余的文本变成省略号 1.设置宽度 2. overflow：hidden；3.text-overflow:ellipsis；white-space:nowrap;雪碧图：把所有的小图放在同一个大图中，通过调整背景位置来显示不同的图片。
渐变 渐变是图片需要background-img来设置线性渐变 可以指定方向 xxxdeg 几度 linear-gradient(to right , red 50，yellow 200，多个颜色)多个颜色平均分 50 以前是红色 200以后是黄色 中间是过度