HTML + CSS 知识点总结

第一章

什么是HTML文件？

类似于txt、word文本记录文件
需要使用浏览器打开
展示文字和其他信息
使用标签实现对信息展示方式的加工

什么是HTML？

超文本标记语言：HyperText Markup Language
超文本：指页面内可以包含图片、视频、音频、程序等非文字元素
标记语言：实现信息的格式改变

HTML、CSS、JavaScript 之间的关系

HTML：组织内容和结构（布局）
CSS：对现有内容进行美化（样式）
JS：响应用户的交互（交互）

第二章 HTML概述

HTML标准的网页结构

<!DOCTYPE html> ------ 描述网页文档类型
<html> ------ 网页顶级元素，即根元素
    <head> ------ 网页头元信息，用户不可见部分，描述建站时间作者等内容
    </head>
    <body> ------ 网页的身体，用户可见部分
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>
</html>

HTML 元素

元素：由开始标签与结束标签包裹的部分 <xxx>..</xxx>

元素格式：

<标签 属性="值">
<body color="yellow">

标签类型

双标签：有头尾的标签 <xx>1234</xx>
单标签：只有头没有尾 <xx>或<xx />
属性：属性为HTML元素提供附加信息，属性总是以名称/值对的形式出现。
注释：使用 `` 可在HTML插入注释，也可作为<u>条件注释</u>或<u>程序识别标签</u>

头部元素

<head> -----  给搜索引擎识别的部分
 <meta name="author"> ----- 网页文档描述
 <title>标签名</title> ----- 浏览器标签页头名、收藏夹标题、搜索引擎结果标题
 <link rel="stylesheet" type="text/css" href="theme.css"> --- 引用外部CSS
 <base href="http://www.w3school.com.cn/i/" target="_blank" /> ----- 页面上的所有链接规定默认地址或默认目标
 <script type="text/javascript">document.write("Hello World!")</script> ----- 用于定义客户端脚本
 <style type="text/css">h1 {color:red}</style> ----- 定义级联样式表，规定在浏览器中如何呈现HTML文档
<style>..</style>  ----- 引入嵌入样式表
</head>

meta标签：用来提供有关页面的元信息说明、关键字、作者、语言字符集charset；其属性包括name属性和http-equiv属性。（content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的）
- name属性：用于描述网页，语法格式是<meta name="参数" content="具体的参数值">
  name的参数：Keywords(关键字) robots(机器人向导) description(网站内容描述) author(作者)
  - http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，语法格式是<meta http-equiv="参数" content="参数变量值">
    http-equivd的参数：Expires(到期时间) Pragma(缓存允许) Refresh(自动刷新并指向新页面) Set-Cookie(cookie设定) Window-target(强制独立页面显示) content-Type(设定页面使用的字符集)
link 标签：定义文档与外部资源的关系，如引用外部CSS
- rel=stylesheet的作用：rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的,而此次Stylesheet定义的是一个外部加载的样式表
- type="text/css"的作用：告诉浏览器，这段标签内包含的内容是css或text；如果不定义的话，有些CSS效果会被浏览器解释得不一样

元素的两种类型

块级元素 block-level：一个“层”“容器”或“盒子”，一个块级元素，将所要的东西打包在内，分小节方便自己查看（完整独占一行宽度），比如<div> <p> <h1> <ul>
内联元素 inline：包裹标记或隔离一段中的某些内容，一个文本容器，方便后续CSS美化，使其产生视觉上的变化（不会一新行开始，只占自身所需宽度大小），比如<span> <b> <a> <img>

div和span都是无任何属性的空元素，在整个HTML标记中没有任何作用，只应用于CSS样式

Style 样式

为元素增加指定style属性，一般把style样式写在head头部文件处以方便修改，有三种方法插入样式：

引入样式表 （推荐）
    <link rel="stylesheet" type="text/css" href="style.css">
嵌入样式表 （一般）
    <head>
        <style type="text/css">
            body{background-color:red;}
            p{margin-left:20px;}
        </style>
    </head>
内联样式表 （不推荐）
    <p style="color:green">

<style>..</style> 里的样式代码可以放到css里，运行效果相同

HTML 框架

框架：将浏览器划分成不同的部分，每部分加载不同的页面，实现同一浏览器中加载多个页面的效果
<frameset..></frameset>（放于body或head之外）

左右框尺寸cols 上下框尺寸rows 边框粗细border 显示边框控制frameborder 边框间距framespacing 拖动控制noresize
<frame..></frame>（放于frameset之中）

框架名name 框架页面来源src 拖动条显示控制scrolling 拖动控制noresize

frame通过src链接指定本地html文件或指定网站来加载页面
<iframe></iframe> 内联框架：在网页内固定一个区域显示另一个网页

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档

很难打印整张页面

<frame> <frameset> <noframes> 在HTML5中已被弃用

补充知识

Lorem 一个乱数假文生成器，尽管该短语毫无意义，但它却历史悠久。用以测试所用字体的粗细、设计及其他重要特点。

第三章 HTML样式

基本样式

标题 <h1..></h1> <h1 ~ h6>

h1 align="center"/"left"/"right"/"justify"
段落 <p..></p>

p align="center"/"left"/"right"/"justify"
换行 <br> <br /> <nobr>不拆行</nobr>
水平线 <hr> <hr />

hr size width color align noshade="noshade"
规定文字属性 ~~<font..></font>~~
color face size
特殊符号（字符实体Entities）
空格   < < > > & & ¥ ¥ × ×
主体 <body></body>

body ~~alink~~ ~~background~~ ~~bgcolor~~ ~~link~~ ~~text~~ ~~vlink~~ （不推荐对其直接使用样式）
总文档 <html></html>

html xmlns manifest

高级样式

超链接 <a href="url"></a>

打开方式target 锚名name 类型type 媒介media 下载download 字符集charset 坐标coords 链接语言hreflang 关系rel 被关系rev 发送邮件mailto 形状shape

通过锚name定位跳转到本页面的某个段落位置（相当于书签）：
```
<a href="#C1">第六章</a> ---- （点此）
  ...
<a name="C1">第六章</a> ---- （跳到此）
<p>本章讲解的内容是...</p>
```
图片 <img scr="url">
图片路径src 替换文本alt 对齐方式align 宽度width 高度height 边框粗细border 水平间距hspace 垂直间距vspace 服务器端图像位置映射ismap 客户器端图像可点映射usemap 图像长文档描述longdesc 配合<map><area></map>实现图片映射
表格 <table></table>
- 属性：
  
  背景色bgcolor width 边框粗细border bordercolorlight bordercolordark 格间距cellspacing 格边距cellpadding summary rules 围绕边框frame 背景图background 列组合colgroup
- 表格结构
  
  行块<tr></tr> 单元块<td></td> 表头块<th></th> 标题<caption></caption> 列属性<col></col> 页眉<thead></thead> 主体<tbody></tbody> 页脚<tfoot></tfoot> 合并跨行rowspan 对齐align
```
<table border="2"> 
      <tr> /* tr=row th=head td=date */
              <th>一班</th>
              <th>二班</th>
              <th>三班</th>
      </tr>
      <tr>
              <td>200</td>
              <td>300</td>
              <td>100</td>
      </tr>
      <tr>
              <td>亚军</td>
              <td>冠军</td>
              <td>季军</td>
      </tr>
</table>
```
显示如下：

一班二班三班

200 300 100

亚军冠军季军

一班	二班	三班
200	300	100
亚军	冠军	季军

列表

无序列表

tpye=实心方块square/实心圆disc/空心圆circle
```
<ul tpye="">
    <li>..</li>
    <li>..</li>
</ul>
```

有序列表

tpye="A/a/1/I/i" 起始值start 降序reversed

<ol tpye="A" start="3">
    <li>..</li>
    <li>..</li>
</ol>

特殊列表

<dl>    /* dl=definition-list dt=title dd=description */
    <dt>中国城市</dt>
    <dd>北京</dd><dd>上海</dd><dd>广州</dd>
    <dt>美国城市</dt>
    <dd>洛杉矶</dd><dd>纽约</dd><dd>华盛顿</dd>
</dl>

表单 <form..></form>

<body>
  <form action="接受表单内容的服务器地址" method="获取方式" enctype="编码方式" target="打开方式"> 
【账号】
  用户：<input type="text">
  密码：<input type="password">
【复选框】
  你喜欢的水果有？
  苹果<input type="checkbox">
  雪梨<input type="checkbox" checked(默认选中)>
  香蕉<input type="checkbox">
【单选框】（选项男和女放于sex组中才能从中选择）
  你的性别是？ 
  男<input type="radio" name="sex">
  女<input type="radio" name="sex">
【按钮】
  <input type="button" value="普通按钮">
  <input type="submit" value="提交按钮">
  <input type="reset" value="重置按钮">
  <button type="button">第二种实现按钮的方式</button>
【隐藏域】
  <input type="hidden" value="此信息会隐藏发送出去" name="hid">
【下拉列表】
  请选择你常用的网站？
  <select class="" name="区域组" multiple(加上此属性即可多选)>
      <option>百度</option>
      <option>谷歌</option>
      <option>腾讯</option>
      <option seleced>默认选择项</option>
  </select>
【文本域】（可放于form之外）
  <textarea rows="8" cols="80" name="gerenxinxi">请在此填写个人信息
  </textarea>
  </form>
</body>

获取方式：method="get"（将数据附在链接上发送）/ "post"（直接将数据附在表单主体中发送）

input的属性：

<input type="text" name="定义控件名" value="默认写入文字" placeholder="预期提示信息" size="输入框长度" maxlength="最大可输入字数">

button的作用：当<button>标签放到了<form>标签中（如username与password并存时）会触发提交功能，或者让JS给予反馈作用（如弹出展开内容），能放置文本或图像，单独存在时无实际作用。

文本格式化

文字修饰

<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <em>强调</em> <sup>上标</sup> <sub>下标</sub> <del>删除线</del> <ins>插入</ins> <small>缩小</small> <strong>加重强调</strong> ~~<big>扩大</big>~~
计算机输出标签

<code>代码</code> <samp>代码样本</samp> <kbd>键盘码</kbd> <var>变量</var> ~~<tt>等宽</tt>~~
- 预格式保留文本布局标记 <pre></pre>
  可以保留文本里的源代码，保持原有格式，如用于显示散文段落或者计算机程序语言
- 代码标记<code></code>
  
  用于突出某一小段代码，与pre区别是code是行内元素，pre是块级元素。
引用标签
- 地址标签 <address></address>
  
  定义文档或文章的作者/拥有者的联系信息，文本会呈现为斜体。
- 缩写标签 <abbr>
  
  专门为显示显示英文缩写准备的标签，当鼠标指在缩写文字上面时就会显示其全拼；原缩写标签<acronym>在html5中已被舍弃。
```
This is a <abbr title="HyperText Markup Language">HTML</abbr>.
```
- 文字方向标签 <bdo>
  
  带有dir="ltl"(从左往右)/"rtl"(从右往左)属性，会改变输出方向，镜面显示，如Here变成ereH
- 块引用
  
  长引用 <blockquote>：使文本上下添加换行，左侧添加缩进
  
  短引用 <q>：被包裹的文本会添加双引号
- 定义特殊术语 <dfn>定义</dfn>
- 著作标题 <cite>引文</cite>

物理字体与逻辑字体的区别：

我们知道字体有大小、颜色、斜、粗、下划线等等属性，称这些为字体的风格。这种风格分为指定字体“样式”的物理风格（如粗、斜、下划线）和指定文本“作用”的逻辑风格（如示例文字、缩小文字）；就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用；逻辑风格是W3C组织推荐使用的。

第四章 CSS样式

CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。
CSS语法：选择器名{属性名:属性值;}

image
CSS选择器：为了简化代码，使html元素快速改变样式，故把代码写到css里，无需存写在html中，通过link标签在头文件中引入映射文件
引入CSS的方法：嵌入式 内联式 外联式

选择器

.class 或 #id：类选择器 ID选择器
```
html中：
    <span id="three">333</span>
    <span class="three">333</span>
css中：
    #three{color:green;}
    .three{color:green;}
```
两种方法效果都一样，区别不大，只是命名规则上，id独一无二，常用以定义布局名，class用以定义散件的类名；
* ：所有的都改变
elem,elem：分组多选，使用逗号可选择多个元素统一更改
[attribute]：属性选择器，对拥有指定属性及属性值的元素来更改
x contextual：派生选择器，对指定元素的上下文检索并选择下一元素更改样式
- elem elem：后代选择器，可选择父元素下的所有层级的某个子元素更改
- elem>elem：子元素选择器，只对其直接子级元素进行更改，范围变小且对孙元素无效
- elem+elem：相邻兄弟选择器，只对所属父层级之下的同辈级进行改变
elem:pse-class：伪类选择器，用于向某些选择器添加特殊的效果
- a:hover：悬停选择器，当鼠标悬停在所指内容上时样式改变
- a:active：点击选择器，点击访问时链接所改变的样式
- a:link：未访问选择器，未点击访问时链接默认样式
- a:visited：已访问选择器，已点击访问过链接样式
- x:focus：焦点锁定，目标被选中后（获得焦点）锁定一个样式
- x:first-child：第一子元素选择器
- x:lang：向带有指定lang属性的元素添加样式
elem:pse-elem ：伪元素选择器，用于向某些选择器设置特殊效果
- x:first-line：首行选择器，用于向指定元素的首行文本设置特殊样式
- x:first-letter：首字母选择器，向指定元素的文本首个字母设置特殊样式
- x:before：可以在元素的内容前面插入新内容
- x:after：可以在元素的内容之后插入新内容

CSS 优先级和权重

全局优先级：id＞class＞html
css的优先级：最新最底下的部分会优先使用并覆盖之前的部分，即服从后者
html的优先级：link＜style标签＜style属性，即内＞外（越靠近越优先）
link映射css文件的优先级：同样服从后者
明确程度优先级：所属关系越明确，即子集越所多，优先级会更高
!important：特权最高级的破坏规则者，无视其他优先级，最优先更改，慎用
继承：父标签定义的样式会继承给子子孙孙

CSS 基本属性

字体属性 font
- 字体大小 font-size
  
  font-size:1em/40px/100%/smaller/larger/inherit;
  
  未设定字体的默认大小是 16 像素 (16px=1em)，推荐使用em
- 字体系列 font-family
  
  font-family:Microsoft YaHei/微软雅黑,serif,'New York';
  
  可单独规定也可按排序存在字体的优先级，如没微软雅黑，则会显示serif字体，引号表示字体名中带有空格使用要包含起来
- 字体粗细 font-weight
  
  font-weight:normal/bold/bolder/lighter/100~900;
- 字体风格 font-style
  
  font-style:normal/italic/oblique/inherit;
- 小型大写字母样式文本 font-variant
  
  font-variant:normal/small-caps/inherit;
背景属性 background
- 背景颜色 background-color
  
  background-color:red/#f60/rgb(255,0,0);
- 背景图片 background-image
  
  background-image:url(bg.jpg);
- 背景图片重复方式 background-repeat
  
  background-repeat:repeat/repeat-x/repeat-y/no-repeat;
- 背景定位 background-position
  
  background-position:center/left top/20px 80px/66% 33%;
  
  // 通过规定x与y的横纵位置来定位背景
- 背景固定 background-attachment
  
  background-attachment:fixed/scroll;
  
  // 固定背景图像，使其不随页面其余部分的滚动而移动
- 合并简写方式
  
  background:#ff6600 url(bg.jpg) no-repeat fixed 20px 80px;
文本属性
- 水平对齐方式 text-align
  
  text-align：left/center/right/justify;
- 首行缩进 text-indent
  
  text-indent:40px/inherit;
- 字符大小写转换 text-transform
  
  text-transform:none/uppercase/lowercase/capitalize;
- 首行缩进 text-indent
  
  text-indent:5em/-5em/20%;
- 文本下划线装饰 text-decoration
  
  text-decoration:none/underline/overline/line-through/blink;
- 文本颜色属性 color
  
  color:green/#ff6600/#f60/rgb(255,0,0)/rgba(255,0,0,0.6);
  
  // 颜色名十六进制简写 rgb值 rgba透明值
- 文本行高 line-height
  
  line-height:20px/50%;
- 字符间距
  
  letter-spacing:normal/10px/-8px/inherit;
  
  word-spacing:30px/-0.5em;
  
  一个是字母间隔（letter），另一个是单字/单词间隔（word），作用不同
- 文本书写方向 direction
  
  direction:ltr/rtl;
- 空白符处理 white-space
  
  white-space:pre/nowrap/pre-wrap/pre-line;
列表属性 list
- 标记类型 list-style-type
- 标记位置 list-style-position
- 图片标记 list-style-image
- 标记简写方式 list-style
表格属性
- 表标题位置 caption-side
  
  caption-side:bottom/top;
- 空表格隐藏 empty-cells
  
  empty-cells:hide/show;
- 表格布局宽度算法 table-layout
  
  table-layout:fixed/automatic;
  
  控制表格是否随表格中内容的增加而扩张

第五章盒子模型

image

CSS盒模型（box model）本质上是一个封装周围的HTML元素的盒子，它包括边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒模型基本属性

内边距、边框和外边距都是可选的，默认值是零

内边距 padding
- 可用值 10px 0.25em 2ex 20%，但不接受负值
- 单边内边距属性
  
  padding-top padding-right padding-bottom padding-left
- 内边距的百分比数值是相对于其父元素的width宽度来计算的
外边距 margin
- 接受任何长度单位、百分数值与负值
- 单边外边距属性
  
  margin-top margin-right margin-bottom margin-left
  
  另外，margin-left:20px; 等效于margin:auto auto auto 20px;

！注意！！！块元素的垂直外边距会发生合并，合并后会取最大值，详看相关文档！

※ 外边距合并说明

边框 border
- 边框风格 border-style
  
  border-style:none/solid/dashed/dotted/double/outset;
  
  单边边框 border-top-style border-right-style border-bottom-style border-left-style
- 边框宽度 border-width
  
  border-width:10px/thin/medium/thick;
  
  单边边框宽度 border-top-width border-right-width border-bottom-width border-left-width
  
  无边框：把样式设成border-style:none;，即可取消边框显示
- 边框颜色 border-color
  
  border-color:red;
  
  单边边框颜色 border-top-color border-right-color border-bottom-color border-left-color
  
  默认边框颜色为元素本身的前景色；若未声明边框颜色，它将与元素的文本颜色相同，若无文本则会继承父元素的文本颜色
  
  设置一个透明且占宽度的边框 border-color:transparent;
- 边框合并 border-collapse
  
  border-collapse:collapse;
- 边框轮廓 outline
  
  outline outline-color outline-style outline-width

盒模型定位

布局属性
- 定位方式 position
  
  开启相对定位relative 根据父元素（绝对）定位absolute 根据窗口固定定位fixed 没有定位static 继承inherit
- 离页面顶点距离 left right top bottom
- 层覆盖先后顺序（优先级）
  
  z-index:0 1
- 显示属性 display（可以内联块级转换）
  
  层不显示且不占位none 块级显示block 内联显示inline 具有宽高的行内块元素inline-block
- 显示效果visibility
  
  可见visible 隐藏并占位hidden
- 溢出处理 overflow（子元素大小超过父元素的大小）
  
  溢出可见visible 溢出隐藏hidden 强制滚动scroll 溢出自动按需滚动auto
- 浮动属性 float
  
  left right
- 清除浮动 clear
  
  none left right 清除影响最大的浮动both
- 透明度opacity:0~1; 使元素背景透明
  
  不支持IE8即以下浏览器，可使用filter:alpha(opacity=0~100);属性代替
  
  支持IE6，但IE Tester软件中无法测试（bug)
说明：
- 不同的浏览器对外边距（margin）有不同的默认值，故为适应不同浏览器，开始可使用*{margin:0;}来消除浏览器默认的外边距
- 所有元素都是矩形
box-sizing：限制边框的大小，不会使因内容的宽和高更改而改变
一般写box之前会添加一个*{box-sizing:border-box;}来先限定填写内容的位置大小，方便之后的更改，原始默认的content-box会覆盖掉，此时边框就不会随内容宽和高的增加而往外扩张
normalize.css：初始化元素样式的css文件，解决不同浏览器兼容问题的规范标准，统一规则。
max-width：定义一个最大宽度，只要设备超过这个极限都按此极限显示。
边距重叠：在网页中垂直方向的相邻外边距会发生重叠，即相邻垂直外边距会取最大值而不是取和；且子元素的外边距也会传递给相邻的父元素
内联元素的盒模型：不能设置width和height，可以设置内边距和边框，但垂直方向的内边距和边框不会影响页面布局，即会悬在上方；同时只支持水平外边距

浮动 float

文档流Normal flow：默认的一种排列方式（从上到下从左到右）即最底层的板块
脱离文档流：脱离之后，将不再在文档流中占据空间，而是处于浮动状态
float 浮动的特点：
- 使盒子块悬空起来，脱离文档流，不排队
- 原空间被后面的元素占用（相当于自行另起一个图层悬浮），即其他元素向上移
- 当其他元素也跟随前者浮动时，其将会跟着前者排队（左浮排在后，右浮排在前）
- 若浮动元素前者是一个未浮动元素（本身为块元素），则其不会超过前者
- 全部浮动，可实现横向排列
- 块元素浮动后宽度和高度都被内容撑开；内联元素浮动后自身会变成块元素
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，故有时可通过浮动来设置环绕图片效果

解决高度坍塌问题

在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高则父元素就多高；当子元素浮动脱离文档流后，此时会导致子元素无法撑起父元素的高度，父元素会坍塌失去高度，即底层没有了内容；跟着父元素之后的所有元素都会向上移动，将导致页面混乱，所有在开发中一定要避免出现高度坍塌的问题。

对于上诉问题，我们有两种解决方案：

可以将父元素高度写死，但写死后父元素将不能自动适应子元素，故此方法不推荐
开启BFC（对IE6无效）
设置zoom（IE6专用）
清除浮动

开启BDF

根据W3C标准，在页面中的元素都隐含一个默认关闭的属性叫BDF（Block Formatting Context），当开启BFC以后，元素将会具有如下的特性：

父元素的垂直外边距不会和子元素重叠

开启BFC的元素不会被浮动元素所覆盖

开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC：（无法直接开启，只能间接开启）

设置元素浮动（可以撑开，但是会失去宽度，且后元素会前移）

设置元素绝对定位（问题同上）

设置元素为inline-block（可以撑开，会失去宽度，但后元素不会前移）

将元素的overflow设置为一个非visible的值，如overflow:hidden;（副作用最小，推荐）

IE6中没有BFC，但具有另一个隐含属性hasLayout，该属性的作用和BFC类似，开启方式很多，但副作用最小的方式是添加 zoom:1;（即放大倍数）

清除浮动

由于受到盒子A浮动的影响，盒子B整体会向上移动，此时我们希望清除掉盒子A浮动对后元素产生的影响，故要使用clear属性，当清除浮动影响后，元素会回到盒子A浮动之前的位置。

清除浮动对后面元素方法与影响：
在浮动元素之后的div元素的样式中添加clear:both;（上边距设置会显示无效）

在浮动元素后面添加一个空的div元素，设置样式为clear:both;（但添加无意义结构会过于累赘）
通过after伪类向元素的最后添加一个空白块元素，然后清除浮动，既可解决margin-top和父元素失去高度的问题，又不会添加多余div（推荐使用）
.boxA:after{
    content:"";
    display:block;
    clear:both;
}
但由于IE6不支持after伪类，在后添加一个.boxA{zoom:1;}即可解决问题

定位

即将元素摆放到页面的指定任意位置

position:relative; 相对定位
- 开启相对定位：相对于元素在文档流中原来位置进行定位
- 若不设置偏移量，元素则不会发生变化
- 当开启元素定位（即非static值）时，可通过left right top bottom四个属性来设置元素的偏移量，一般只需要两个偏移量即可进行定位
- 相对定位元素并不会脱离文档流，依然占用原位置，只是灵魂出窍了
- 相对定位会使元素提升一个层级，会覆盖住文档流上的内容
- 相对定位不会改变元素本身性质，块依然是块，内联还是内联
position:absolute; 绝对定位
- 开启绝对定位，会使元素脱离文档流
- 若不设置偏移量，元素则不会发生变化
- 绝对定位相对于离它最近的祖先元素进行定位的，若所有的祖先元素都未开启定位，则叫相对于浏览器窗口进行定位（一般情况，开启元素绝对定位时都会同时开启父元素的相对定位）
- 绝对对定位也会使元素提升一个层级
- 绝对对定位会改变元素本身性质，内联会变成块，块元素的宽和高默认都被内容撑开
position:fixed; 固定定位
- 固定定位是一种特殊的绝对定位，大部分特点和绝对定位相同
- 不同点：
  - 永远相对于浏览器窗口进行定位
  - 会固定显示在浏览器窗口某个位置，不会随滚动条滚动
  - IE6不支持固定定位
z-index:1/2/3;元素层级
- 若元素全都开启了定位，则从结构上，最靠下的元素会盖住上面的元素
- 此时可通过z-index设置来提高层级数，越高越优先显示
- 只有开启定位的元素才能使用z-index，即对static无效
- 父元素的层级再高，也不会盖住子元素

盒模型特殊属性

使div内文字居中

.nav{
text-align: center;/div内文字水平居中/
line-height: 高度;/div内文字垂直居中/
}

第六章 Flex布局

image

弹性盒子（Flexible Box）：用来为盒装模型提供最大的灵活性，任一容器都可以指定为Flex布局。
flex布局：在父级标题下使用.box{display:flex;}或者 .box{display: inline-flex;}

注意，设为Flex布局以后，子元素（项目）的float、clear和vertical-align属性将失效。
flex容器（flex container）：即采用Flex布局的元素。它的所有子元素自动成为容器成员，称为Flex项目（flex item）

容器属性（整体）

flex-direction：决定主轴的方向，即项目的排列方向

row/row-reverse/column/column-reverse
flex-wrap：决定对应的换行方式

nowrap/wrap/wrap-reverse
flex-flow：flex-direction与flex-wrap的合并简写形式
justify-content：定义项目在主轴上的水平对齐方式

flex-start/flex-end/center/space-between/space-around
align-items：定义项目对应项目垂直对齐方式

flex-start/flex-end/center/baseline/stretch
align-content：定义多根轴线的对齐方式

flex-start/flex-end/center/stretch/space-between/space-around

项目属性（单独）

order：定义项目的排列顺序，即为单个项目定序号，序号越小越排前，默认值为0
flex-grow：定义项目的相对放大比例，即占据容器比例，默认值为0
flex-shrink：定义项目的相对缩小比例，默认值为1
flex-basis：定义在分配多余空间前，项目占句的主轴空间
flex：flex-grow、flex-shrink与flex-basis的合并简写形式
align-self：允许单个项目有与其他项目不一样的对齐方式，即某项目的垂直对齐方式（可覆盖align-items属性）

auto/flex-start/flex-end/center/baseline/stretch

第七章响应式布局

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

<meta name="viewport" content="width=device, initial-scale=1.0">
    <!--viewport视窗 宽度=设备宽度 初始1倍缩放-->
    
<link rel="stylesheet" href="common.css">

<link media="(orientation:landscape)and(min-width:500px)" rel="stylesheet" href="desktop.css">
当手机横向landscape或纵向portrait和屏幕小于

<link media="max-width:500px"rel="stylesheet" href="mobile.css">

媒体查询 Media query

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机

第八章 HTML5

HTML5 新增元素

新增语义布局结构

页眉<header> 导航<nav> 内容节<section> 侧边栏<aside> 页脚<footer> 地址<address> 时间<time> 文章<article> 细节<details> 细节标题<summary> 独立内容流<figure> 独立内容标题<figcaption> 主内容<main> 带记号文本<mark>

内容节<section>：通常由标题及其内容组成，不推荐没有标题内容使用，非普通容器，当容器需要直接定义样式或脚本行为时，直接用div即可，不要与article元素混淆，section模块更加独立；另外，也可以使用div布局或者table表格布局

时间<time>：显示时间模块，内部通常存在一个datetime属性表示显示时间的格式另一个pubdate属性可以定义发布日期

标题组<hgroup> ：当存在子标题（二级标题）时，将h1与h2放于hgroup中，方便管理
新增其他元素

视频流video 音频流audio 画布canvas embed progress meter time ruby rt rp wbr command datalist datagrid keygen output source menu
新增input元素的类型

email url number range Date Pickers
新增全局属性

内容可编辑contentEditable 全局可编辑designMode 隐藏内容hidden 拼写检测spellcheck TAB跳转焦点顺序tabindex

HTML5相对于HTML4的语法改变

DOCTYPE声明简化
指定字符编码代码简化

HTML5的布尔值

<input type="checkbox" checked>
<input type="checkbox" checked="">
<input type="checkbox" checked="checked">
          ------ 前三个可表示“true”真值
<input type="checkbox">
          ------ 默认不填则表示"false"假值

可省略引号

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,839评论 6赞 482
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,543评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 153,116评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,371评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,384评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,111评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,416评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,053评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,558评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,007评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,117评论 1赞 334
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,756评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,324评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,315评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,539评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,578评论 2赞 355
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,877评论 2赞 345