文档章节

对于 CSS 中块元素 以及块元素的漂浮的详细分析

 恐空控
发布于 2013/07/11 19:51
字数 851
阅读 570
收藏 8

    对于css中的块元素 相信了解过css的人都不陌生,很多时候我们往往是按照自己的思路写出了自己的关于css块的代码,去运行看看结果的时候下了一跳 ,效果和自己的目的也太大了吧,在这里我简单对块所占空间总结一下:

1、 对于css中未定位和漂浮的块,它所占的空间由它的高度和其父级块控制,它会随着文档流往下排 ,前面有元素它就另起一行,后面有元素让它自己另起一行,它是不屑于于其他元素在同一排。当然有种例外,那就是把外边距margin设置为负数就可以达到块相互交叉。

2、在块级元素叠加时,被覆盖的块元素会尽量在没被覆盖的空间上显示自己的内容,相当于块内容的自我表现,只要有空间就抓住机会。出发它的舞台被完全覆盖。

3、如果排在块元素前面的另一个块设置了漂浮,那么当前块将会自动去填充前面那个块元素的位置,知道遇到其前面未设置漂浮和定位的元素为止,当然了如果这个块和其前面的块元素如果重叠了,此块的位置则位于漂浮块的下面 属于被覆盖元素。

4、对于块来说外边距margin、内边距padding、边框border,所有加起来才算块元素占距的空间,对于外边框margin 若两块相邻的块则以margin大的为主;所有在不设置margin为负值的境况下,只要懂得了块的最基本的属性,可以说块的布局就是那么简单,因为将margin 变为负值的话往往会出现意料的结果,我知道很多人喜欢讲margin 设置为负值,想达到重叠的效果,其实我们可以通过定位或者块中设置块的方法来实现块的叠加效果。

5、要记住在正常的文档流中如果后面的块级元素被定为和前面某个元素有交集,一般是后面的块在上前端的块在下,当然这只是针对在同一层而言,还有就是这两个块都没有设置漂浮。

6、对于漂浮的块就允许 其他元素和他在同一行,在同一级别元素中它会按照漂浮方向自动跑到内嵌元素的相应方向,列入一下代码:<label>a</label><div id="left">往前飞</div> ;按正常的文档流,这个块会在a下边另起一行。但是如果设置了左漂浮这个块将会跑到这个a前面,如果空间大a可能和这个div在一行,若是这个div宽度和其父级块一样大,那么a就会被挤到下一行。

7、不要一行同时飘很多不同的块会出,这个要是出问题会很头大,我们可以将按类将这些块分开放到几个父级块中先排好父级块 在在父级快中排行分类的块,就方便控制了。

 

© 著作权归作者所有

粉丝 10
博文 22
码字总数 7160
作品 0
成都
私信 提问
再读规范中浮动与定位细节

前言 如题,浮动与定位是布局中重要且基础知识点,相关规范和书籍都有篇幅解读。但具体细节,笔者初读囫囵吞枣,几经再读受益匪浅。感叹规范,简明扼要,字字珠玑 。借此行文,着笔细节,竭尽...

2017/12/30
0
0
CSS float相关详解

float属性是CSS常用的一个属性,应用场景广泛,同时也是一个难点,涉及到一些相关细节及注意点。因此,就特别整理总结一下。 一、float介绍 float元素也称为浮动元素,设置了float属性的元素...

Ruheng
2017/12/05
0
0
CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家 写在前面的话: 由于C...

桐桐ESC
2013/03/29
192
6
css定位——position和float的用法详解

网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。css的布局主要涉及两个属性——position和float。它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还...

丶唄売
2013/06/04
56
0
人人网面试经验

人人公司的一面还是比较而基础的,基本上都是之前已经复习好到了的知识点(但是由于我的简历上写了熟悉c++和sql,所以对于这两点没有做准备,然后面试完就把简历上这两条给删了) 人人网面试...

sunshinewyf
2016/09/14
105
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部