前端学习第九课（css继承、优先级及盒子模型）

1.css继承

        子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。简单的理解就是： 子承父业。默认盒子相关的模型一般不继承，字体相关的模型一般都继承。

        子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性），一般设置字体相关的样式都可以继承。设置盒子模型相关的设置都不可以继承。

2.css优先级

1）权重计算公式

!important>内联样式>（A,B,C,D）> *>浏览器的默认样式>继承的样式

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

例：#d1 .child a[href]:hover{}    A:0 B:1 C:2 D:1=>0 1 2 1 

.parent .child a[href]:hover   A:0 B:0 C:4 D:1=>0 0 4 1

div{color:pink!important;}  优先级最高

3.css盒子模型

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

• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

• 盒子里面的文字和图片等元素是 内容区域

• 盒子的厚度 我们成为 盒子的边框

• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

  盒子模型：

3.1内边距（padding）

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

也可以简写内边距可以分别设置，顺序为：上 右 下 左，例如:

padding; 50px 40px 30px 20px;

padding; 50px 40px 30px ;//当少设置元素的时候，少设置的值会跟已设置的右边一致；

padding; 50px 40px；//此时上与下值相同，左与右值相同；

padding; 50px；//此时上下左右值均相同。

3.2外边距（margin）

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

用法与内边距基础用法一致，但左右外边距不重叠，上下外边距会重叠以大的边距为准。

1）块级盒子水平居中

盒子必须指定宽度，在左右设置外边距为auto，例如：

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

3.3边框（border）

语法：

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

例如：border: 1px solid red;  没有顺序

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的样式：none（没有边框，即忽略所有边框的宽度，为默认值）；solid（边框为单实线，较为常用）；dashed（边框为虚线）；dotted（边框为点线）；

1）边框设置

对于边框，可以对上下左右边框分别进行设置，具体如下：

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度 样式 颜色;	border-bottom:宽度 样式 颜色;	border-left:宽度 样式 颜色;	border-right:宽度 样式 颜色;

 2）表格的细线边框

语法：table{ border-collapse:collapse; }

• collapse 单词是合并的意思

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

例如：

<style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table, td {
        border-collapse: collapse;  /*合并相邻边框*/
    }
</style>