css三大特性及原元素特性

目录

一、css三大特性

1、继承性

2、层叠行

3、优先级

二、元素特性

1、块元素

2、行元素

3、行内块元素

4、元素转换

---

一、css三大特性

继承性；层叠行；优先级

1、继承性

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

    
	
		

			
你好
		
	

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

优点：

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

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

2、层叠行

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

决样式冲突的问题

层叠性原则∶

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

样式不冲突，不会层叠

3、优先级

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

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0.0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important重要的	o无穷大

注意：

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

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

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

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

式表为1000, !important无穷大.

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

二、元素特性

1、块元素

常见的块元素有

~

、

、

、

、
、
1. 等，其中
   标签是最典型的块元素。

   块级元素的特点︰

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

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

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

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

   注意:

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

   2、

   标签主要用于存放文字，因此

   里面不能放块级元素，特别是不能放

   同理，

   到

   等都是文字类块级标签，里面也不能放其他块级元素选中

   2、行元素

   常见的行内元素有、、、cem>、ci>、、、、、等，其中标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

   行内元素的特点︰

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

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

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

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

   注意︰

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

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

   3、行内块元素

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

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

   行内块元素的特点︰

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

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

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

   4、元素转换

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

   要增加链接的触发范围。

   方法	说明
   display:block	转换为块元素
   display:inline	转换为行内元素
   display: inline-block	转换为行内块
   display: none	设置元素不会被显示