手记

慕课网《网页布局基础》学习笔记

layout: "post"
title: "慕课网《网页布局基础》学习笔记"
date: "2016-06-19 13:46"
categories: [前端, HTML/CSS, CSS布局]
tags: [前端, html, css]


目录:
<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->

  • [网页基础布局]
    • [什么叫做布局?]
    • [什么是网页布局?]
    • [需要掌握的知识点]
    • [布局的类型]
    • [三个案例]
    • [前置知识点与盒子模型]
      • [W3C标准]
      • [CSS中的3种定位机制]
      • [标准文档流Normal flow]
      • [盒子模型]
      • [样式优先顺序、权值]
        • [相同权值的情况下]
        • [样式权值]
      • [盒子3D模型]
      • [盒子模型尺寸]
    • [自动居中一列布局]
      • [前置技能点]
      • [设置一个自动居中包裹层]
    • [横向多列布局]
      • [浮动布局及float属性]
      • [清除浮动及常用方法]
      • [用浮动属性实现横向两列布局]
    • [绝对定位布局]
      • [什么是绝对定位布局?]
      • [相对定位]
      • [绝对定位]
      • [用绝对定位实现横向两列布局]

<!-- /TOC -->


网页基础布局

慕课网web前端工程师计划学习CSS布局时,结合HTML+CSS基础课程中的CSS盒模型以及布局模型部分、如何用CSS进行网页布局课程的一些基础部分、网页布局基础课程的主要部分,所做的一些微小的笔记。

什么叫做布局?
  • 布局又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合。
  • 报刊、杂志、书籍装帧、产品样本、挂历、招贴画、唱片封套和网页页面等平面设计的各个领域。
什么是网页布局?

网页布局是网页制作的基础; div+css布局网页更是基础中的基础。

网页设计的特点:

  • 网页可以自适应宽度;
  • 网页的长度理论上可以无限延长。

分栏又称为分列,常见的布局分为:一列布局、两列布局、三列布局,甚至是混合布局。

需要掌握的知识点
  • 标准文档流
  • 盒子模型
  • float属性
  • position属性
布局的类型
  • 流式布局
  • 浮动布局
  • 绝对定位布局

亦即:

  • 流动模型(Flow) --- 默认
    1. 块级元素都自上而下垂直分布,默认宽度都是100%占据一行;
    2. 内联元素都在所处的包含元素中从左到右水平分布(但内联元素可能有一些浏览器默认的左右margin<sup>[注1]</sup>,而没有上下margin)。
  • 浮动模型(Float)
    1. 通过设置float属性为leftright来定义为浮动;
    2. 可以通过设置浮动,来让块状元素并排显示(同左、同右或一左一右等)
  • 层模型(Layer)
    1. 让html元素在网页中精确定位,就像PS中的图层一样。
    2. 层模型有三种形式:
      • 绝对定位(position: absolute
      • 将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位;
      • 如果不存在这样的包含块,则相对于<html>元素,即相对于浏览器窗口移动,而不是<body>元素。
      • 相对定位(position: relative
      • 相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由lefttoprightbottom属性确定,偏移前的位置保留不动
      • 偏移前的位置保留不动即原来的位置还保留着,后面的元素覆盖不了前面没有偏移倩的位置。
      • 固定定位(position: fixed
      • 与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身,即根据lefttoprightbottom属性相对于浏览器视图移动,并且拖动滚动条时位置固定不变。
    3. relativeabsolute属性的组合使用
      • 设置父元素为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 {
    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">
  <div id="header"></div>
  <div id="mainbody"></div>
  <div id="footer"></div>
</div>

注:如果又同时设置了float属性或者绝对定位属性(positionabsolutefixed),那么肯定就没有居中效果了。


横向多列布局

浮动布局及float属性

标准文档流中默认块级元素是从上到下依次纵向排列的。
而浮动布局就可以实现块级元素的横向布局了

  • float元素的三个值:leftrightnone
  • 设置了float属性的元素脱离了标准文档流,但仍占据位置空间,会对周围的元素产生影响
  • 当元素没有设置宽度值,而又设置了浮动,那么元素的宽度随内容的变化而变化。
  • 当元素设置浮动属性后,会对紧邻在后面的元素产生影响(如宽度等)。

清除浮动及常用方法

设置浮动会导致紧邻其后的元素被影响,有时甚至会影响布局,变成我们不是想要的样子。
这时候就需要对受到浮动影响的元素“清除浮动”

  1. clear属性 --- 为元素设置clear属性,常用clear: both;。而clear: left;clear: right;也是可以的。
  2. 固定宽度width+overflow: hidden,将宽度设置为固定值比如100%等,并将溢出属性设置为隐藏。
  3. 空标签(如<br />)无意义,不建议用来清除浮动;且清除的行高可能不同。

注意:
父包含块没有设置浮动,而它内部的子元素设置了浮动,这种情况下父元素同样受到浮动的影响,子元素不再被父元素包裹了它的高度不会扩展为子元素的最大高度。这时若要清除浮动,需要设置overflow: hidden来把浮动元素包裹起来。

用浮动属性实现横向两列布局

float属性 --- 使块级元素横向排列
margin属性 --- 设置两列之间的间距

<style type="text/css">
* { margin:0; padding:0; }
#wrap {
  margin:0 auto;
  background:#00F;
  width:360px;
}
#header   { background:#FAC; }
#mainbody { background:#ACF; overflow: hidden; }
#footer   { background:#AFC; }
.left {
  width:200px; height:100px;
  background:#0AC;
  float: left;
}
.right {
  width: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 --- 固定定位

其中absolutefixed都属于绝对定位的形式。

相对定位

相对定位有如下特点:

  • 相对定位是相对于自身原有位置进行偏移;
  • 相对定位的元素仍处于标准文档流当中
  • 相对定位后即可以设置偏移属性(lefttoprightbottom)以及z-index属性。
  • relative更稳定,且不脱离文档流,可以用作设置了absolute的元素的父包含块。

绝对定位

绝对定位有如下特点:

  • 绝对定位是相对于其包含块为基准的定位;
  • 绝对定位的元素完全脱离了标准文档流
  • 绝对定位后即可以设置偏移属性(lefttoprightbottom)以及z-index属性;
  • 如果未设置固定宽度,则绝对定位的元素随内容宽度变化而变化

未设置偏移量的情况:

  • 无论是否有已定位的祖先元素,都保持在元素初始位置;
  • 完全脱离了标准文档流。

设置了偏移量的情况:

  • 无已定位的祖先元素,则以根元素<html>为偏移参照基准(而非<body>);
  • 有已定位的祖先元素,则以距其最近的已定位祖先元素为偏移参照基准。

用绝对定位实现横向两列布局

使用绝对定位实现横向两列布局的应用比较少;
一般常用于一列固定宽度,另一列宽度自适应的情况;

要点:

  • relative --- 父元素相对定位;
  • absolute --- 自适应宽度元素绝对定位;
  • 由于绝对定位脱离文档流,需要 固定宽度列的高度 > 自适应宽度的列的高度
<style type="text/css">
* { margin:0; padding:0; }
#wrap {
  margin:0 auto;
  background:#AAC;
  width:360px;
}
#header {
  background:#FAC;
  height:50px
}
#mainbody {
  background:#ACF;
  position:relative;
  margin-top:5px;
}
#footer { background:#AFC; }
#sidebar {
  width:50px; height:200px;
  background:#0AC;
}
#content {
  width: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>
24人推荐
随时随地看视频
慕课网APP

热门评论

这个视频怎么下架了?我记得老师讲的很好


整理得很好!值得学习学习!

讲的很详细,赞一个,面试宝典啊

查看全部评论