CSS学习3（CSS特性、盒子模型）

1.CSS三大特性

层叠性、继承性、优先性。

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要是解决样式冲突的问题。

冲突的时候，遵循就近原则，哪个样式离结构近就执行哪个样式。

1.2 继承性

子标签会继承父标签的某些样式，如文字的颜色和字号。注意：只是继承某些样式。

行高继承：

body {

　　font: 12px/1.5 Microsoft YaHei ;

}

继承的时候，行高是当前文字的1.5倍。

1.3 优先级

选择器相同的时候，执行层叠性；选择性不同，则根据选择器权重。

权重由4位数字组成，权重可以叠加，但是不会进位。判断大小的时候从左往右判断。

继承或者*         0，0，0，0

元素选择器       0，0，0，1

类选择器/伪类选择器           0，0，1，0

id选择器            0，1，0，0

行内style=""       1，0，0，0

！important        无穷大

注意：继承的权重是0！

2. CSS盒子模型

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的Html元素，包括：边框、外边距、内边距和实际内容。border边框、content内容、padding内边距、margin外边距。

2.1 边框border

3个组成部分：边框宽度（粗细）border-width（px）、边框样式border-style、边框颜色border-color。

 边框的缩写： border: 1px solid red;   （没有顺序）

只想要上边框：   border-top: 1px solid red;  

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

border-collapse: collapse;    表示相邻边框合并在一起。

注意：边框会增加盒子的实际大小，就是原来盒子是200*200的，边框是10的话，大小变成220*220

解决方式：1、测量盒子的大小的时候不测量边框。2、如果测量的时候包括边框则要在width和height减去边框宽度。

2.2 内容content

2.3 内边距padding

padding-left、padding-right、padding-top、padding-bottom。

padding简写：

　　padding: 一个值        代表上下左右都是这个值

　　padding:两个值　　 代表上下是一个值，左右时第二个值

　　padding: apx bpx cpx   代表的是上为a，左右为b，下为c

　　padding: apx bpx cpx dpx   代表是上右下左分别为abcd（顺时针）

注意1：padding也会影响盒子的实际大小

解决方法：和border解决方法2一样。

注意2：如果盒子本身没有指定width/height属性，此时的padding就不会撑开盒子大小。

2.4 外边距margin

margin-left、margin-right、margin-top、margin-bottom。

margin的简写和padding一样。

外边距让盒子水平居中，必须满足以下两个条件：

1、盒子必须指定宽度。

2、盒子左右边距都设置为auto。

.header { width: 960px; margin: 0 auto; }

外边距的合并：

1、相邻块元素垂直外边距的合并。如：上面的盒子设置了下边距为10，下面的盒子设置上边距为20，最后实现的效果是这两个盒子的距离是20。

2、嵌套块元素的垂直外边距的塌陷。

　　解决：父元素加上边框：border: 1px solid transparent;

　　　　    父元素加内边距：padding: 1px;

　　　　    父元素添加overflow: hidden;

清除内外边距：

网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一样。

行内元素尽量只设置左右内外边距，不要设置上下内外边距。

3.去掉li前面的小圆点

list-style: none;