布局定位
布局与定位 摆放元素
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;
}