分类 标签 存档 程序员漫画 黑壳相关站点 订阅 搜索

CSS - 布局篇

364 浏览0 评论

本文由黑壳网 www.bhusk.com原创
本文章来源CSS-布局篇 ~黑壳网


块元素分为 content padding margin border

1 标准文档流(Normal flow)

块元素自动换行

元素设置的 left,right,bottom,top 属性都是没有效果的

z-index 属性在这时也不会生效。(z-index 属性是设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。)

2 定位(positioning)

relative(相对定位) absolute(绝对定位) left top right bottom

relative 占据空间(原先的位置还存在 后面的元素不动) 相对于原先占有的位置上进行偏移

<div style="width:50px;height:50px;background-color:#00f;float:left">a</div>
<div style="width:60px;height:60px;background-color:#f00;position:relative;left:20px;float:left">b</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left">c</div>

absolute 不占空间(后面的元素会填充) 并且会相对与包含它的最想近的已定位元素(没有就相对与 body)

//所以 b 相对于 body 进行偏移,并且不占空间后面的元素填充

<div style="width:50px;height:50px;background-color:#00f;float:left">a</div>
<div style="width:60px;height:60px;background-color:#f00;position:absolute;left:20px;float:left">b</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left">c</div>

3 浮动(float)

(1)当前块级元素 a(float:left),下一个块级元素 b,a 会和 b 发生重叠,a 在上面。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0">b</div>

(2)当前块级元素 a(float:left),下一个块级元素 b(float:left)。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>

(3)当前块级元素 a(float:left),下一个块级元素 b(float:left),下一个块级元素 c(float:left)。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>
<div style="width:80px;height:100px;background-color:#00f;float:left;">c</div>

(4)当前块级元素 a(float:left),下一个块级元素 b(float:left),下一个块级元素 c(clear:both)。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>
<div style="width:80px;height:100px;background-color:#00f;clear:both">c</div>

(5)当前块级元素 a(float:left),下一个块级元素 b(float:left),下一个块级元素 c。

<div style="float:left;width:40px;height:40px;background-color:#f00">a</div>
<div style="width:80px;height:80px;background-color:#0f0;float:left;">b</div>
<div style="width:80px;height:100px;background-color:#00f;">c</div>

黑壳博客 blog.bhusk.com

E-mail:keshu@bhusk.com

本文由 黑壳博客的壳叔 创作或转载,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。

可自由转载、引用,但需署名作者且注明文章

评论  
留下你的脚步
推荐阅读