布局和定位 - zilongxuan001/LearnFreecode GitHub Wiki
什么是流（flow）?
外边距计算？
-
两个内联元素并排放置时，浏览器如何计算外边距？
-
内联元素有外边距吗？
-
两个块元素上下放置时，浏览器如何计算外边距？
-
嵌套元素的外边距会折叠吗？
文本会被浏览器怎么处理？
HTML文档中的元素就像水一样，让HTML文档中元素的上方往下，从左上往右下流到浏览器页面。
流实际上就是浏览器在页面上摆放HTML元素所用的方法。
浏览器从HTML文件最上面开始，从上到下逐个显示所遇到的每个元素。
浏览器遇到块元素，就在块元素之后加一个换行，让块元素按照HTML文档中的顺序出现在页面上。
浏览器遇到内联元素，就将其在一个水平方向上，从左上方流向右下方。内联元素如果超过内容区宽度，就放入下一行。
内联元素并排放置，外边距会相加。
块元素上下放置时，外边距会重合，浏览器去取外边距最大值为重合后的数值。
内联元素有外边距，只不过不明显。不过图像元素不一样，可以设置外边距，内边距和边框。
嵌套元素的外边距会折叠。
除非嵌套的元素中外边的元素有边框，这样两个元素的外边框就不会碰到一起，也就不会折叠。
什么是float?
浮动怎么实现？
clear属性
右松左紧是什么意思？如何实现？
右紧左松是什么意思？如何实现？
注意事项
-
可以浮动到中间吗？
-
浮动元素的外边距会折叠吗？
-
可以浮动内联元素吗？
-
浮动需要设置元素宽度吗？
float就是浮动，可以将元素浮动到页面之外。
这是右松左紧的设计方式。
（1）将浮动元素（侧栏）往HTML文档上面放，一般放在header下面，主内容上面。
（2）在CSS中设置浮动元素的浮动属性，必须设置元素的宽度`width`。
#sidebar { padding: 15px; margin: 0px 10px 10px 10px; width: 280px; float: right; }
（3）如果浮动元素在右边，则主内容右边的外边距要等于浮动元素的宽度（左右两边的外边距+内容区宽度+左右两边的内边距）
#main { margin: 0px 330px 10px 10px; }
（4）在页脚处的CSS中，加上`clear`属性。
#footer { clear: right; }
右紧左松，就是右边（主内容）浮动，左边（侧栏）是处在流中。
设置方法
（1）在HTML文档中，将侧栏区放到主内容区下。
（2）设置侧栏的CSS，设置左边的外边距和右边的主内容区元素宽度相等。
#sidebar {
margin: 0px 10px 10px 470px;
}#main {
padding: 15px;
marigin: 0px 10px 10px 10px;
width: 420px;
float: left;
}#footer {
clear: left;
}（1）什么是流体布局？有什么优缺点？
（2） 什么是冻结布局（frozen layouts）？步骤？有什么优缺点？
（3） 什么是凝胶布局（Jello layouts）?原理？步骤？有什么优缺点？
（4）什么是绝对布局？原理？ 有什么优缺点？
（5）什么是CSS表格布局？有什么优缺点？
流体布局，因为无论浏览器页面缩放，都会填充整个页面。
冻结布局是指，内容的宽度是固定的，不会随浏览器窗口扩展或收缩。
锁定元素，让元素冻结在页面上，元素不能移动。
首先完成浮动布局设置，在完成以下步骤。
(1) 在HTML文档内新增`<div>`，id为“allcontent”，包围header，aside，main和footer区。
(2) 在CSS文档内
`width: 800px;`将所有内容限制在800像素范围内#allcontent{ width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; }
设置内边距和背景颜色。
凝胶布局是指，内容的宽度固定，位于中央，外边距会随浏览器窗口扩展或收缩。
固定大小的`<div>`包围页面中的所有内容
auto属性扩展外边距
锁定页面中内容区的宽度，将其在浏览器中居中。
首先完成浮动布局设置，在完成以下步骤。
(1) 在HTML文档内新增`<div>`，id为“allcontent”，包围header，aside，main和footer区。
(2) 在CSS文档内
相比冻结布局，凝胶布局新增了外边距，设置值为`auto`。#allcontent{ width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; margin-left: auto; margin-right: auto; }
将外边距设置为`auto`，浏览器会确定外边距是多少，并且左右外边距相等，内容位于中间。
绝对布局利用绝对定位（absolute positioning）
固定元素在页面上的位置，不随浏览器窗口的变化而变化。
一个元素绝对定位时，浏览器就会将其从流中删除，然后将其放在指定的位置上（比如根据top和right，或者bottom和left指定位置）。
>比如，将侧栏设置为一个特定的宽度，定位在主内容右边
由于侧栏在流之外，其他元素不知道该元素存在，内联元素也不会围绕绝对定位元素周围。
CSS表格布局是什么？
CSS表格布局优点？
CSS表格布局如何实现？
border-spacing 的外边距和外边距会重合折叠吗？
CSS表格和HTML表格区别？
如何增加多行表格和多列表格？
CSS表格对齐的方式？
CSS表格列的宽度如何设置？
（1）在HTML文档内，建立表格`<div>`，id="tableContainer"。
（2）在HTML文档内，建立行`<div>`，id=tableRow，如何设置多行，可以为`class="talbeRow"`
（3）在HTML文档内，将mai区和aside区放进行`<div>`里。
（4）在CSS文档内，设置
#tableContainer {
display: table;
border-spacing: 10px;
}#tableRow {
display: table-row;
}#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align: top;
}
#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
vertical-align: top;
}
main和sidebar去掉外边距，加上`vertical-align`，确保单元格内容相对于单元格上边对齐。
#header {
background-color: #675c47;
margin: 10px 10px 0px 10px;
height: 108px;
}
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 0px 10px 10px 10px;
font-size: 90%;
}定位有哪四种方式？
关于绝对定位的问题？
如何综合使用定位方式？
可以指定位置的元素有哪些？
指定元素位置的方法有哪些？
不指定定位方式，则默认为静态定位，HTML文档内容正常流入页面。
static，静态定位，属于默认设置，将由浏览器决定将元素指定位置，即使使用`float`属性，也将由浏览器决定位置。
绝对定位，将元素完全从页面流中取出，并指定一个绝对位置，一般是相对于离它最近的父元素指定的（一般是`<html>`）
absolute，绝对定位，将由你决定元素放在哪里。
绝对定位元素不随浏览器缩放而减少移动位置，就是说，浏览器页面滚动时，绝对定位元素有可能看不见。
绝对定位元素会相对于页面边界来放置。
如果 一个绝对定位元素嵌套在另一个定位元素中，就会相对于外包含元素定位。
绝对定位元素可以使用`z-index`属性分层设置，将一个绝对定位元素放在另一个绝对定位元素上面。
固定定位，相对于浏览器窗口，把元素放在一个特定的固定位置上。
fixed， 固定定位，将元素放到相对于浏览器窗口的一个位置上（而不是相对于页面）。 举例，将一个优惠券放在页面上，而且无论页面如何滚动，都在页面上。
需要指定距离浏览器窗口边界的一个偏移量，而不是距页面边界的举例。
所谓浏览器窗口，是指页面的可见区域。
举例 增加一个优惠券
#coupon {
position: fixed;
top: 300px;
left: 0px;
}
#coupon a, img {
border: none;
}
优惠券在左边，所以左边为0。
设置优惠券的图像和链接的边框为none。
另外，可是`left`可以设置为负值
#coupon {
position: fixed;
top: 300px;
left: -90px;
}绝对定位（absolute positioning）是什么?
绝对定位如何实现？
z-index属性是做什么的？
（1）HTML文档内，将aside区调整到header区下，main区之上。
（2）设置sidebar的CSS。
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
position: absolute;
top: 128px;
right: 0px;
width: 280px;
}#header {
background-color: #675c47;
margin: 10px;
height: 108px;
}（3）调整main区的`<div>`
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 330px 10px 10px;
}