css三大特性及原元素特性

偏执的太偏执、 2024-04-06 13:20 53阅读 0赞

**目录**

一、css三大特性

1、继承性

2、层叠行

3、优先级

二、元素特性

1、块元素

2、行元素

3、行内块元素

4、元素转换

--------------------

### 一、css三大特性 ###

继承性；层叠行；优先级

#### 1、继承性 ####

子标签会继承父标签的某些样式，如文本颜色和字号。

p标签的样式继承父元素的样式，即div的样式

优点：

1、恰当地使用继承可以简化代码，降低CSS样式的复杂性

2、子元素可以继承父元素的样式( text-, font-, line-这些元素开头的可以继承，以及color属性)

#### 2、层叠行 ####

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

决样式冲突的问题

层叠性原则∶

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

样式不冲突，不会层叠

#### 3、优先级 ####

权重叠加:如果是复合选择器，则会有权重叠加，需要计算权重。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>选择器</td> 
   <td>选择器权重</td> 
  </tr> 
  <tr> 
   <td>继承或者*</td> 
   <td>0,0,0,0</td> 
  </tr> 
  <tr> 
   <td>元素选择器</td> 
   <td>0,0,0,1</td> 
  </tr> 
  <tr> 
   <td>类选择器，伪类选择器</td> 
   <td>0.0,1,0</td> 
  </tr> 
  <tr> 
   <td>ID选择器</td> 
   <td>0,1,0,0</td> 
  </tr> 
  <tr> 
   <td>行内样式 style=""</td> 
   <td>1,0,0,0</td> 
  </tr> 
  <tr> 
   <td>!important重要的</td> 
   <td>o无穷大</td> 
  </tr> 
 </tbody> 
</table>

注意：

1.权重是有4组数字组成,但是不会有进位。

2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推..3.等级判断从左

向右，如果某一位数值相同，则判断下一位数值。

4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样

式表为1000, !important无穷大.

5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

### 二、元素特性 ###

#### 1、块元素 ####

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点︰

1、比较霸道，自己独占一行。

2、高度，宽度、外边距以及内边距都可以控制。

3、宽度默认是容器（父级宽度)的100%。

4、是一个容器及盒子，里面可以放行内或者块级元素。

注意:

1、文字类的元素内不能使用块级元素

2、<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

同理，<h1>到<h6>等都是文字类块级标签，里面也不能放其他块级元素选中

#### 2、行元素 ####

常见的行内元素有<a>、<strong>、<b>、cem>、ci>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点︰

1、相邻行内元素在一行上，一行可以显示多个

2、高、宽直接设置是无效的。

3、默认宽度就是它本身内容的宽度。

4、行内元素只能容纳文本或其他行内元素。

注意︰

1、链接里面不能再放链接

2、特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全心

#### 3、行内块元素 ####

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素

的特点。有些资料称它们为行内块元素。

行内块元素的特点︰

1、和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。

2、默认宽度就是它本身内容的宽度（行内元素特点)。

3、高度，行高、外边距以及内边距都可以控制（块级元素特点)。

#### 4、元素转换 ####

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性比如想

要增加链接<a>的触发范围。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>方法</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>display:block</td> 
   <td>转换为块元素</td> 
  </tr> 
  <tr> 
   <td>display:inline</td> 
   <td>转换为行内元素</td> 
  </tr> 
  <tr> 
   <td>display: inline-block</td> 
   <td>转换为行内块</td> 
  </tr> 
  <tr> 
   <td>display: none</td> 
   <td> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">设置元素不会被显示</span></p> </td> 
  </tr> 
 </tbody> 
</table>