复盘-----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进制颜色 #ff00f0

6.字体文本样式

①.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;//显示