复盘-----CSS（cascading style sheets）1
一、css层叠样式表
1.css的引入
①.内嵌式<style type="text/css"> ②.外链式<link > ③.标签 <h1 style="color:#000;"></h1>2.简单的选择器
①.通配符选择器 *{} ②.标签选择器 h1{} ③.id选择器 id=hi"" #hi{} ④.类选择器 class="c1" .c1{} ⑤.群组选择器，逗号隔开 #hi,c1,h2{} ⑥.后代选择器 .box1 h2{} ⑦.直接字集选择器 .box1>p{}3.选择器的优先级
!important>行内>id选择器>class类>tag标签>*4.css尺寸单位
①.px像素 ②.em相对父节点的字体大小 ③.rem相对根节点的字体大小 ④.%相对父节点的百分比大小 ⑤.vh、vw相对于浏览器的百分比大小 ⑥.cm、mm、pt打印单位5.颜色单位
①.英文颜色单词color ②.rgb Red(0-255)Green(0-255)Blue(0-255),24位色 ③.rgba Red(0-255)Green(0-255)Blue(0-255)A(0-1),32色 ④.16进制颜色 #ff00f06.字体文本样式
①.font-size:字体大小 ②.font-family:字体字型 ③.font-weight:字体加粗 ④.color:字体颜色 ⑤.font-style:字体倾斜 ⑥.text-align:文本水平对齐方式 justify(非最后一行两端对齐) ⑦.text-align-last:最后一行水平对齐方式 ⑧.text-docoration:文本装饰线 underline下划线 line-through删除线 overline上划线 ⑨.text-indent:首行缩进 ⑩.text-transform:字母大小写 uppercase大写 lowercase小写 capitalize首字母大小写 11.text-overfolw:溢出文本处理 hidden隐藏 scroll始终出现滑动条 auto根据情况出现滑动条 12.white-space:空白处理 nowrap:不换行 wrap:换行 pre:预定义文本 13.overflow:溢出选项 14.word-spacing:单词间隔 15.letter-spacing:字符间隔 16.line-height:行高 17.vertical-align:垂直对齐方式 border-bottom:1px solid #000; li:hover{background-color:#000;} 去· list-style:none; margin:0;padding:0; 放块点： display:inline-block;width:5px;height:5px;background-color:#000;
盒子模型
外边框margin
内边框border
内填充padding
内容content
1.边框 border
border-width:10px;
border-style: solid实线 dashed虚线 double双实线 dotted点 ridge/groove 3d立体 outset/inset 阴影
border-color边框颜色
2.border-collapse:collapse =rules =“all”
border-radius:圆角边框
transparent
color：transparent
background：transparent；
3.盒子大小的计算方式：box-sizing
context-box：width/height 决定内容大小(标准盒子)
border-box：width/height 决定边框+内填充+内容的大小（怪异盒子）
4.margin margin-left:auto;
margin-right:auto;左右居中
margin-top
5.盒子模型背景①.背景色 background-color ②.背景图片 background-img:"url(imge/...)" ③.背景图平铺设置 bg-repeat background-repeat水平垂直，屏幕修复 round缩放平铺 no-repeat不重复 space:不缩放平铺 repeat-x水平重复 repeat-y垂直重复 ④.背景图的大小 bg-size 宽高设置：cover有裁切铺满 contain无裁切的铺满 ⑤.背景图的位置 bg-position xy坐标 ⑥.图片的起始位置：bg-origin padding-box:默认值，内填充为初始位置 content-box：内容 为初始位置 border-box：边框 为初始位置 ⑦.图片的裁切位置 bg-clip ⑧.图片的固定位置 bg-attachment：fixed固定不动 ⑨.简写 bg：1.颜色 2.图片 3.repeat不重复 4.位置 5.大小
精灵图使用
1.背景图url 2.不重复repeat 3.移动位置 4.position
display显示类型
1.display:none 不渲染，不占据空间
2.显示选项 visible显示
hidden隐藏，保留空间
visibleity：hidden；/元素隐藏，仍占据位置
3.透明：opacity：0；
浮动 Float
float:left/right
①.浮动会使元素自动切换为行内块
②.浮动后父元素会出现高度丢失问题
解决方案：1.手动添加高度
2.父元素加 overflow:hidden
3.父元素末尾添加div样式 clear:both
4.伪元素消除，方便重用
task::after{clear:both;content:“”;display:block;}
5.position:absolute; float:left;
③.浮动 快速实现 元素的两端对齐
清除浮动 ：clearfix
position 定位
static默认值 relative相对定位 absolute绝对定位 fixed固定定位 sticky粘性定位
1.任何元素默认定位方式：static
2.相对定位：relative
相对自身的位置进行位置偏移，但保留空间，不影响其他元素位置关系
3.position:absolute
4.固定定位：fixed
①.脱离了文档流，不保留空间
②.包含框就是浏览器窗口
③.不会随着滚动条移动位置
5.粘性定位：sticky
根据top/bottom/left/right的值，切换固定定位显示
添加非static定位，层级+1
z-index：2 层级设置，必须和非static使用
光标样式
1.设置鼠标悬停样式：cursor:wait
超链接样式
a:link 未访问链接
a:active 激活时
a:visited 已访问链接
a:hover 鼠标移动到链接上时
text-decoration:none;//去除文本装饰线
display:none;//隐藏
display：block;//显示