[笔记] 慕课网 - HTML 和 CSS 基础

1 基础知识

1.1 元素分类

在讲解 CSS 布局之前,我们需要提前知道一些知识,在 CSS 中,html 中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

1.1.1 块状元素:

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

1.1.2 内联元素(行内元素):

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  1. 特点:

    1、和其他元素都在一行上;

    2、元素的高度、宽度及顶部和底部边距不可设置;

    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

1.1.3 内联块状元素:

<img>、<input>

  1. 特点:

    1、和其他元素都在一行上;

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

1.2 盒模型

box-mode.jpg

1.3 布局模型

CSS 包含 3 种基本的布局模型,用英文概括为:Flow、Layer 和 Float。

在网页中,元素有三种布局模型:

1.3.1 流动模型(Flow)

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为 100%.

在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

1.3.2 浮动模型 (Float)

关键词: float

1.3.3 层模型(Layer)

层模型有三种形式:相对于浏览器(body)

  1. 绝对定位 position: absolute

    使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

    如果不存在这样的包含块,则相对于 body 元素,即相对于浏览器窗口。

  2. 相对定位 position: relative

    相对于以前的位置移动,移动的方向和幅度由 left、right、top、bottom 属性确定,偏移前的位置保留不动。

  3. 固定定位 position: fixed

1.4 长度值

但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。

1.5 水平居中

1.5.1 定宽块状元素

通过设置“左右 margin”值为“auto”来实现居中的

1.5.2 不定宽块状元素

  1. 加入 table 标签

    第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

    第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

  2. 设置 display;inline 方法

    改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。

    存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

  3. 设置 position:relative 和 left:50%;

    通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

    这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

1.6 垂直居中

1.6.1 元素高度确定的单行文本

元素高度确定的单行文本 的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的

1.6.2 父元素高度确定的多行文本、图片、块状元素的竖直居中

  1. 方法一

    使用插入 table (包括 tbody、tr、td)标签,同时设置 vertical-align:middle。

  2. 方法二

    在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

1.7 隐性改变 display 类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素, display:none 除外)设置以下 2 个句之一:

Position : absolute
float : leftfloat:right

元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 widthheight 了且默认宽度不占满父元素。

2 网页布局基础

2.1 标准文档流

2.1.1 特点

从上到下,从左到右,输出文档内容。

由块级元素和行级元素组成。

块级元素和行级元素都是盒子模型

2.1.2 盒子模型

盒子模型=网页布局的基石

  1. 组成

    margin, border, padding, content

  2. 3D 模型

    box-mode-3d.jpg

  3. 盒子模型尺寸

    盒子模型尺寸 = 边框 + 外边距 + 内边距 + 盒子中的内容尺寸

2.2 自动居中一列布局

2.2.1 标准文档流

2.2.2 块级元素

2.2.3 margin 属性

auto 会根据浏览器的宽度自动的设置两边的外边距

原理: (浏览器的宽度-外包含层的宽度)/2 = 外边距

当设置 margin 属性为 auto 的时候, 不能再设置浮动或绝对定位属性

2.3 浮动布局

能够实现横向多列布局, 通过设置 float 属性实现

2.3.1 float

  1. 特点

    元素会左移,或右移,直至触碰到容器为止

  2. 注意
    • 设置了浮动的元素,仍旧处于标准文档流中
    • 当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。
    • 当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特制紧邻后面的元素。

2.3.2 清除浮动的常用方法

  1. clear 属性

    常用 clear:both;

    clear:left; 或者 clear:right

    当父包含块缩成一条时,用 clear:both 方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动。

  2. 同时设置 width:100%(或固定宽度)+overflow: hidden;
  3. 空标签

    空标签无意义,不建议使用此方法清除浮动

2.4 横向两列布局

主要应用

float : 使纵向排列的块级元素,横向排列

margin : 设置两列之间的间距

2.5 绝对定位布局

通过设置 position

2.5.1 position 属性

  1. 静态定位(static)
  2. 相对定位(relative)
    1. 特点

      相对于自身原有位置进行偏移

      仍处于标准文档流中

      随即拥有偏移属性和 z-index 属性

  3. 绝对定位(absolute, fixed)
    1. 特点

      建立了以包含块为基准的定位

      完全脱离了标准文档流

      随即拥有偏移属性和 z-index 属性

    2. 未设置偏移量
      1. 特点

        无论是否存在已定位祖先元素,都保持在元素初始位置

        脱离了标准文档流

    3. 设置偏移量
      1. 基准

        无已定位祖先元素, 以 <html> 为偏移参照基准

        有已定位祖先元素,以距其最近的已定位祖先元素为便宜参照基准

2.6 横向两列布局

2.6.1 方法

使用 absolute 实现横向两列布局 – 常用于一列固定宽度,另一列宽度自适应的情况

2.6.2 技能

relative : 父元素相对定位

absolute : 自适应宽度元素绝对定位

注意: 固定宽度列的高度 > 自适应宽度的列

3 如何用 CSS 进行网页布局

3.1 网页设计特点

  • 网页可以自适应宽度
  • 网页的长度理论上没有限制

3.2 一列布局

3.3 两列布局

常用固定长度

3.4 三列布局

中间自适应,两侧固定值 – 需要用绝对定位

3.5 混合布局

4 网页简单布局之结构与表现原则

先按结构和语义编写代码

然后进行 CSS 样式设置

减少 HTML 与 CSS 契合度

5 导航条菜单的制作

5.1 用无序列表构建菜单

5.2 垂直菜单

5.3 水平菜单

float: left

5.4 圆角菜单

  • 背景
  • a:hover

5.5 伸缩菜单

5.5.1 垂直

margin 可以用负值,向相反方向移动

5.5.2 水平

JavaScript 实现

遍历对象标签, 改变宽度

6 固定层效果

6.1 absolute 和 fixed

6.1.1 相同点

  • 完全脱离标准文档流
  • 未设置偏移量时,都定位在父元素的左上角

6.1.2 不同点

  1. 1 祖先元素
    1. absolute
      • 无已定位祖先元素,以 <html> 为基准偏移
      • 有已定位祖先元素,以距其最近的、已定位的祖先元素为基准偏移
    2. fixed
      • 有、无已定位祖先元素,都以浏览器可视窗口为基准偏移
  2. 表现形式(产生滚动条时)
    1. absolute

      位置会随滚动条变化

    2. fixed

      位置固定,不会随滚动条变化

      被他遮盖的元素,可以 从其下穿过

6.2 偏移量的设置

在对元素设置固定定位时,如果希望本元素包含其父包含块中,不需要对其设置偏移量

6.3 顶部固定层

#top – position: fixed; top: 0; left: 0;

#mainbody – margin-top:(#top 高度+原有间距)px

Date: <2016-03-06 Sun 22:06>

Author: cowlog

Created: 2016-03-23 Wed 21:30

Emacs 24.5.1 (Org mode 8.2.10)

Validate