布局定位

Posted reyon

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了布局定位相关的知识,希望对你有一定的参考价值。

布局与定位 摆放元素

1,使用流

流实际上就是浏览器在页面上摆放html元素所用的方法。浏览器从HTML文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。

每个块元素会按它在HTML标记中出现的顺序放置在页面上。每个新的块元素会带来一个换行。并且元素会占满页面的整个宽度。

内联元素在水平方向上会相互挨着,总体上会从左上方流向右下方。

浏览器并排放置两个内联元素时,两元素的间隔等于两元素外边距之和。

浏览器上下放置两个块元素时,上下间隔为两个外边距中较大的那个外边距大小。

流属性:float 

float属性首先尽可能远地向左或向右浮动一个元素,然后它下面的所有内容会绕流这个元素。

clear 属性:当元素流入界面时,在这个元素左边、右边或两边不允许有浮动内容。

 

2,冻结设计

让布局锁定,当用户调整屏幕大小时,设计仍保存原样,这称为冻结布局。

冻结布局会锁定元素,让他们冻结在页面上,这些元素不能移动,就能避免由于窗口扩展带来的很多问题。

在HTML中,增加一个<div>元素,id为“allcontent”,包围页面中的所有内容。

在CSS中指定

#allcontent{
    width:800px ;    <!--固定宽度-->
}

即使浏览器大小调整,内容宽度也不变。

3,凝胶布局

凝胶布局会锁定页面中内容区的宽度,不过会将它在浏览器中居中。

#allcontent{
    width:        800px;
    margin-left:  auto;
    margin-right: auto;

}

外边距为“auto”时,浏览器会确定正确的外边距是多少,另外还会确保左和右外边距相同,所以内容会居中。

 

 

4,绝对定位

一个元素绝对定位时,浏览器首先要做的就是将它从流中完全删除,然后浏览器将这个元素放置在top和right属性指定的位置上。

流中的元素不会将其内联内容围绕在一个绝对定位元素周围。他们完全不知道页面上有这个绝对定位元素。

绝对定位元素可以分层放置,一个元素可以放在另一个绝对定位元素上面。每个绝对定位元素都有一个名为z-index的属性,这会指定它在一个虚拟z轴上的位置(上面的元素“更靠近”你,z-index更大)。

#sidebar{
    position: absolute;
    top:       128px;
    left:       0px;
}

使用position属性指定某个元素要绝对定位。

5,CSS表格显示

 CSS表格显示允许你在一个有行和列的表格中显示块元素,另外,通过将内容放在一个CSS表格中,可以很容易地用HTML和CSS创建多栏设计。

可以把表格想成是一个电子表格,包括行和列,各行和列交叉的位置有一个单元格。在一个电子表格中,可以在各个单元格中放入值,如一个数或一些文本。对于CSS表格显示,每个单元格会包括一个HTML块元素。

建立CSS表格显示

 技术分享图片

首先,把要作为一个表格显示的所有内容包围在一个<div>中,名为“tableContainer”

div#tableContainer {
    display: table;  
}

 

然后,为我们需要的一行创建一个<div>,名为“tableRow”。

div#tableRow {
    display: table-row;
}

 

最后,各列放置现有的块元素,它们将分别显示为表格中的一个单元格。

#main{
    display: table-cell;
}

#siderbar{
    display: table-cell;
}

 

以上是关于布局定位的主要内容,如果未能解决你的问题,请参考以下文章

Wordpress - 将代码片段包含到布局的选定部分的插件

有没有更聪明的方法将布局绑定到片段?

android片段表格布局

重新创建片段布局

片段布局不覆盖整个屏幕

如何实现具有不同片段/布局的 ViewPager