html5及CSS的学习4

最新推荐文章于 2024-11-06 20:32:32 发布

旧梦时节

最新推荐文章于 2024-11-06 20:32:32 发布

阅读量67

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/lqb_zxs/article/details/112601004

版权

文章目录

三、布局（排版）

3.3 定位

定位( position )允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
有许多不同类型的定位，您可以对HTML元素生效。

3.3.1 静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这没有什么特别的。
如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。

3.3.2 相对定位

相对定位与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
给元素加上 position:relative; 并不会改变元素的位置，需要使用 top ， bottom ， left 和 right属性。

相对定位生成相对定位的元素，相对于其正常位置进行定位

3.3.3 绝对定位

position:absolute; 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。绝对定位的元素不再存在于正常文档布局流中。

3.3.4 固定定位

fixed 固定定位，这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于<html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。

3.3.5 z-index

当我们使用定位后，元素有可能会出现重叠现象。什么决定哪些元素出现在其他元素的顶部？当我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。如果是多个定位元素，在后面的定位元素将出现在先定位与元素的顶部。
当然，我们可以使用 z-index 属性。 “z-index”是对z轴的参考。
网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。 z- index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

3.3.6 position: sticky

还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。

四、样式优先级

4.1 样式冲突

同一个元素有多个相同css属性来适配，这个时候就会发生样式冲突。

<style type="text/css"> 
	#myDiv{ background-color: green; 
	}
	div{
		width: 500px; 
		height: 300px; 
		background-color: blue; 
	}
	.myDiv{ 
		background-color: red; 
	} 
</style> 

<div class="myDiv" id="myDiv"></div>

id 选择器、元素选择器、class选择器中都对 div 元素的 background-color (背景颜色)属性做了定义。这个时候就发生了样式冲突。
当发生样式冲突时，谁的优先级高，元素就适应哪个。如上所示，id选择器的优先级高于元素选择器和class 选择器，所以 div 的 background-color 属性值是 green 。

4.2 优先级

4.2.1 四种样式用法的优先级

内联样式 (在元素 style 属性（attr）中定义的样式)
内部样式 (在 <style> 标签中定义的样式)
外部样式(包含@import)
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

4.2.2 不同选择器之间的优先级

选择器之间的优先级，取决于选择器的精度。
优先级:

id 选择器
class 选择器
元素选择器

4.2.3 重复定义样式时

在不同地方重复定义样式时，如：

<link rel="stylesheet" type="text/css" href="a.css">// blue 
<link rel="stylesheet" type="text/css" href="b.css">// red

在 a.css 和 b.css 中使用相同的选择器都定义了对于某个元素的样式属性时，那么谁在后边元素适配谁。

4.3 改变优先级

如果想要改变样式的优先级，可以在css属性值后边加上 !important 来将优先级提高。

<style type="text/css"> 
	div{
		width: 500px; 
		height: 300px; 
		background-color: blue !important; 
	}
	.myDiv{ 
		background-color: red; 
	} 
</style> 
<div class="myDiv"></div>

class选择器优先级高于元素选择器，但是在元素选择器中， background-color 的值中有 !important关键字将优先级提高了，所以最后div的背景颜色是蓝色的。

总结：
样式的优先级：就近原则，哪个样式离标签最近，标签就适应它的样式
选择器的优先级：在设置相同属性时：Id选择器>Class选择器>标签选择器
提升样式的优先级: 用**!important**提升优先级

4.3.1选择器比较

选择器	相同	不同
Id ----class	1.都是元素的属性值 2.都区分大小写	id作用在一个元素上，class可以作用在多个元素上
Class ----- 元素（标签）	都可以作用多个元素	1. class区分大小写，元素不区分大小写 2. class可自定义，元素是html元素 3. class可适配多个不同元素，元素只能适配同一元素
后代 ----子元素	1. 都可适配多个元素 2.都可以使用元素作为选择器的一部分	子元素只能适配直接子元素，后代可以适配所有被包裹的元素