2、CSS样式继承、优先级、权重叠加和标签的显示模式

（一）样式的继承

子元素覆盖和继承父元素的样式

继承：如果父元素有，子元素没有，则子元素继承父元素的样式

覆盖：如果父元素有，子元素也有，则子元素覆盖父元素的样式

（二）样式的优先级

• id样式 > class样式 > 标签样式

• 行内样式  >  内嵌样式  >  外部样式

（三）应用多个样式

一程序执行的先后为优先级，后执行的将前面的覆盖了

1. 换成<p class="bb aa">锄禾日当午，汗滴禾下土</p>，结果一样
2. 

（四）强制优先级：!important

（五）权重叠加

• 标签样式（1） <   类样式（10）  <  id选择器（100） <   直接样式（1000）  <   important（10000）

（六）标签的显示模式

1、行显示标记：<a>  <span>

注：跨字符块标记，span里面只能放文字

特性：

• 标记是从左往右排的

• 如果不指定高度，默认高度是0
• 不指定宽度，默认宽度是0

• 行显示标记不能指定高度和宽度

• 转换成块显示：display：block

注：如果<a>标记转换成块显示以后，可以设定宽度和高度，但是排列变成了上下排列，如果要实现左右排列，同时还要设定宽度和高度，可以将显示模式设置为display:inline-block

2、块显示标记：<div>  <table>

注：跨段落块标记，div里面可以放标题、段落、图片、文字

特性：

• 标记是从上往下排的

• 如果不指定宽度，默认宽度是100%
• 如果不指定高度，默认高度是0

• 可以指定宽度和高度

• 块转换成行：display：inline

注：实际应用中一般是行转换成块，块不转换成行

div+css排版优点：

1. 缩减页面代码，提高页面执行效率
2. 带宽要求降低（代码更简洁）
3. 更容易被搜索引擎搜索到

display的属性：

• none：此元素不会被显示
• block：此元素将显示为块级元素，此元素前后会带有换行符
• inline：默认。此元素会被显示为内联元素，元素前后没有换行符
• inline-block： 行内块元素。（CSS2.1 新增的值）
• list-item：此元素会作为列表显示
• run-in：此元素会根据上下文作为块级元素或内联元素显示
• compact ：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
• marker： CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
• table ：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
• inline-table ：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符
• table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）
• table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）
• table-footer-group： 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）
• table-row： 此元素会作为一个表格行显示（类似 <tr>）
• table-column-group：此元素会作为一个或多个列的分组来显示（类似 <colgroup>）
• table-column：此元素会作为一个单元格列显示（类似 <col>）
• table-cell ：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
• table-caption：此元素会作为一个表格标题显示（类似 <caption>）
• inherit： 规定应该从父元素继承 display 属性的值