彻底弄懂CSS盒子模式之三

中国人联1

中国人联1

2016-01-29 11:44

彻底弄懂CSS盒子模式之三,彻底弄懂CSS盒子模式之三

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

1.彻底弄懂CSS盒子模式一(DIV排版快速入门)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

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是看不到效果的。[next]

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

   

展开更多 50%)
分享

猜你喜欢

彻底弄懂CSS盒子模式之三

Html CSS布局 Div+CSS XHTML
彻底弄懂CSS盒子模式之三

彻底弄懂CSS盒子模式(DIV布局)

Html CSS布局 Div+CSS XHTML
彻底弄懂CSS盒子模式(DIV布局)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

进阶:彻底弄懂CSS盒子模式之二

Html CSS布局 Div+CSS XHTML
进阶:彻底弄懂CSS盒子模式之二

彻底弄懂CSS盒子模式(DIV布局快速入门)

Web开发
彻底弄懂CSS盒子模式(DIV布局快速入门)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS盒子模式详解三

Web开发
CSS盒子模式详解三

CSS盒子模式详解一

Web开发
CSS盒子模式详解一

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《迷你西游》国民和土豪卡牌搭配站位攻略

《迷你西游》国民和土豪卡牌搭配站位攻略

javascript版的日期输入控件(3)

javascript版的日期输入控件(3)
下拉加载更多内容 ↓