彻底弄懂CSS盒子模式之三

2024-04-27 11:38

本文主要是介绍彻底弄懂CSS盒子模式之三,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

导读:

彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)


1.彻底弄懂CSS盒子模式一(DIV排版快速入门)
2.彻底弄懂CSS盒子模式二(导航栏实例)
3.彻底弄懂CSS盒子模式四(绝对定位和相对定位)


一、下面请看float的精彩表演,有请。
大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦。因为我的工作对网页设计人员很有用,就像之前align帮助你们定位网页元素一样重要,但是我的功能似乎比align强多了。接下来我将现场给你演示我的绝活,看细心点哦。当然也许我一下子不能把我所有的技巧给大家演示,因为有些技巧本人也许一下子记不起来了,那就请那些对我比较了解的人来帮我补充补充啰,比如版主等等啊。


先讲一下我主要的工作,我主要是帮助对像在网页中对齐的,一旦我发出float:left或float:right命令,被我浮动的对像就会向左或向右移动直到遇到边框( border) 、填充( padding) 、边界( margin )或者另一个块对象的边缘为止,当然也有一些看起来较特殊的情况,比如被我浮动的元素设置了一个负边界(margin)的时候。我还可以让文字流环绕在被我浮动的对像周围,这也是我的特色。另外要注意的一点是,最好给浮动对象设置一下宽度,不然会出现一些意想不到的麻烦。我主要浮动类型有两种,它们是float:left和float:right,当然我还有一个功能是float:none,不过float:none比较少用,这也是我的默认值,有时也是很有用的,我等一下会讲的。下面我开始表演了,我的舞台可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在标准的舞台中,如FF中才能表出来做的,请注意看我的说明,不然你用IE是看不到效果的。


1.我不动声色(我的属性不设置的时候),即:float:none,或者样式中不写这一项时,网页中的元素将按照它们自身的出现方式排列,一般是靠边对齐,先出现的排在前边,下面运行框是DIV先出现,P后出现,所以P排在DIV后面,注意看DIV的右边还有很多空间,但是P的文字不会跟在它的右边去。看:



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


2.我向盒子发出float:left命令,此时盒子浮动到左边,虽然看起来我的位置与上面例子没有什么变化,但此时跟在我后面的文本可以环绕到浮动盒子的右边了,看下面:



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


哈哈,看我表演了几项是不是开始觉得有点烦了,那么简单无聊的,那下面就给你表演几项特别的,但愿你不是IE的崇拜者,因为下面效果你用IE是看不到效果的,请用像FF那样的标准浏览器来运行代码框或测试吧。


4.浮动对象有负边界的情况,这时浮动对象可能会漂浮到其所在父对象外边去,这有点像绝对定位的效果,但又与绝对定位不同,它还能影响它所在地方的文本流,请用标准浏览器FF看下面代码效果:



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


5.如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性,子盒子漂浮后不会影响到父盒子的宽度,子盒子超出父盒子的部分会越到父盒子外面,但越出父盒子外的部分不会引起外边文本流的移动,而会直接覆盖在外边文字上面的,请用标准浏览器FF看下面代码效果:



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


6.如果父盒子不设定高度或者高度为自动,而其子盒子设定了浮动,并且高度超过了父盒子,在标准浏览器中,父盒子高度是不能自适高度,但是这种高度自适应常是我们需要的,如何做到让高度自适应呢,常见的办法是在父级内,浮动子盒子后边加入以下代码:

清除掉那个小盒子的浮动。请自行把代码中我注释部分消除注释再看效果,现在是没有自适应的情况, 请用标准浏览器FF预览和测试代码效果:



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


7.下面这个例子很重要,可以说明浮动元素的很多特性,大家运行代码框后再手动调整浏览器窗口大小,看版面有什么变化,下面我给你解释常见的问题和技巧。



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


(1)在一个盒子内的浮动对像左右浮动时,它的左右边界不一定就会靠在父对象的内补白上或边框上,上面9个盒子都是左浮动的,但在窗口最大化的情况下,只有第一个盒子和最后一个盒子的左边界靠在父盒子左边内侧。
(2)浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况,那么一个浮动盒子又会不会越到另一个浮动对象上面去呢,实质上它们是不会重叠的,即使用了负边界看起来像重叠在一起。
(3)并排的同一浮动方向的对像在一行中放不下时,可以自动换行。大家在浏览下面代码时,改变一下浏览器窗口,就会看到我所说的情况。
(4)浮动盒子在本文流中出现的位置会影响它的水平浮动位置,就像下面运行框效果,那些盒子并不是紧跟着一起出现的,之间有文本存在,所以结果造成所有等高的盒子并不是同一直线排列出现,而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时,紧接着的同一浮动方向的对象将会被自动换行显示。在下面实例中,如果调整浏览器窗口尽量小时,所有盒子可能会出现全部靠在父盒子左边的情况,因为缩小浏览器同时,盒子右边的文本流高度随之增高。


可见不要小看我浮动,熟练掌握我将会给你排版带来很多意想不到效果哦。


8.再讲一则注意事项,在开始时我不是有说过要给浮动对象设定一个宽度的,不然会有意想不到结果,即没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。请大家自行修改下面代码我注释前边的宽(只能删其中一个),测试看看效果就知道怎么回事了。



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


二、下面我要请我的好伙伴clear出场给你们讲讲它的故事,有请。
大家好,我是clear,能见到如此多人捧场我感到无比的荣幸,虽然在各位网页设计工作中我的作用常常被忽略,但我也有些作用是没有人能替代的,下面我将讲几项我实用作用以激发大家对我的兴趣:
1.如果你想一段文本流两边可以出现浮动对像的话,你可以用clear:none,看下面效果,蓝色背景段落两边的盒子是浮动的哦。



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


2.如果你要为一个网页准备一个页脚区块,比如

,你在设计网页的时候,你想不管你前边怎么浮动排版而又不想这个页脚跟上去,让它一直保持在前边内容后边,而且还是换行独立显示的,那么给这个页脚区块样式加个clear:both吧。
3.我还可以快速清除网页中具有浮动属性的不同对像的浮动,如果有很多的话,我的作用更能发挥出来,当然你也可以一条一条样式去删掉浮动的样式,但我肯定这样没有我来的方便,下面效果中,没有清除浮动前是横排的,但是清除后变成纵排(举此例只为说明问题,不管这实例实不实用),请自己删掉我的注释部分进行前后对比。



    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


好了,我的介绍到此完毕,各位还满意吗?有什么不满意可以提出来哦。你的意见就像一面镜子,它可以让我很清楚地发现自己的不足,然后改进它。



本文转自
http://www.webjx.com/htmldata/2007-04-02/1175497154.html

这篇关于彻底弄懂CSS盒子模式之三的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/940403

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

SpringBoot如何通过Map实现策略模式

《SpringBoot如何通过Map实现策略模式》策略模式是一种行为设计模式,它允许在运行时选择算法的行为,在Spring框架中,我们可以利用@Resource注解和Map集合来优雅地实现策略模式,这... 目录前言底层机制解析Spring的集合类型自动装配@Resource注解的行为实现原理使用直接使用M

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

大数据spark3.5安装部署之local模式详解

《大数据spark3.5安装部署之local模式详解》本文介绍了如何在本地模式下安装和配置Spark,并展示了如何使用SparkShell进行基本的数据处理操作,同时,还介绍了如何通过Spark-su... 目录下载上传解压配置jdk解压配置环境变量启动查看交互操作命令行提交应用spark,一个数据处理框架

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分