网页布局基础
1、CSS的三种定位机制
CSS 规定的定位机制有三种，分别是：
- 标准文档流（Normal flow）：
特点：从上到下，从左到右，输出文档内容。由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点： 在同一行内显示，不会改变HTML文档结构 ）组成。
- 浮动（Floats）
- 绝对定位（Absolute positioning）
言下之意就是网页布局和元素的定位都离不开这三种机制。
2、什么是W3C标准
W3C标准，是由万维网联盟制定的一系列标准，主要包括以下三个方面内容：
- 结构化标准语言（HTML和XML）
- 表现标准语言（CSS）
- 行为标准语言（DOM和ECMAScript）
W3C倡导的是结构、样式、行为分离
3.盒模型（Box Model）
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、盒子中的内容（content）.
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
元素的宽度和高度： 重要: 当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充（padding），边框（border）和边距。.
在三维空间中，盒子模型由上到下分为五层：
- 边框（border）位于第一层；
- 内边距（padding）和盒子中的内容（content）位于第二层；
- 背景图像（background-image）位于第三层；
- 背景颜色（background-color）位于第四层；
- 外边距（margin）位于最后一层。
Paste_Image.png
各个层叠加之后也就形成了我们看到的盒子模型的平面结构图。
盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。
Paste_Image.png
Paste_Image.png
区别： W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width、height包括content尺寸＋padding＋border。
举个例子：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px。
假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为： 宽： 20❄2+1❄2+10❄2+200=262px 高： 20❄2+1❄2+10❄2+50=112px
盒子的实际大小为: 宽: 1❄2+10❄2+200=222px 高: 1❄2+10❄2+50=72px
假如用ie 盒子模型，那么这个盒子需要占据的位置为： 宽: 20❄2+200=240px 高: 20❄2+50=70px
盒子的实际大小为：宽 200px、高 50px。
并不是所有的IE都使用IE盒模型：
- 早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用标准盒模型IE8及以上版本使用标准盒模型.
- 没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”。在HTML页面声明 <!DOCTYPE html>，浏览器就会选择标准 w3c 盒子模型来呈现内容了。
兼容方案:
使用css3新样式box-sizing，box-sizing有两个值:
- content-box：w3c标准盒模型
- border-box：“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>4.自动居中一列布局
需要掌握三个技能：
- 标准文档流
- 块级元素
- margin属性：上下外边距根据需要设置，左右外边距为auto
自动居中一列布局需要设置 margin 左右值设置为 auto，而且一
般要为包裹层（父层）设置width为一个定值，子层设置width为100%（以父包含块宽度为准自适应）。
aotu 会根据浏览器的宽度自动的设置两边的外边距。
原理：（浏览器宽度-外包层宽度）／2 = 外边距
如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性 。
5.浮动布局
CSS中规定的第二种定位机制，使用浮动布局能够实现块级元素的横向排版，即横向多列布局。
浮动的框可以左右移动（根据float属性值而定），直到它的外边缘 碰到包含框或者另一个浮动元素的框的边缘。
浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
当元素没有设置宽度值，而设置了浮动属性，元素的宽度会随内容的变化而变化（若没有内容，则宽度为0）。
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻它后面的元素，对它前面的元素没影响。
demo 1：
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; ">
</div>
<div style="height: 100px; width: 100px; background-color: Green;float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
Paste_Image.png
浮动元素覆盖了紧邻它后面的元素，而不会覆盖前面的。
6.清除浮动的常用方法
1.为受到浮动影响的元素设置clear属性 - clear：both；
2.为受到浮动影响的元素同时设置width：100%（或固定宽度）+overflow：hidden；
3、给包裹层（父层）设置：
.clearfix：after{
content:'';
display:block;
clear:both;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width: 300px;
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
.clearfix:after{ /*最简方式*/
content: '';
display: block;
clear: both;
}
/* 新浪使用方式
.clearfix:after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
*/
.clearfix{ /*兼容 IE*/
zoom: 1;
}
</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>7.横向两列布局
主要应用技能：
- float 属性 - 使纵向排列的块级元素，横向排列
- margin属性 - 设置两列之间的间距
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#00C;
margin:0 auto;
width:960px;
}
#header {
background:#FF3300;
width:100%;
}
#mainbody {
background:#FC0;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
.left {
width:800px;
height:200px;
background:#000;
float:left;
}
.right {
width:140px;
height:500px;
background:#690;
float:right;
}
#footer {
background:#639;
width:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody" class='clearfix'>
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>8.一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
你可以使用 display 属性、改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如<a>元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
<div>
some text
<p>Some more text.</p>
</div>
Paste_Image.png
9.CSS定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
10.绝对定位布局
绝对定位布局就是使用position属性实现的网页布局，是CSS中规定的第三种定位机制。它除了能实现横向多列布局以外，还可以实现许多复杂的定位，例如：
- 带有遮罩层效果的提示框
Paste_Image.png
2.固定层效果
Paste_Image.png
- 全屏广告
Paste_Image.png
position属性拥有三种定位形式：
- 静态定位
- 相对定位
- 绝对定位
要使元素进行绝对定位可以使用position属性来设置，它可以设置四个属性值，即四种定位，分别是：
- static（静态定位）：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative（相对定位）:
特点： 1.相对于自身原有位置进行偏移。 2.元素仍处于文档流中，这也就意味着它会占据标准文档流的空间。 3.一旦设置相对定位，元素随即拥有偏移属性和z-index属性（设置偏移属性之后可能会产生空间的层堆叠，对后面的元素形成遮盖，如下图所示。这时可以通过设置 [z-index 属性]来控制这些框的堆放次序）。
Paste_Image.png
- absolute（绝对定位）:
特点： 1.建立了以包含块为基准的定位。 2.完全脱离了标准文档流，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。 3.当元素设置为绝对定位后，元素也会 多出两类属性：偏移量属性 和 Z-index属性，与相对定位不同的是：
- 该元素已经脱离了标准文档流（不占位）
- 建立的定位基准不是该元素的原来位置，而是分两种情况: 2.1：没有设置偏移量，特点：无论是否存在已定位的祖先元素，都保持在元素初始位置；脱离文档流；宽度塌陷（随内容变化而变化） 2.2：设置了偏移量：又分两种情况（A.无已定位的祖先元素 B.有已定位的祖先元素） A.无已定位的祖先元素:它会以根节点（<html>）为偏移参照基准 B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准 (通过为元素赋予position:relative、position:absolute或者position:fixed对其进行定位，已定位的祖先元素意思就是通过这三种方式已经定位完成了)
绝对定位不在文档流中（不会占位置，宽度及长度显示随内容增减而增减
- fixed（固定定位）:
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
absolute（绝对定位）和fixed（固定定位）都属于绝对定位形式
使用绝对定位ablolute实现横向两列布局 — 常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
- relative—父元素相对定位
- absolute—自适应宽度的元素绝对定位
注意：固定宽度列的高度>自适应宽度的列（因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里）
腾讯云开发者
