css三大特性及原元素特性

Poetry-Distance

已于 2022-09-26 21:38:59 修改

阅读量645

点赞数 1

分类专栏：开发语言 html 文章标签： css html 前端

于 2022-09-26 21:28:30 首次发布

本文链接：https://blog.csdn.net/qi341500/article/details/127060857

版权

开发语言同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

html

21 篇文章 0 订阅

订阅专栏

一、css三大特性

继承性；层叠行；优先级

1、继承性

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

    <style>
		div{
			color: red;
			font-size: 18px;
		}
	</style>
	<body>
		<div>
			<p>你好</p>
		</div>
	</body>

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、块元素

常见的块元素有<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>的触发范围。

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