布局定位

Posted 2020-12-25 reyon

布局与定位 摆放元素

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;
}