摆放与布局——普通流、浮动定位、绝对定位、表格-白红宇

摆放与布局——普通流、浮动定位、绝对定位、表格

阅读量：5287 次

发布时间：2019-06-14

本文共 2272 字，大约阅读时间需要 7 分钟。

一·流

流实际上就是浏览器从HTML文件最上面开始，从上到下沿着元素逐个显示所遇到的各个元素。块元素与块元素之间会有一个换行，第一个是块元素，然后是一个换行，然后是第二个元素，以此显示。内联元素会在水平方向上相互挨着，总体上从左上方流向右下方。

p.s.关于盒模型

浏览器并排放置两个内联元素时，两个元素有不同的外边距，则两个元素之间的外边距是两个元素的和。而当上下放置两个块元素时，其外边距的情况不同于前者，两个元素之间的边距是最大一个元素外边距的值，共同的外边距被折叠了，因此折叠的外边距高度就是最大的外边距高度。

二、float元素——如何浮动元素

1、指定一个id（如段落<p id="amszing">）

2、指定一个宽度width（width指定的是文本宽度，不包括内边距）

#amazing{width:200px;}

3、浮动

#amazing{width：200px;

float:right;}

此时元素位于页面右方，浮动流不再是正常流的一部分，因此这个浮动段落会在正常流中删除，此前这个浮动段落的后面的元素会占据其原本的位置。不过内联元素定位时会考虑到浮动元素的边界，因此会围绕着浮动元素。

三、流体、冻结、凝胶设计

1、流体布局：调整浏览器宽度，布局会根据浏览器宽度进行调整，填满整个浏览器。（浏览器默认）

2、冻结布局：这种布局会锁定元素，调整浏览器窗口大小，页面仍保持其设计布局。

如<body>

</div>

</body>

可为“allcontent”设计样式，allcontent包含页面中的所用内容。

#allcontent{width:800px; /*将其中包含的所有内容限制在800像素之内，div的宽度总是800px，即使浏览器大小调整了，这个宽度也不变，则将div以及其中所包含的内容冻结在页面上。*/

padding-top:5px;

padding-bottom:5px;

background-color:#675c47;

}

3、凝胶布局

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

#allcontent{width:800px;

padding-top:5px;

padding-bottom:5px;

background-color:#675c47;

margin-left：auto；

margin-right：auto；

}

四、绝对定位

一个元素绝对定位时，浏览器首先要先将其从流中完全删除，然后指定一个位置放置元素。指定一个top和right属性（或left和bottom）的位置。

如：定位在距页面右边200像素，距上面100像素的地方，内容宽度设置为280px.

#sidebar{position:absilute;

top:100px;

right:200px;

width:280px;

}

由于元素是绝对定位的，也会从流中删除，流中的元素会忽略绝对定位元素的存在，因此不像浮动定位会围绕定位元素。他们甚至不知道页面上有绝对定位的元素。

p.s.position属性有：static、absolute、fixed、relative

static（静态），如果是静态定位，元素会放在正常的文档流中，而不是由你来指定位置，由浏览器决定这些静态定位元素放在哪里。你可以使用float属性将一个元素从流中删除，可以让其向右向左浮动，但最终仍然是浏览器决定将它放在哪里，没有指定一个绝对的位置信息，由浏览器默认将其放置。与其相对应的absolute则可以设定一个位置来放置元素，使用绝对定位时，将由你来告诉浏览器放置元素的具体位置。fix（固定定位）是将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面），所以固定元素永远也不会移动。相对（relative）定位会让元素正常地流入页面，不过在页面上显示之前要进行偏移。相对定位常用于更高级的定位和特殊效果。

五、表格定位

1、先创建一个<div>表示整个表格，行和列要嵌套在这个<div>中。

2、对表格中的每一行要创建一个<div>,其中包含行内容。

3、对于每一列，只需要一个块元素作为该列内容。如有两个块元素，只有一行的情况。

div#tableContainer{

display:table;

border-spacing:10px;/*为表格中的单元格增加10px的边框间距*/

}

div#tableRow（行）{

display:table-row;}

#main {

display:table-cell;