好久之前,最初入坑前端时的学习笔记。那时候「慕课网」的几个路径还是免费的,也有好几个跟网页布局有关的课程,其中有一个叫《网页布局基础》讲得很棒,那时候刚好喜欢上 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
属性确定,偏移前的位置保留不动;
- 偏移前的位置保留不动即原来的位置还保留着,后面的元素覆盖不了前面没有偏移倩的位置。
- 固定定位(
position: fixed
)
- 与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身,即根据
left
、 top
、 right
、 bottom
属性相对于浏览器视图移动,并且拖动滚动条时位置固定不变。
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样式的位置一定要在外部式的后面。
样式权值
盒子3D模型
- 第一层:
border
- 第二层:
content
+ padding
- 第三层:
background-image
- 第四层:
background-color
- 第五层:
margin
盒子模型尺寸
盒子模型的尺寸 = 外边距 + 边框 + 内补 + 内容尺寸
自动居中一列布局
前置技能点
设置一个自动居中包裹层
首先要给包裹层设置固定宽度,否则可能会占满屏宽或者没有居中的效果。
然后给包裹层设置 margin: 0 auto;
,使其居中。
<style>
* { margin: 0; padding: 0; }
#wrap {
width: 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"