盒模型以及浮动布局 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin);这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子, ...
盒模型以及浮动布局
谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin);
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
先上图:
上图清晰的表明了盒模型的具体表现样式; margin外边距+border边框+padding内边距+content内容;
既然盒模型叫做盒模型~那么我们可以把它比作一个 液晶屏幕包装盒子(楼主刚刚买了一台,所以拿它来比喻了,大家都知道的 这玩意儿快递的时候padding可不少啊) 拆快递的时候,里面的显示屏就是内容(content) 而泡沫呢?就是内边距(padding) 外面的壳子就是(border) 然后呢 就是盒子与其他盒子之间的距离(margin) 这就组成了我们css中的盒模型;
css中盒模型有很多种表现形式:其中 block(块状)、inline(行内)、(inline-block以块状形式表现的行内元素) 设置css display可以改变盒子的表现形式 下面会详细介绍
个人觉得css可以这么去理解:它规定了盒子的包装样式,盒子的摆放位置,盒子的长宽高等等等等,浏览器就像是一个房子,等待人们用箱子填满它;
下面呢,楼主简单介绍一下 内容(content)、填充(padding)、边框(border)、边界(margin)在css中的具体表现,以及他们所带的看似bug的另类属性。
1.内容(content)
内容包括了文本,块状盒子,图片,内容盒子的盒模型等等......栗子:
<style type="text/css"> .div2{ padding: 20px; border: 1px solid #000099;} .div2 a{ background: red;} </style> <div > <a href="#">div标签默认是一个块状(block)盒子</a> </div>
div标签默认是一个块状(block)盒子
<style type="text/css"> .div3{ padding: 20px; border: 1px solid #000099; height:100px;}/*注意这个时候 div1的实际高度等于 100+40+2=142px*/ .div3 a{ background: red;} </style> <div > <a href="#">div标签默认是一个块状(block)盒子</a> </div>
div标签默认是一个块状(block)盒子
<style type="text/css"> .div1{height:200px; width: 100px; float: left; background: #ff9000;} .div1 a{ background: red;} .div2{height:200px; width: 100px; float: left; background: red;} .div3{height:200px; width: 100px; float: right; background: #002A80;} </style> <div > </div> <div > </div> <div > </div> <div > 这是文本 </div>
如果要想文本另换一行,与浮动框互不干扰,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
什么是CSS清除浮动?
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
引用W3C的例子,news容器没有包围浮动的元素。
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.clear { clear: both; }<div ><img src='/images/loading.gif' data-original="news-pic.jpg" /><p>some text</p><div ></div></div>
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
.news { background-color: gray; border: solid 1px black; }.news img { float: left; }.news p { float: right; }.content{ clear:both; }<div ><img src='/images/loading.gif' data-original="news-pic.jpg" /><p>some text</p><div ></div></div>
方法五:使用CSS的:after伪元素
结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
原标题:DIV+CSS网页标准化布局(二)之浮动布局
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。