11月20日笔记

css的权重

Css的权重指样式的优先级，当有多高样式作用于一个元素时，只有权重高的样式对元素起作用；当权重相同时，后写的样式会覆盖前面的样式。

标签选择器：0001

class选择器:0010

伪类选择器：0010

id选择器：0100

包含选择器的权重等于权重之和

属性选择器：0010

伪元素选择器：0001

内联样式：1000

轮廓线

（1）Outline-color 轮廓线颜色

（2）Outline-style 轮廓线样式

None 无轮廓

Dotted 一系列点

Dashed 一系列短线

Solid 实线

1. Outline-width 轮廓线厚度

Thin medium thick

Outline:none 无轮廓线

浮动

盒子发生浮动会失去原来的位置（脱离文档流）

多个盒子同时浮动时，盒子会排成一行（BFC）

如果盒子同时左浮动，会从左到右依次排列

A|span 不能设置宽高，而浮动可以

清除浮动

给父级添加Overflow：hidden 或auto，scroll

在浮动标签末尾添加一个空标签，如<div style=clear:both><div>

 .s2{float: right;width: 150px;height: 150px;background-color: brown; }

p{  clear: right;}

上一个元素是右浮动就清除又浮动，是左浮动就清除左浮动

或p{clear：both} （都清除）

外边距

盒子的大小与border，padding，content有关，外边距不影响盒子大小。

Margin-top           Margin-left

Margin-bottom        Margin-right

/*上下左右都是20*/

  margin: 20px;

/*上下是0，左右都是20*/

margin: 0px 20px;

/*上外边距未0 ，左右外边距是20，下外边距是80*/

margin: 0px 20 px 80px;

/*上外边距为10，右外边距未20，下外边距是30，左外边距为30*/

margin: 0px 20px 30px 30px;

内边距

Padding-left               padding-top

Padding-right              padding-bottom

用法同上

外边距margin塌陷

1. 给父元素加边框
2. 给父元素加padding挤下去
3. 给父元素设置溢出隐藏（overflow：hidden）

Auto

右对齐Margin-left：auto

左对齐Margin-right：auto

居中对齐Margin：0 auto（）

Auto是自适应，只能用于左右，必须有宽（高），独占一行的块元素可使用

清除默认的内外边距

*{

Padding：0; (清除内边距)

Margin：0;(清除外边距)

}