Rumah > hujung hadapan web > tutorial css > CSS让DIV重叠实例总结

CSS让DIV重叠实例总结

零下一度
Lepaskan: 2017-06-07 11:00:55
asal
3622 orang telah melayarinya

CSS层叠性是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。

1. 解析CSS样式继承和层叠

基本选择器

标签选择:根据页面当中标签名字进行选择,直接把样式应用到指定的标签上。

特点:

1.标签选择器会对当年页面当中所有的指定标签进行选择;

2.标签选择器对代码的当前标签层次结构没有任何关联,只要是在当前页面上,都能被选中。

id选择:需要先指定一个标签设置id值(id值不能重复是整个页面中唯一的)。

class选择:通过给标签取类名,通过类选择器选择指定标签。

2. CSS外边距(margin)重叠及防止方法

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

e43a750fbb169b2e7d3ec4798133c28c-0.gif

3. 解析CSS 中元素的叠放顺序

当不包含z-index属性和position属性时,所有元素的叠放顺序与其所在HTML文档中出现的先后顺序一致。(使用负margin来重叠内联元素的特例除外。)

当元素浮动float时,浮动块元素被放置于非定位块元素与定位块元素之间,换句话讲,浮动元素显示在普通流中的后代块元素之上,常规流中的后代行内元素之下。

元素加入position位置属性时,所有具有position属性的元素及其子元素会显示在其他不具有position属性的元素上面。

4. CSS实现p的随意重叠方法介绍

f9820e1d0ae09e7c02ec2ab099cd2ef9-0.gif

这篇文章主要为大家介绍了让p重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现,需要的朋友可以参考下 让p重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。 
重叠样式需要主要CSS样式解释 

5. css 让两个div重叠

做网页的时候在p里放了一个别的网页的天气插件,但是点击了会跳到广告页面的,想去网上找个禁止p点击的方法,可是发现没有,用了js的方法好像也没有成功,后来觉得还是用两个层重叠的方法来阻止点击,虽然定位是有点麻烦

6. div重叠问题

我在html定义了两个p 但是显示出来的结果却是两个p部分重合了 原先是不重合的 不知道我碰了哪个键 在运行时 图层就发生了重合 我把那两个p单独拎出来 显示正常 我就想问问出现这种状况的原因是什么呀? 

相关问答:

1. javascript - 在相对定位中使用top等属性,为什么会出现div重叠的情况?

2. javascript - 两个div重叠以后,在页面重新生成一个div,只生成一个,这个效果怎么写?

【相关推荐】

浅谈css中margin的重叠

canvas动态小球重叠效果

为什么浮动能实现文字环绕图片而不会重叠

Atas ialah kandungan terperinci CSS让DIV重叠实例总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan