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

漫漫从前,最初入坑前端时的学习笔记。那时候「慕课网」的多少个路子依旧免费的,也有好多少个跟网页布局有关的教程,其中有3个叫《网页布局基础》讲得很棒,那时候正好喜欢上
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. 块级元素都自上而下垂直分布,默许宽度都是百分之百占用一行;
    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)。

  • 四个值:上、右、下、左
  • 三个值:上、左右、下
  • 两个值:上下、左右
  • 2个值:三个趋势

体制优先顺序、权值

相同权值的气象下

不远处原则:

  • 行内样式 > 内部样式 > 外部体制
  • 也叫:内联式 > 嵌入式 > 外部式
  • 唯独 嵌入式 > 外部式
    有二个前提,即嵌入式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 — 自适应宽度成分相对定位;
  • 由于绝对定位脱离文档流,必要 从来宽度列的万丈 >
    自适应宽度的列的莫大

正文基于
图片 1知识共享署名-非商业性利用-相同方法共享
4.0 国际许可协议

发布,欢迎引用、转发或演绎,不过必须保留本文的签约
BlackStorm
以及本文链接 http://www.cnblogs.com/BlackStorm/p/7634899.html
,且未经许可不只怕用于商业目标。如有疑问或授权协商请
与自小编联系