【恢复】慕课网《网页布局基础》学习笔记

绵绵事先,最初入坑前端时的习笔记。那时候「慕课网」的几乎独途径还是免费之,也产生一些单同网页布局有关的科目,其中起一个深受《网页布局基础》叙得可怜硬,那时候正好喜欢上
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) — 默认
    1. 块级元素都于上使下直分布,默认宽度都是100%据为己有一行;
    2. 外联元素都以所处的包含元素中从左到右水平分布(但内联元素可能产生有浏览器默认的左右margin\[注1\],而从不上下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 属性或者绝对定位属性( position
absolutefixed ),那么必然就没有居中效果了。


横向多列布局

浮动布局和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 都属于绝对定位的款式。

对立固定

相对固定出如下特点:

  • 相对固化是对立于本身本来位置展开偏移;
  • 对立固化的元素比如处在标准文档流当中
  • 相对固化后即便好安装偏移属性( lefttopright
    bottom )以及 z-index 属性。
  • relative 更平稳,且未脱离文档流,可以当设置了 absolute
    的元素的父包含块。

决定位

断定位出如下特征:

  • 绝对定位是对立于其蕴含块呢规范的定点;
  • 断定位的素毕剥离了正规文档流
  • 切定位后即便可以装偏移属性( lefttopright
    bottom )以及 z-index 属性;
  • 若不安装一定宽度,则绝对定位的元素以内容宽度变化而转变

不设置偏移量的事态:

  • 管是否发生已经稳定的祖先元素,都保持在要素初始位置;
  • 一齐退出了规范文档流。

设置了偏移量的图景:

  • 随便已定位的先世元素,则以根元素 <html> 为偏移参照标准(而非
    <body> );
  • 来已经稳定的祖先元素,则因距该近来的都稳祖先元素呢偏移参照基准。

因而绝对定位实现横向两排布局

运用绝对化定位实现横向两排布局的行使比较少;
相似常用来一列稳宽度,另一样列宽度自适应之情状;

要点:

  • relative — 父元素相对稳定;
  • absolute — 自适应宽度元素绝对定位;
  • 鉴于绝对定位脱离文档流,需要 定点宽度列的万丈 >
    自适应宽度的排列的莫大

正文基于
ECMAScript 1知识共享署名-非商业性使用-相同方法共享
4.0 国际许可协议
发布,欢迎引用、转载或演绎,但是得保留本文的ECMAScript签署
BlackStorm
以及本文链接 http://www.cnblogs.com/BlackStorm/p/7634899.html
,且未经许可不克用来商业目的。如发问题或授权协商请
跟自身沟通 。