频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS3:布局
2016-03-15 09:15:27         来源:宁静致远  
收藏   我要投稿

定位内容

用于定位内容的属性包括:
1)position:设置定位方法
2)left、right、top、bottom:为定位元素设置偏移量
3)z-index:设置定位元素的层叠顺序

定位方法

position属性设置元素的定位方法,可选值如下:
1)static:元素为普通布局,默认值;
2)relative:元素位置相对于普通位置(及static值)定位;
3)absolute:元素相对于position值不为static的第一位祖先元素定位,如果不存在这样的元素,则相对于body元素定位;
4)fixed:元素相对于浏览器窗口来定位,也就是说元素始终占据同样的位置,无论剩余内容是否向上向下滚动。
使用left、right、top和bottom属性设置元素的偏移量的时候,指的是相对于position属性指定的元素的偏移量。
我们通过一些例子来理解这些属性值的含义:



界面在Chrome中的效果如下:

\

然后为First按钮添加样式:



在添加了该样式后,界面的效果将无任何变化,但如果我们将position的值修改为relative:



然后布局的效果发生了变化:

\

从这里我们可以看出当position的值为static时,top的设置将没有效果,而当position值为relative时,元素的top位置就变为static时的top值加上设置的top值。
接下来我们将second按钮的position设置为absolute;



在chrome中的效果如下

\

设置产生了效果。我们再给second按钮一个p元素的父亲节点,并将样式中的position的值设置为relative(非static):




在chrome中的效果就发生了变化,因为second按钮会相对于position值不为static的第一位祖先元素来定位。

\

如果我们为first按钮设置样式如下:




在chrome中的效果如下:

\

我们发现first按钮消失了,但实际上first按钮并不是真的消失了,是被second按钮给遮住了。原因是first按钮设置的是相对于自己的static位置偏离top为200px的位置,而second按钮则是相对p元素位置偏离top为200px的位置,而first按钮的static位置实际上即为p元素的位置,所以first按钮和second按钮就重叠了。
下面我们看看position为fixed的例子:




在chrome中的效果如下:

\\

大家注意看下滚动条的位置,当我把滚动条从最上面拖动到最下面时,last按钮相对于浏览器的位置没有发生变化。

元素的层叠顺序

z-index属性指定元素显示的层叠顺序,值为数值,允许取负值,值越小,在层叠顺序中就越靠后。这个属性只有在元素重叠的情况下才会派上用场。
z-index属性的默认值是0。

多列布局

多列属性支持在多个垂直列中布局内容,包括:
1)column-count:指定列数,数值;
2)column-fill:指定内容在列与列之间的分布方式:auto表示按照顺序填充;balance指浏览器确保不同列之间的长度差异尽可能小;
3)column-gap:指定列之间的距离,长度值;
4)column-rule:在一条声明中设置column-rule-*的简写属性,<宽度值><样式><颜色>;
5)column-rule-color:设置列之间的颜色规则;
6)column-rule-style:设置列之间的样式规则,同border-style属性值;
7)column-rule-width:设置列之间的宽度;
8)columns:设置column-span和column-width的简写属性;
9)column-span:指定元素横向能跨多少列;
10)column-width:指定列宽。

p {
	column-count: 3;
	column-file: balance;
	column-rule: medium solid black;
	column-gap: 1.5em;
}
注意如果应用column-width属性,浏览器会通过添加或者删除列数维持指定列宽。目前大部分浏览器还不支持多列布局。


点击复制链接 与好友分享!回本站首页
相关TAG标签 布局
上一篇:2016.3.14__CSS 盒模型_第四天
下一篇:div设置 margin-left, margin-right 为 auto 时在IE的怪异模式下不居中
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站