好久之前，最初入坑前端时的学习笔记。那时候「慕课网」的几个路径还是免费的，也有好几个跟网页布局有关的课程，其中有一个叫《网页布局基础》讲得很棒，那时候刚好喜欢上 markdown 写作，于是结合几个课程写下了这篇笔记。后来折腾了几次系统，换过硬盘，丢失了大量原始文件，死了很多脑细胞才把这篇恢复。经别人提醒，现在那门课也已经下架了，有点感慨。
layout: "post"
title: "慕课网《网页布局基础》学习笔记"
date: "2016-06-19 13:46"
categories: [前端, HTML/CSS, CSS布局]
tags: [前端, html, css]
网页基础布局
在慕课网的web前端工程师计划学习CSS布局时，结合《HTML+CSS基础课程》中的CSS盒模型以及布局模型部分、《如何用CSS进行网页布局》课程的一些基础部分、《网页布局基础》课程的主要部分，所做的一些微小的笔记。
什么叫做布局？
- 布局又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
- 报刊、杂志、书籍装帧、产品样本、挂历、招贴画、唱片封套和网页页面等平面设计的各个领域。
什么是网页布局？
网页布局是网页制作的基础； div+css布局网页更是基础中的基础。
网页设计的特点：
- 网页可以自适应宽度；
- 网页的长度理论上可以无限延长。
分栏又称为分列，常见的布局分为：一列布局、两列布局、三列布局，甚至是混合布局。
需要掌握的知识点
- 标准文档流
- 盒子模型
- float属性
- position属性
布局的类型
- 流式布局
- 浮动布局
- 绝对定位布局
亦即：
- 流动模型（Flow） --- 默认
- 块级元素都自上而下垂直分布，默认宽度都是100%占据一行；
- 内联元素都在所处的包含元素中从左到右水平分布（但内联元素可能有一些浏览器默认的左右margin[注1]，而没有上下margin）。
- 浮动模型（Float）
- 通过设置
float属性为left或right来定义为浮动； - 可以通过设置浮动，来让块状元素并排显示（同左、同右或一左一右等）
- 通过设置
- 层模型（Layer）
- 让html元素在网页中精确定位，就像PS中的图层一样。
- 层模型有三种形式：
- 绝对定位（
position: absolute）- 将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位；
- 如果不存在这样的包含块，则相对于
<html>元素，即相对于浏览器窗口移动，而不是<body>元素。
- 相对定位（
position: relative）- 相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由
left、top、right、bottom属性确定，偏移前的位置保留不动； - 偏移前的位置保留不动即原来的位置还保留着，后面的元素覆盖不了前面没有偏移倩的位置。
- 相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由
- 固定定位（
position: fixed）- 与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身，即根据
left、top、right、bottom属性相对于浏览器视图移动，并且拖动滚动条时位置固定不变。
- 与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身，即根据
- 绝对定位（
relative和absolute属性的组合使用- 设置父元素为
position: relative，子元素为position: absolute，这样子元素就可以相对于父元素来进行参照定位了。
- 设置父元素为
注1：可以使用 *{margin:0; padding:0;} 把默认的外填充、内填充去掉。
三个案例
- 自动居中一列布局案例 --- 盒子模型的使用方法
- 浮动布局案例 --- float属性以及解决浮动影响的方法
- 绝对定位布局案例 --- 绝对定位实现横向两列或多列布局
前置知识点与盒子模型
W3C标准
由万维网联盟制定的一系列标准，包括：
- 结构化标准语言（HTML和XML）
- 表现标准语言（CSS）
- 行为标准语言（DOM和ECMAScript）
倡导结构、样式、行为分离
CSS中的3种定位机制
- 标准文档流（Normal flow）
- 浮动（Floats）
- 绝对定位（Absolute positioning）
标准文档流Normal flow
- 从上到下，从左到右，输出文档内容
- 由块级元素和行级元素组成
- 块级元素：
- 从左到右撑满页面，独占一行
- 触碰到页面边缘时，会自动换行
- 常见块级标签：div、ul、li、dl、dt、p ...
- 行级元素：
- 能在同一行内显示
- 不会改变HTML文档结构
- 常见行级标签：span、strong、em、img、input ...
- 块级元素和行级元素都是盒子模型
- 块级元素：
注：CSS盒模型的元素分类应是：块级元素（div/p/hx/form/ul/li）、内联元素（span/a/label/strong/em）、内联块级元素（img/input）
盒子模型
盒子模型由4部分组成：
- 边框（border）
- 外边距（margin），外余
- 内边距（padding），内衬
- 内容（content）
边框、内外边距都有四个方向，按顺时针（clockwise）依次为：上（top）、右（right）、下（bottom）、左（left）。
- 四个值：上、右、下、左
- 三个值：上、左右、下
- 两个值：上下、左右
- 一个值：四个方向
样式优先顺序、权值
相同权值的情况下
就近原则：
- 行内样式 > 内部样式 > 外部样式
- 也叫：内联式 > 嵌入式 > 外部式
- 但是 嵌入式 > 外部式 有一个前提，即嵌入式css样式的位置一定要在外部式的后面。
样式权值
| !important | 内联样式 Style attr | id选择器 | 类选择器class, pseudo class or attr | 元素 elements | 继承 inherit | 通配选择器 * |
|---|
oo | 1000 | 100 | 10 | 1 | 0.1 | 0
盒子3D模型
- 第一层：
border - 第二层：
content+padding - 第三层：
background-image - 第四层：
background-color - 第五层：
margin
盒子模型尺寸
盒子模型的尺寸 = 外边距 + 边框 + 内补 + 内容尺寸
自动居中一列布局
前置技能点
- 标准文档流
- 块级元素
- margin属性
设置一个自动居中包裹层
首先要给包裹层设置固定宽度，否则可能会占满屏宽或者没有居中的效果。
然后给包裹层设置 margin: 0 auto; ，使其居中。
<style>
* { margin: 0; padding: 0; }
#wrap {
50%;
margin: 0 auto;
}
#header,#mainbody,#footer { height: 100px; }
#header { background-color: #F00; }
#mainbody { background-color: #0F0; }
#footer { background-color: #00F; }
</style>
<div id="wrap">
<div id="header"></div>
<div id="mainbody"></div>
<div id="footer"></div>
</div>
注：如果又同时设置了 float 属性或者绝对定位属性（ position 为 absolute 或 fixed ），那么肯定就没有居中效果了。
横向多列布局
浮动布局及float属性
标准文档流中默认块级元素是从上到下依次纵向排列的。
而浮动布局就可以实现块级元素的横向布局了
float元素的三个值：left、right、none。- 设置了
float属性的元素脱离了标准文档流，但仍占据位置空间，会对周围的元素产生影响。 - 当元素没有设置宽度值，而又设置了浮动，那么元素的宽度随内容的变化而变化。
- 当元素设置浮动属性后，会对紧邻在后面的元素产生影响（如宽度等）。
清除浮动及常用方法
设置浮动会导致紧邻其后的元素被影响，有时甚至会影响布局，变成我们不是想要的样子。
这时候就需要对受到浮动影响的元素“清除浮动”。
clear属性 --- 为元素设置clear属性，常用clear: both;。而clear: left;和clear: right;也是可以的。- 固定宽度
width+overflow: hidden，将宽度设置为固定值比如100%等，并将溢出属性设置为隐藏。 - 空标签（如
<br />）无意义，不建议用来清除浮动；且清除的行高可能不同。
注意：
当父包含块没有设置浮动，而它内部的子元素设置了浮动，这种情况下父元素同样受到浮动的影响，子元素不再被父元素包裹了，它的高度不会扩展为子元素的最大高度。这时若要清除浮动，需要设置 overflow: hidden 来把浮动元素包裹起来。
用浮动属性实现横向两列布局
float属性 --- 使块级元素横向排列
margin属性 --- 设置两列之间的间距
<style type="text/css">
* { margin:0; padding:0; }
#wrap {
margin:0 auto;
background:#00F;
360px;
}
#header { background:#FAC; }
#mainbody { background:#ACF; overflow: hidden; }
#footer { background:#AFC; }
.left {
200px; height:100px;
background:#0AC;
float: left;
}
.right {
140px; height:150px;
background:#AC0;
float: left;
}
</style>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>
绝对定位布局
什么是绝对定位布局？
绝对定位布局是通过设置
position属性实现的。
除了能够实现横向多列布局及较为复杂的定位，如
- 带有遮罩层效果的提示框；
- 固定层效果（如固定的导航栏）；
- 全屏广告（也算是遮罩层效果）等。
position 属性有3种定位形式：
static--- 静态定位relative--- 相对定位absolute--- 绝对定位fixed--- 固定定位
其中 absolute 和 fixed 都属于绝对定位的形式。
相对定位
相对定位有如下特点：
- 相对定位是相对于自身原有位置进行偏移；
- 相对定位的元素仍处于标准文档流当中；
- 相对定位后即可以设置偏移属性（
left、top、right、bottom）以及z-index属性。 relative更稳定，且不脱离文档流，可以用作设置了absolute的元素的父包含块。
绝对定位
绝对定位有如下特点：
- 绝对定位是相对于其包含块为基准的定位；
- 绝对定位的元素完全脱离了标准文档流；
- 绝对定位后即可以设置偏移属性（
left、top、right、bottom）以及z-index属性； - 如果未设置固定宽度，则绝对定位的元素随内容宽度变化而变化。
未设置偏移量的情况：
- 无论是否有已定位的祖先元素，都保持在元素初始位置；
- 完全脱离了标准文档流。
设置了偏移量的情况：
- 无已定位的祖先元素，则以根元素
<html>为偏移参照基准（而非<body>）； - 有已定位的祖先元素，则以距其最近的已定位祖先元素为偏移参照基准。
用绝对定位实现横向两列布局
使用绝对定位实现横向两列布局的应用比较少；
一般常用于一列固定宽度，另一列宽度自适应的情况；
要点：
relative--- 父元素相对定位；absolute--- 自适应宽度元素绝对定位；- 由于绝对定位脱离文档流，需要 固定宽度列的高度 > 自适应宽度的列的高度。
<style type="text/css">
* { margin:0; padding:0; }
#wrap {
margin:0 auto;
background:#AAC;
360px;
}
#header {
background:#FAC;
height:50px
}
#mainbody {
background:#ACF;
position:relative;
margin-top:5px;
}
#footer { background:#AFC; }
#sidebar {
50px; height:200px;
background:#0AC;
}
#content {
300px; height:150px;
background:#AC0;
position: absolute;
left: 60px; top: 0px;
}
</style>
<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>
本文基于
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 发布，欢迎引用、转载或演绎，但是必须保留本文的署名 BlackStorm 以及本文链接 http://www.cnblogs.com/BlackStorm/p/7634899.html ，且未经许可不能用于商业目的。如有疑问或授权协商请 与我联系 。