css总结

一. 选择器

基本选择器
(1) 标签选择器 <p></p> p
(2) 类选择器 <p class="cls"></p> .cls
(3) id选择器 <p id="pid"></p> #pid
(4) 通配符 *

复合选择器
(1) 伪类选择器

:link 未访问
:visited 已访问
:hover 鼠标经过
:active 鼠标按下为松开
:focus 获取焦点

(2) 伪元素选择器

::before 在....前面添加
::after 在....后面添加
添加的元素都是行内元素
必须要有content属性

(3) 并集选择器 div,p,li
(4) 交集选择器 div.one //标签名.类名
(5) 后代选择器 div ul li //子孙后代都可以这么选择
(6) 子代选择器 div>ul>li //这里的子 指的是 亲儿子 不包含孙子 重孙子之类

二.盒子模型

border边框

border : border-width || border-style || border-color 

边框样式：

• solid实线
• dashed 虚线
• dotted 点线
• double 双实线

padding内边距
边框与内容之间的距离，padding会撑大盒子，后面跟几个数值表示的意思是不一样，如下：

①padding: 20px
上下左右20
②padding: 20px 30px
上下20 左右30
③padding: 20px 30px 50px
上20 左右30 下50
④padding:20px 30px 50px 100px
上20 右30 下50 左100

margin外边距
取值顺序跟内边距相同

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。
2. 盒子必须指定了宽度（width）
   然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

margin的塌陷问题
父盒子里有一个标准流的子盒子，当子盒子设置margin-top的时候，会把父盒子一起带下来。
解决塌陷问题：

• 给父亲添加overflow:hidden
• 给父亲添加padding-top
• 给父亲添加border
• 给父亲浮动,定位
• 给子元素浮动,定位

三.浮动、清除浮动

float:left 左浮
float:right 右浮
float:none 不浮动

浮动元素的特性：

1. 浮动的元素会脱离标准流,在页面上不占据位置
2. 浮动的元素 会转换成行内块级元素的显示方式
3. 浮动不会压住padding值
4. 要浮动都浮动,要么都不浮动
5. 浮动找浮动,会顶线对齐
6. 浮动会影响到下面的元素

当父盒子没有给高度,子盒子在父盒子中进行浮动,导致父盒子高度为0,从而影响布局，所以要清除浮动，否则会影响到下面的元素的布局。
常用清除浮动的方法：
方法一：额外标签法

<div style="clear:both;"></div> 在浮动元素的末尾添加一个空标签

方法二：给父元素添加overflow:hidden
方法三：伪元素清除浮动

.clearfix:after {
	content="";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.clearfix{
	*zoom:1;
}

四.定位

(1) 静态定位
position：static;
静态定位就是清除定位，没有定位,就是标准流，偏移量属性无效
(2) 相对定位
position：relative;
特性：
1.参照自己进行移动。
2. 不能转换模式
3. 脱离标准流，但是占位置
(3)绝对定位
position：absolute;
特性：
1. 参照浏览器(或父元素)进行移动。
2. 自动转换模式： 行内块
3. 脱离标准流
绝对定位
-父级无定位则以浏览器为准
绝对定位
-父级有定位则以父级为准
(4)固定定位
position： fixed
特性：
1.参照浏览器进行移动。
2. 能转换模式（行内块）
3. 不仅脱标，还脱浏览器。
叠加次序z-index
1.只能给定位使用
2.没有单位
3.默认值 auto

五.基本属性

font

font:font-style font-weight font-size/line-height font-family  //复合写法不能更换顺序 除了字体大小和字体风格以外都可以省略

• 字体大小 font-size 单位px em是一个字的大小
• 字体样式 font-style normal 正常italic 倾斜
• 字体风格font-family 中文需要加引号
• 字体粗细font-weight normal 400 bold 700

background

• background: 颜色 图片 平铺 位置 固定 //复合写法没有顺序之分
• background-color 背景色
• background-image 背景图片 要有url(地址) 要给宽高
• background-repeat 背景是否平铺 repeat 平铺 、no-repeat 不平铺、repeat-x
  水平平铺、repeat-y 垂直平铺
• background-position 背景位置
  top、center、bottom、left、center、right不分顺序
  100px 200px，x轴是100px，y轴是200px，必须x在前 y在后
• background-attachment 背景是否固定
  fixed 固定、scroll 滚动

其他
(1) 居中
文本居中text-algin:center; left right
盒子居中margin:0 auto
1.必须块级元素
2.必须有宽度

(2) 首行缩进 text-indent: 2em;只能给块级元素使用
(3)行高 line-height
(4) 元素显示和隐藏
display:block ===display:none; 不占位置
visibility:visible === visibility:hidden; 占位置

overflow:hidden 溢出隐藏
overflow:visible 默认值
overflow:auto 自动添加滚动条
overflow:scroll 添加滚动条

(5) 鼠标样式 cursor
小手 pointer
默认 default
文本 text
移动 move
禁止 not-allowed

(6) 取消轮廓线 outline: none
(7) resize:none 防止文本域拖拽
(8) 设置行内块级元素或者行内元素的对齐方式 vertical
中线middle
顶线top
基线baseline
还可以清除图片底边的空白缝隙

(9)溢出的文字省略号显示
white-space: nowrap; 强制文本一行内显示
overflow: hidden; 溢出隐藏
text-overflow: ellipsis; 溢出的部分省略号代替

(10)border-radius 圆角矩形
①border-radius:20px
四个角都是20px
②border-radius:20px 50px
左上和右下20 右上和左下50
③border-radius:20px 50px 100px
左上20px 右下50px 右上和左下100px

(11) 盒子阴影box-shadow

box-shadow: 水平 垂直 模糊距离 阴影大小 阴影颜色

(12)元素半透明opacity
会把盒子里面的所有元素都添加透明效果,opacity: 1; 不透明,取值0-1之间的小数

背景颜色透明使用rgba（0,0,0,.3）;

(13)去除下划线 text-decoration: none;
(14)取消默认li的小点 list-style: none;

六.三大特征

继承
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
层叠
给同一个元素设置相同的属性,后面的会层叠掉前面的。

1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
2. 样式不冲突，不会层叠

优先级

1. !important
2. 行内元素
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符
7. 浏览器默认样式
8. 继承

权重是优先级的算法，层叠是优先级的表现