HTML学习笔记（完）

概述

在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时，所整理的笔记。
笔记内容为根据个人需求所整理，并不完善，仅供参考。
于2018.05.16 23时学习完全部课程。

1. WebStorm设置&快捷键

1.1 WebStorm设置

代码区背景色改成黑色

File —— Setting —— Editor —— Colors&Fonts —— Scheme，选择“Darcula”
改字体大小

File —— Setting —— Editor —— Colors&Fonts —— Fonts
文档内容自动换行

File —— Setting —— Editor —— General —— Soft Wraps，勾选“Use soft wraps in editor”

1.2 WebStorm快捷键

新建HTML文件：Ctrl + Alt + Insert
快速将光标移至行首/行末：Home/End
光标在多行中闪烁（可同时输入相同的内容）：按住Alt不放, 然后再按住左键不放, 拖动鼠标即可
快速复制光标所在行所有内容：Ctrl + D
快速删除表表所在行所有内容：Ctrl + X
自动在一段内容的前后加上标签：Ctrl + Alt + T，回车，然后输入对应的标签即可
快速注释：Ctrl + /，要取消注释则再按一下Ctrl + /

1.3 快捷编辑

快速生成无序列表：ul>li*数字，即可快速生成一个有“数字”项的无序列表，“数字为1时可省略。

2. 字符集

<html>
    <head>
        <meta charset=“UTF-8” />
    </head>
    <body>
        ......
    </body>
</html>

常用字符集：

GBK
UTF-8

注意：

在HTML文件中指定的字符集必须和保存这个文件的字符集一致，否则还是会出现乱码。
所以仅仅指定字符集不一定能解决乱码问题，还需要保存文件的时候，文件的保存格式必须和指定的字符集一致才能保证没有乱码。

3. DTD文档声明

在HTML文件第一行告诉浏览器，当前网页用的是哪个版本的HTML规范来编写的。

HTML5:

<!DOCTYPE html>

该声明是向下兼容的，即兼容HTML和XHTML。

4. 标签

4.1 img标签

作用

插入图片

代码

<img src="图片路径">

属性

width：宽度

height：高度
- 如果只指定了width/height，系统会自动根据宽高比调整height/width

title：鼠标悬停时显示的内容

alt：图片挂掉后显示的内容

4.2 br标签

作用

换行

代码

<br>

注意：

尽量别用，用p标签代替。

4.3 a标签

作用

超链接

代码

<a href=“目标地址”>要显示的内容（可以是文字也可以是图片）</ a>

属性

target
- _self：在当前页打开链接，是默认属性
- _blank：在新标签页打开链接
title
- 鼠标悬停时显示的内容

4.4 base标签

作用

统一当前网页所有超链接的打开方式（当前页跳转/新窗口打开）

代码

<head>
<base target=“_blank/_self”>
</head>

注意
如果base标签和a标签都指定了网页打开方式，则以a标签指定的方式打开。

4.5 假链接

也就是空链接，没有具体指向

代码

#：点击后会自动返回网页顶部，具有“回到顶部”的作用
javascript:：不会自动返回网页顶部

4.6 锚点

操作

给目标位置标签添加id属性
给a标签的href属性添加对应的#id

注意

利用a标签做锚点是没有过度动画的。
利用a标签做锚点不仅可以跳转到当前页面的指定位置，还可以跳转到其他页面的指定位置。方法：href属性为指定页面#id。

4.7 列表

无序列表（用得最多）

格式

<ul>
    <li>列表条目内容</li>
</ul>

应用场景

新闻列表
商品列表
导航条

注意
ul标签里面只放li标签，但是li标签里面还可以放其他标签

有序列表（用得最少，不建议用）

格式

<ol>
    <li>列表条目内容</li>
</ol>

应用场景

新闻列表
商品列表
导航条

注意
ol标签里面只放li标签，但是li标签里面还可以放其他标签

定义列表

格式

<dl>
    <dt>标题</dt>
    <dd>标题对应的描述</dd>
</dl>

应用场景

网站底部相关信息
图文混排

注意

dl标签中只放dt和dd
建议一个dt只对应一个dd，当需要丰富界面时，可以在dt和dd标签中添加其他标签。

4.8 表格标签table

格式

<table>
    <tr>
        <td></td>
    </tr>
</table>

table标签代表表格整体
tr标签代表表格的行
td标签表示表格中的单元格

属性

边框（border）：默认为0
宽度（width）和高度（height）：可以给table标签和td标签使用
- 给table标签用意味着设定了整个表格的宽高
- 如果table标签设置了宽高，td标签再设置宽高时，不影响整个表格设置的宽高
水平对齐（align）和垂直对齐（valign）：水平对齐都可以使用、垂直对齐只能给tr标签和td标签使用
外边距（cellspacing）和内边距（cellpadding）：只能给table标签使用
- 外边距默认为2像素
- 内边距默认为1像素

细线表格

给table标签设置bgcolor
给tr标签设置bgcolor
给table标签设置cellspacing="1px"

表格标签的其他标签

表格标题标签：caption

caption一定要写在table标签中，并紧跟在table标签后面，否则无效

标题单元格标签：th

定义当前单元格为表格标题栏，标签中的内容会自动居中&加粗

单元格合并

给td标签添加单元格合并属性

水平方向单元格合并：colspan
垂直方向单元格合并：rowspan

4.9 表单标签form

表单就是专门用来收集用户信息的

格式

<form>
    <表单元素>
</form>

常见表单元素：

input标签

输入标签，重点是type属性。

type属性值说明：

text：明文输入框，配合value可以设置默认值
password：暗文输入框，配合value可以设置默认值
radio：单选框
注意：
- 要实现单选效果，必须给同类别的单选框都添加一个相同值得name属性
- 要实现默认选中某个单选框，需要添加checked属性，并赋值“checked”
- checked属性可以不赋值实现相同的效果，但企业开发中一般推荐赋值
checkbox：复选框
button：普通按钮，配合value可以设置按钮上的文字。
image：图片按钮，配合src加载图片，实现图片按钮功能。
reset：重置按钮，用于情况表单中已经填写好的数据。默认按钮上显示“重置”，可以配合value更改默认文字。
submit：提交按钮，将表单中填写好的数据到远程服务器。要实现以上功能要具备两个条件：
- 给form标签添加action属性，通过这个属性指定远程服务器的地址。
- 给需要提交到服务器的表单元素添加一个name属性
hidden：隐藏域，配合提交按钮将一些数据默默的提交到服务器。需要学习Ajax

label标签

把文字和输入框关联起来

格式

给文字添加label标签
给input添加id属性
在label标签中用for属性将其与input中的id绑定

注意
也可以直接给文字&输入框添加label标签，但是不推荐。

datalist标签

格式

<datalist>
    <option>待选项内容</option>
</datalist>

绑定

给datalist标签设置id
给input标签添加list属性并赋上需绑定的datalist标签的id值

注意
不推荐使用，因为多数浏览器不支持。

除了按钮类型的input标签以外，其他类型的标签都可以通过value属性来指定将来提交到服务器的值

非input标签

select标签

下拉列表

格式
格式一

<select>
    <option>列表数据</option>
</select>

格式二

<select>
    <optgroup label=“分组名称”>
        <option>列表数据</option>
    </optgroup>
</select>

注意

不能输入内容
可以用selected属性设置默认选项
可以给option标签外包裹一个optgroup标签，并在label属性中设置值来给下拉列表中的数据分类

textarea标签

定义一个多行的输入框

格式
<textarea></textarea>

注意

默认情况下可以无限换行
默认情况下有自己的宽度和高度，可以通过cols和rows属性来调整列数和行数，但是依然可以无限往下输内容
默认情况下输入框是可以手动拉伸调整的

4.10 video标签

格式一
<video src=“资源路径”></video>

格式二

<video>
    <source src=“webm格式文件路径” type=“video/webm”></source>
    <source src=“mp4格式文件路径” type=“video/mp4”></source>
    <source src=“ogg格式文件路径” type=“video/ogg”></source>
</video>

属性

autoplay：自动播放属性
controls：控制条属性
poster：视频封面
loop：循环播放，一般用于广告视频
preload：预加载视频，preload属性和autoplay属性向冲
muted：静音
width：宽度
height：高度

注意

video只支持三种格式：webm、mp4、ogg
各浏览器支持的视频格式不同，因此建议用格式二来解决浏览器不支持的问题。采用格式二，浏览器会依次尝试，直到播放可以支持的格式。
一些不支持html5标签的（老版本）浏览器，可以通过一个叫html5media的JS框架来实现支持video标签

4.11 audio标签

格式一
<audio src=“资源路径”></audio>

格式二

<audio>
    <source src=“wav格式文件路径” type=“audio/wav”></source>
    <source src=“mp3格式文件路径” type=“audio/mp3”></source>
    <source src=“ogg格式文件路径” type=“audio/ogg”></source>
</audio>

属性

autoplay：自动播放属性
controls：控制条属性
loop：循环播放，一般用于广告视频
preload：预加载视频，preload属性和autoplay属性向冲
muted：静音

4.12 详情和概要标签

格式

<details>
    <summary>概要信息</summary>
    详情信息
</details>

4.13 marquee标签（滚动条&公告栏）

格式
<marquee>滚动内容</marquee>

属性

direction：滚动方向，默认从右到左。left、right、up、down
scrollamount：移动速度
loop：滚动次数
behavior：
- slide：滚动到边界就停止
- alternate：滚动到边界就弹回

注意
marquee标签不是W3C推荐的，但是各大浏览器对其支持特别好

4.14 更多标签

strong标签：定义重要性强调的文字，相当于以前的b标签，加粗效果
ins标签：定义插入的文字，相当于以前的u标签，下划线效果
em标签：定义强调的文字，相当于以前的i标签，倾斜效果
del标签：定义被删除的文字，相当于以前的s标签，删除线效果

4.15 字符实体

&nbsp：空格
&lt：小于号 <
&gt：大于号 >
&copy：版权符号©

4.16 div和span标签

div作用：一般用于配合CSS完成网站基本布局

span作用：一般用于配合CSS修改网页中的一些局部信息

div和span的区别

div会单独占领一行，而span不会单独占领一行
div是一个容器级的标签，而span是一个文本级的标签

容器级的标签和文本级的标签的区别

容器级的标签中可以嵌套其他所有的标签
文本级的标签中只能嵌套文字/超链接/图片

5. CSS

格式

<style type="text/css">
    标签名称{
        属性名称：属性对应的值;
        ......
    }
</style>

5.1 文字属性

样式属性

font-style
- 正常：normal，默认值
- 倾斜：italce

粗细属性

font-weight
- 单词取值：
  - 加粗：bold
  - 比加粗更粗：bolder
  - 细线：lighter，默认值
- 数值取值：100~900之间整百的数值

大小属性

font-size

注意点：后面一定要带单位px。

字体属性

font-family

注意点：取值是中文时，需要用""或''将字体名称括起来。

知识点：
- 可以给字体设置备选方案
  
  格式：font-family："字体1","备选字体1",...;
- 如何分别给网页内的中英文设置不同的字体
  
  格式：font-family："英文字体","中文字体";
网页开发中常见的字体：
- 中文：宋体、黑体、微软雅黑
- 英文：Arial、Times New Roman

文字属性的缩写

格式

font:style weight size family;

注意

style和weigh属性可以省略，size和family属性不可以省略
style和weigh属性可以互换位置，size和family属性不可以互换位置，且必须写在所有属性的最后

文字阴影

格式：

text-shadow:水平偏移垂直偏移模糊度阴影颜色;

注意点：

可以简写为text-shadow:水平偏移垂直偏移模糊度;。
默认情况下阴影的颜色和盒子内容的颜色一致。

5.2 文本属性

装饰属性

text-decoration
- 下划线：underline
- 删除线：line-through
- 上划线：overline
- 无装饰：none，常见于去掉超链接的下划线

水平对齐属性

text-align
- 居中：center
- 左对齐：left
- 右对齐：right

缩进属性

text-indent
- 缩进两个字符：2em，em是一个文字宽度的单位

5.3 颜色属性

格式：color：值;

取值

英文单词
RGB：rgb(0_255,0255,0~255);
RGBA：rgba(0_255,0255,0_255,01);

a代表透明度（0~1）：值越小越透明
十六进制：#FFEE00;
十六进制缩写：#FE0;

5.4 CSS选择器

标签选择器

作用：根据指定的标签名称，选择当前页面中所有指定的标签，然后设置属性。

格式：

标签名称{
    属性：值;
    ...
}

注意点

标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签。
标签选择器无论标签藏得多深都能选中。
只要是HTML中的标签就可以作为标签选择器（h/a/img/ul/ol/dl/input...）。

id选择器

作用：根据指定的id名称找到对应的标签，然后设置属性。

格式：

#id名称{
    属性：值;
    ...
}

注意点

每个HTML标签都有一个属性叫做id
在同一个界面中id的名称不可重复
在编写id选择器时一定要在id名称前面加上#
id的名称只能由字母、数字、下划线组成，名称不能以数字开头，不能喝HTML标签重名。
网站开发中一般不用id选择器，因为id是留给JS使用的。

类（class）选择器

作用：根据指定的类名称找到对应的标签，然后设置属性。

格式

.类名称{
    属性：值;
    ...
}

注意点

每个HTML标签都有一个class属性。
每个页面中的class名称可以重复。
在编写class选择器时一定要在名称前面加上.
命名规范和id选择器的命名规范一样。
类名就是专门用来给某个特定的标签设置样式的。
在HTML中每个标签可以同时绑定多个类名。

格式：<标签名称 class="类名1 类名2 ..."

后代选择器

作用：找到指定标签的所有后代标签，设置属性。

格式

标签名称1 标签名称2{
    属性：值;
}

注意点

后代选择器必须用空格隔开
后代不仅仅是儿子，也包括孙子、重孙等等。
后代选择器不仅仅可以使用标签，可以使用其他选择器。
后代选择器可以无限延伸下去。

子元素选择器

作用：找到指定标签中所有特定的直接子元素，然后设置属性。

格式

标签名称1>标签名称2{
    属性：值;
}

注意点

子元素选择器只会查找儿子，不会查找其他被嵌套的标签
子元素选择器之间要用>符号链接，并且不能有空格
子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
子元素选择器可以通过>符号一直延续查找下去

交集选择器

作用：给所有选择器选中的标签中，相交的那部分标签设置属性

格式

选择器1选择器2{
    属性：值;
}

注意点

选择器和选择器之间没有任何的连接符号
选择器可以使用标签名称/id名称/class名称
一般不推荐使用

并集选择器

作用：给所有选择器选中的标签设置属性

格式

选择器1,选择器2{
    属性：值;
}

注意点

选择器之间用,链接
选择器可以使用标签名称/id名称/class名称

兄弟选择器

相邻兄弟选择器

作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

选择器1+选择器2{
    属性:值;
}

注意点

相邻兄弟选择器必须通过+连接
相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签。

通用兄弟选择器

作用：给指定选择器后面的所有选择器选中的所有标签设置属性

选择器1~选择器2{
    属性:值;
}

注意点

通用兄弟选择器必须用~连接
通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中。

序选择器

用法

同级别的第几个
- 标签:first-child 选中同级别中的第一个标签
- 标签:last-child 选中同级别中的最后一个标签
- 标签:nth-child(n) 选中同级别中的第n个标签
- 标签:nth-last-child(n) 选中同级别中的倒数第n个标签
- 标签:only-child 选中父元素中唯一的一个标签
同类型的第几个
- 标签:first-of-type 选中同级别中同类型中的第一个标签
- 标签:last-of-type 选中同级别中同类型中的最后一个标签
- 标签:nth-of-type(n) 选中同级别中同类型中的第n个标签
- 标签:nth-last-of-type(n) 选中同级别中同类型中的倒数第n个标签
- 标签:only-of-type 唯一类型的某个标签

关于n的其他用法

n=odd 选中奇数
n=even 选中偶数
xn+y x.y是用户自定义的数字；n是计数器，从0开始递增

属性选择器

作用：根据指定的属性名称找到对应的标签，然后设置属性

用法

标签[attribute]
标签[attribute=value]：最常用于区分input属性
~~标签[attribute|=value]：同下~~

标签[attribute^=value]：属性的取值是否以什么开头
标签[attribute$=value]：属性的取值是否以什么结尾
~~标签[attribute~=value]：同下~~

标签[attribute*=value]：取值是否包含某个特定的值

通配符选择器

作用：给当前页面所有标签设置属性

用法

*{
    属性:值;
}

注意点：因选择了当前页面所有标签，所以当页面标签多时，性能就会降低，所以不推荐使用。

<a name="wys">伪元素选择器</a>

作用：

给指定标签的内容前面或后面添加一个子元素

格式：

选择器名称::before{
    /*指定添加的子元素中存储的内容*/
    content:"内容";
    /*指定添加的子元素的宽高*/
    width:值;
    height:值;
    /*指定添加的子元素的显示模式*/
    display:值;
    /*隐藏添加的子元素*/
    visibility:值;
}

选择器名称::after{
    /*指定添加的子元素中存储的内容*/
    content:"内容";
    /*指定添加的子元素的宽高*/
    width:值;
    height:值;
    /*指定添加的子元素的显示模式*/
    display:值;
    /*隐藏添加的子元素*/
    visibility:值;
}

a标签的伪类选择器

a标签的伪类选择器是专门用来修改a标签不同状态下的样式的。

a标签的状态：

默认状态，从未被访问过，蓝色+下划线
被访问过状态，紫色+下划线
鼠标长按状态，红色+下划线
鼠标悬停时状态

格式：

/*修改从未被放过状态下的样式*/
:link{
    属性:值;
}

/*修改被访问过状态下的样式*/
:visited{
    属性:值;
}

/*修改鼠标悬停状态下的样式*/
:hover{
    属性:值;
}

/*修改鼠标长按状态下的样式*/
:active{
    属性:值;
}

注意点：

a标签的伪类选择器可以单独出现，也可以一起出现
a标签的伪类选择器如果一起出现，那么有严格的顺序要求。编写的顺序必须要按照link visited hover active的顺序编写，即爱恨原则（love&hate）。
如果默认状态的样式和被访问过状态的样式一样，那么可以缩写——写到标签选择器中。
在企业开发中编写a标签的伪类选择器最好都写在标签选择器的后面
在企业开发中和a标签盒子相关的属性（限时模式、宽高、padding、margin等）都写在标签选择器中
在企业开发中和a标签文字、背景相关的属性都写在伪类选择器中

5.5 CSS大三特性

继承性

作用

给父元素设置一些属性，子元素也可以使用。

注意点

并不是所有的属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
继承性中的特殊性
- a标签的文字颜色和下划线是不能继承的
- h标签的文字大小是不能继承的

应用场景

一般用于设置网页上的一些共性信息，例如网页的文字颜色、字体、文字大小内容，一般为body{}

层叠性

作用

层叠性就是CSS处理冲突的能力。

注意点

层叠性只有在多个选择器选中“同一个标签”，然后又设置了“相同的属性”，才会发生层叠性。

优先级

作用

当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。

优先级判断的三种方式

是否直接选中（简介选中就是指继承）

如果是间接选中，那么就是谁离目标标签近就听谁的。
是否是相同选择器

如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面听谁的。
不同选择器

如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠。

id>类>标签>通配符>继承>浏览器默认

!important

作用

用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高。

用法

在属性: 值;的值后面;前面添加!important。

注意点

important只能用于直接选中，不能用于间接选中。
通配符选择器选中的标签也是直接选中。
!important只能提升被指定的属性的优先级，其他的属性的优先级不会被提升。
!important必须写在属性值的分号前面。
!important前面的感叹号不能省略。

权重问题

作用

当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高

权重规则

首先计算选择器中有多少个id，id多的选择器优先级最高
如果id个数一样，那么再看类名的个数，类名个数多的优先级最高
如果类名的个数一样，那么再看标签名称的个数，标签名称个数多的优先级最高
如果id个数一样，类名个数一样，标签名称个数也一样，那么就不会继续往下计算了，那么此时谁在写后面听谁的；也就是说优先级如果一样，那么谁写在后面听谁的。

注意点

只有选择器是直接选中标签的才需要计算权重

5.6 CSS元素的显示模式

在HTML中HTML将所有的标签分为两类，分别是容器级和文本级；

在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素。

块级元素=容器级标签+p标签

行内元素=文本级标签-p标签

块级元素和行内元素的区别

块级元素会独占一行，行内元素不会独占一行
块级元素：如果没有设置宽度，那么默认和父元素一样宽；如果设置了宽高那么就按照设置的来显示。

行内元素：如果没有设置宽度，那么默认和内容一样宽；行内元素是不可以设置宽度和高度的。

行内块级元素：能够让元素既能够不独占一行，又可以设置宽度和高度。

5.7 CSS元素显示模式转换

块级元素、行内元素、行内块级元素三者之间可以相互转换

方法：

设置元素的display属性

block 转换为块级元素

inline 转换为行内元素

inline-block 转换为行内块级元素

5.8 CSS背景和精灵图

背景颜色

用法：background-color: 值;

取值：

英文单词
RGB：rgb(0_255,0255,0~255);
RGBA：rgba(0_255,0255,0_255,01);

a代表透明度（0~1）：值越小越透明
十六进制：#FFEE00;
十六进制缩写：#FE0;

背景图片

用法：background-image:url();

注意点：

在括号内填写图片地址，地址可以是本地地址，也可以是网络地址。
如果图片大小比标签的大小小，图片会自动在水平和垂直方向填满标签。

背景平铺属性

用法：background-repeat: 值；

取值

repeat：默认，在水平和垂直方向平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺

应用场景

可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度。

背景定位

用法：background-position: 水平值垂直值;

取值

具体方位名词
- 水平值：left center right
- 垂直值：top center bottom
具体像素

注意点：填写像素时一定要写单位px

背景关联

作用：默认情况下背景图片会随着滚动条滚动而滚出界面，修改背景图片和滚动条的关联方式可以实现背景图片不跟随滚动条的效果。

用法：background-attachment:值;

取值

scroll：默认，背景图片跟随滚动条滚动。
fixed：背景图片不跟随滚动条滚动。

背景缩写

用法：background:背景颜色背景图片平铺方式关联方式定位方式;

注意点

任何一个都可以省略

CSS精灵图

作用：可以减少请求的次数，降低服务器的处理压力，需要配合背景图片和背景定位来实现。

5.9 盒模型

边框属性

用法：

连写
- 同时设置四条边框
  
  border:边框的宽度边框的样式边框的颜色;
- 分别设置四条边框
  
  border-top:边框的宽度边框的样式边框的颜色;
  
  border-bottom:边框的宽度边框的样式边框的颜色;
  
  border-left:边框的宽度边框的样式边框的颜色;
  
  border-right:边框的宽度边框的样式边框的颜色;
- 分别设置四条边框
  
  border-width：上右下左
  
  border-style：上右下左
  
  border-color：上右下左
  
  注意点：取值省略时的规律
  
  上右下左→上右下：左边=右边
  
  上右下左→上右：左边=右边、下边=上边
  
  上右下左→上：右下左边=上边
不连写

border-top-width：设置上边框的宽度

border-top-style：设置上边框的样式

border-top-color：设置上边框的颜色

border-right-width：设置右边框的宽度

border-right-style：设置右边框的样式

border-right-color：设置右边框的颜色

border-bottom-width：设置下边框的宽度

border-bottom-style：设置下边框的样式

border-bottom-color：设置下边框的颜色

border-left-width：设置左边框的宽度

border-left-style：设置左边框的样式

border-left-color：设置左边框的颜色

取值

边框样式
- solid：实线
- dashed：虚线

内边距

边框和内容的距离就是内边距

格式

非连写

padding-top: 值;
padding-right: 值;
padding-bottom: 值;
padding-left: 值;

连写

padding:上右下左

注意点：取值省略时的规律

上右下左→上右下：左边=右边

上右下左→上右：左边=右边、下边=上边

上右下左→上：右下左边=上边

注意点

给标签设置内边距之后，标签占有的宽度和高度会发生变化。
内边距也会有背景颜色。

外边距

标签和标签之间的距离就是外边距

格式

非连写

margin-top: 值;
margin-right: 值;
margin-bottom: 值;
margin-left: 值;

连写

margin:上右下左

注意点：取值省略时的规律

上右下左→上右下：左边=右边

上右下左→上右：左边=右边、下边=上边

上右下左→上：右下左边=上边

注意点

外边距是没有背景颜色的。
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的。

W3C-CSS 外边距合并

image
在嵌套的盒子中margin:0 auto可以是使盒子自动水平居中，但是无法垂直居中。

盒子模型

HTML中所有的标签都可以设置：

宽度/高度：指定可以存放内容的区域
内边距：填充物
边框：盒子的边框
外边距：盒子和盒子之间的间隙

盒子的宽度和高度

内容的宽度和高度

就是通过标签的width和height属性设置的宽度和高度
元素的宽度和高度

宽度=左边框+左内边距+width+右内边距+右边框

高度同理
元素空间的宽度和高度

宽度=左外边距+左边框+左内边距+width+右内边距+右边框+右外边距

高度同理

盒子box-sizing属性

保证盒子新增padding或border之后，盒子元素的宽度和高度不变

取值

content-box

元素的宽高=边框+内边距+内容宽高
border-box

元素的宽高=width属性

盒子阴影

格式：

box-shadow:水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影;

注意点：

盒子阴影分内外阴影，默认是外阴影。
可以简写为box-shadow:水平偏移垂直偏移模糊度;。
默认情况下阴影的颜色和盒子内容的颜色一致。

清空默认边距

原因及作用

在企业开发中为了更好的空值盒子的宽高和计算盒子的宽高等等。<u>所以在企业开发中，编写代码之前第一件事情就是清空默认的边距。</u>

用法:在CSS中添加

*{
    margin: 0;
    padding: 0;
}

注意点

通配符选择器会找到当前界面中所有的标签，所以性能不好。不推荐使用。
高效清空默认边距：百度搜索“yui css reset”,或直接点击CSS Reset

行高和字号

行高：line-height

5.10 网页布局方式

标准流（文档流、普通流）排版方式
浮动流排版方式
定位流排版方式

标准流（文档流、普通流）排版方式

浏览器默认排版方式，有两种排版方式：垂直排版（块级元素）和水平排版（行内元素、行内块级元素）。

浮动流排版方式

是一种“半脱离标准流”的排版方式，<u>只有水平排版方式，且只有左对齐和右对齐两个属性</u>。

格式

float:left;

float:right;

特点

在浮动流中不区分块级元素、行内元素、行内块级元素，均可水平排版。
在浮动流中不区分块级元素、行内元素、行内块级元素，均可设置宽高。
综上所述，浮动流中的元素和标准流中的行内块级元素很像。

浮动元素排序规则

相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。
不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动。
浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。

浮动元素高度问题

在标准流中内容的高度可以撑起父元素的高度
在浮动流中浮动的元素不可以撑起父元素的高度

清除浮动

方式一：给前面一个父元素设置高度

注意点：在企业开发中，我们能不写高度就不写高度，所以这种方式用得很少
方式二：给后面的盒子添加clear属性

取值：

none：默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）

left：不要找前面的左浮动元素

right：不要找前面的右浮动元素

both：不要找前面的左浮动元素和右浮动元素

注意点：

一般直接使用clear:both;

添加clear属性后的标签，margin属性会失效。
方式三：隔墙法
- 外墙法：在两个标签中间添加一个块级元素（如div），并给该元素设置clear:both;属性。
  
  注意点：
  
  外墙法可以让第二个标签使用margin-top属性，但是不可以让第一个标签使用margin-bottom属性。
- 内墙法：在第一个标签所有子元素最后添加一个块级元素（如div），并给该元素设置clear:both;属性。
  
  注意点：
  
  内墙法既可以让第二个标签使用margin-top属性，也可以让第一个标签使用margin-bottom属性。
区别：

外墙法不能撑起第一个标签的高度，而内墙法可以撑起第一个标签的高度。

注意点：

企业开发中不常使用隔墙法。

方法四：利用伪元素选择器，给前一个标签的后面添加一个块级元素。

方法：

选择器名称::after{
    /*指定添加的子元素的内容为空*/
    content: "";
    /*指定添加的子元素为块级元素*/
    display: block;
    /*指定添加的子元素的高为0*/
    height: 0;
    /*设置添加的子元素看不见*/
    visibility: hidden;
    /*给添加的子元素设置clear:both;*/
    clear: both;
}
/*仅仅有上面的CSS，会出现不兼容IE6的情况，要想兼容IE6还需要添加下面的代码*/
选择器名称{
  *zoom:1;
}

方法五：给前一个选择器添加overflow: hidden;

作用：
- 可以将超出选择器方位的内容裁剪掉
- 清除浮动，但是也会出现不兼容IE6的情况，需要添加一条*zoom:1;
- 可以通过overflow: hidden;让里面的盒子设置margin-top之后，外面的盒子不被顶下来

定位流排版方式

相对定位
绝对定位
固定定位
静态定位

相对定位

就是相对于自己以前在标准流中的位置来移动。

用法：

position:relative;

注意点：

需要配合top right bottom left来使用
相对定位是不脱离标准流的，会继续在标准流中占用一份空间。
在相对定位中同一个方向上的定位属性只能使用一个。
由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素、行内元素和行内块级元素的。
由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin、padding等属性的时候会影响到标准流的布局。

应用场景：

用于对元素的进行微调
配合后面学习的绝对定位来使用

绝对定位

绝对定位就是相对于body来定位

用法：

position:absolute;

规律/参考点：

以下提到的“定位流”指的是相对定位、绝对定位、固定定位，不包含静态定位。

默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点。
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

注意点：

需要配合top right bottom left来使用
绝对定位的元素是脱离标准流的
绝对定位的元素是不区分块级元素、行内元素和行内块级元素的
如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点。
一个绝对定位的元素会忽略祖先元素的padding属性。

水平居中：

设置绝对定位元素的left:50%;
设置绝对定位元素的margin-left:-元素宽度的一半px;

子绝父相

相对定位的弊端：相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局。

绝对定位的弊端：默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化。

<u>鉴于以上情况，因此企业开发中都是相对定位和绝对定位相结合使用，而其中99.99%的组合是子绝父相——子元素使用绝对定位，父元素使用相对定位。</u>

固定定位

可以实现背景关联background-attachment:fixed;的作用，即元素和滚动条的关联方式可以实现元素不跟随滚动条的效果。

用法：

position:fixed;

注意点：

固定定位的元素是脱离标准流的，不会占用标准流中的空间
固定定位和绝对定位一样不区分行内元素、块级元素、行内块级元素。
IE6不支持固定定位。

静态定位

所有元素默认情况下就是静态定位

z-index属性

默认情况下所有的元素都有一个默认的z-index属性，取值是0。z-index属性的作用是专门用于控制定位流元素的覆盖关系的。

覆盖关系

默认情况下定位流的元素会盖住标准流的元素。
默认情况下定位流的元素后面编写的会盖住前面编写的。
如果定位流的元素设置了z-index属性，那么z-index属性值大的元素会显示在z-index属性值小的元素上面。

注意点：

从父现象

1.1 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性值比较大，谁就显示在上面。

1.2 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性值比较大，谁就会显示在上面。

网页布局总结

垂直方向使用标准流，水平方向使用浮动流。
拿到一个很复杂的界面后如何入手？
- 从上至下布局
- 从外向内布局
- 水平方向可以先划分为一左一右再对左边或者右边进行进一步布局

5.11 过渡模块

过渡三要素

必须要有属性发生变化
必须告诉系统哪个属性需要执行过渡效果
必须告诉系统过渡效果持续时长

实现方法：

给元素添加伪类选择器:hover，设置要实现过渡效果的属性。
给元素设置过渡参数，参考格式。

格式：

/*高速系统那个属性需要执行过渡效果*/
transition-property:属性;

/*告诉系统过渡效果持续的时长*/
transition-duration:时长;

/*告诉系统延迟多少秒之后才开始过渡动画*/
transition-delay:时长;

/*告诉系统过渡动画的运动的速度*/
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out;

连写：

transition: 过渡属性持续时长运动速度延迟时间;

简写：

transition:all 时长;

注意点：

当有多个属性需要实现过渡效果时，用,隔开即可。
连写状态下，如果想给多个属性添加过渡效果也是用,隔开即可。
连写时可以省略后面的两个参数，因为只要有前面两个参数就已经满足了过渡的三要素。
如果多个属性运动的速度、延迟的时间、持续时间都一样，可以使用简写

编写过渡效果的步骤：

不要管过渡，先编写基本界面
修改我们认为需要修改的属性
再回过头去给被修改属性的那个元素添加过渡即可

5.12 2D转换模块

格式：

/*旋转，dge代表旋转的度数*/
transform:rotate(值dge);

/*平移*/
transform:translate(水平值px,垂直值px);

/*缩放，两个参数一样时，可以只写一个参数*/
transform:scale(水平缩放倍数,垂直缩放倍数);

/*综合*/
transform:rotate(值dge) translate(水平值px,垂直值px) scale(水平缩放倍数,垂直缩放倍数);

/*修改2D模块的形变中心点*/
transform-origin:水平坐标值 垂直坐标值;

/*透视属性*/
perspective:值;

注意点：

旋转后，坐标轴也会跟着旋转。
transform-origin的取值有三种形式
- 具体像素
- 百分比
- 特殊关键字：left、top、bottom、right
rotate(值dge)默认是将元素以Z坐标轴旋转，相当于rotateZ(值dge)；如果想让元素以X坐标轴旋转（上下方向），则rotateX(值dge)；如果想让元素以Y坐标轴旋转（左右方向），则rotateY(值dge)。
translate(值px)默认是将元素以Y轴平移，相当于translateY(值px)；如果想让元素以X坐标轴旋转（上下方向），则translateX(值px)；如果想让元素以Z坐标轴旋转（前后方向），则translateZ(值px)。
透视属性，必须添加到需要呈现近大远小效果的元素的父元素上面。

5.13 动画模块

动画模块与过渡模块的异同：

相同点
- 过渡和动画都是用来给元素添加动画的
- 过渡和动画都是系统新增的一些属性
- 过渡和动画都是需要满足三要素才会有动画效果
不同点
- 过渡必须人为触发才会执行动画，而动画不需要人为的触发就可以执行动画

动画三要素及格式：

告诉系统需要执行哪个动画
```
animation-name:自定义动画名;
```

告诉系统我们需要创建一个动画及内容

方法一：
@keyframes 自定义动画名 {
    from{
        
    }
    to{
        
    }
}

方法二：
@keyframes 自定义动画名{
 0%{
     
 }
 50%{
     
 }
 100%{
     
 }
}
可以写0-100个动画状态

告诉系统动画持续的时长
```
animation-duration:时长;
```

其他属性：

/*告诉系统多少秒之后执行动画*/
animation-delay:时长;

/*告诉系统动画执行的速度*/
animation-timing-function:值;

/*告诉系统动画执行的次数，取值为“infinite”时，表示无限次*/
animation-iteration-count:次数;

/*告诉系统是否需要执行往返动画，默认为normal*/
animation-direction:alternate;

/*告诉系统当前动画是否需要暂定，默认running（执行动画）*/
animation-play-state:paused;

/*告诉系统动画的等待状态和结束状态的样式*/
animation-fill-mode:值;
取值：none：不做任何改变
     forwards：让元素结束状态保持最后一帧的样式
     backwards：让元素等待状态时显示第一帧的样式
     both：即forwards和backwards。

连写/简写：

连写：
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

简写：
animation:动画名称 动画时长;

5.14 3D转换模块

格式：

给元素的父元素添加
transform-style:preserve-3d;

5.15 背景相关

背景尺寸属性

用法：

background-size:属性;

属性取值：

默认
具体像素：宽px 高px
百分比：宽% 高%
宽度等比拉伸：auto 高px
高度等比拉伸：宽px auto
cover：告诉系统图片需要等比拉伸，并拉伸到宽度和高度都填满为止
contain：告诉系统图片需要等比拉伸，并拉伸到宽度或高度都填满为止

背景图片定位区域属性

用法：

background-origin:属性值;

属性取值：

padding-box：默认，图片从padding开始显示
border-box：图片从border开始显示
content-box：图片从content开始显示

背景绘制区域属性

用法：

background-clip:属性值;

属性取值：

padding-box：从padding区域开始绘制背景
border-box：默认，从border区域开始绘制背景
content-box：从content区域开始绘制背景

5.16 CSS书写格式

书写位置：

行内样式：直接将CSS代码写到开始标签中
内嵌样式：在一对head标签当中写上一对style标签，然后在style标签中编写CSS代码
外链样式（企业开发中一般都使用这种方式）：新建一个.css文件，把CSS代码写到这个文件中，然后通过link标签把这个文件和.html文件关联起来
导入样式：新建一个.css文件，把CSS代码写到这个文件中，然后通过@import把这个文件和.html文件关联起来

外链样式和导入样式的区别：

外链样式是通过link标签关联，而导入样式是通过@import关联，而@import是CSS2.1推出的，所以有兼容问题
外链样式在显示界面的时候，会先加载CSS样式，再加载结构，所以用户看到界面时一定已经设置了样式；外链样式在显示界面的时候，会先加载结构，再加载CSS样式，所以用户看到界面时不一定已经设置了样式。

静态网站实践

准备工作

创建站点文件夹（可以用中文名），并在站点文件夹里创建子文件夹（不能用中文）：css、js、images文件夹和index.html

重置所有默认的样式和设置一些全局样式，并且将设置样式的css文件和对应的界面关联起来。

/*1.默认样式*/
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a{text-decoration:none;}


/*2.全局样式*/
/*具体根据实际情况调整*/
body{
 font-family:"微软雅黑";
 font-size:12px;
 color:#999
 background-color:#f5f5f5;
}

分析布局，划分区域。

关于CSS

推荐将“重置所有默认的样式和设置一些全局样式”创建为一个css文件，然后每个网页再单独创建一个对应的css文件。

实践补充知识点

因为Logo相当于是企业的门面，所以企业开发中一般都会采用好h1标签包裹a标签，然后给a标签设置背景图片的方式来呈现Logo。

/*css代码*/
h1{
    width:100%;
    height:100%;
}
h1>a{
    display:inline-block;
    width:100%;
    height:100%;
    background:url("Logo地址");
}

/*html代码*/
<h1><a href="" title="企业名称"></a></h1>

当图片的宽度大于父元素时（广告图）
1. 不能使用margin:0 auto;或者text-align:center;让图片居中。
2. 可以使用定位流让图片居中，但是定位流的弊端也比较明显：1.需要写三行代码；2.必须知道图片的宽度。
3. 推荐使用margin:0 -100%;，但是使用这种方法的前提是父元素必须设置text-align:center;。因为图片过大，浏览器底部会有滚动条，这时可以给父元素设置overflow:hidden;。
伸缩布局？ul下面的li浮动之后，使li之间的空隙均匀分布
```
display:flex;
justify-content:space-berween;
```
opacity:值;，这是给元素设置透明度（取值0~1）的，特点是该元素的子元素也会跟着透明。

最后编辑于：2018.05.16 23:25:21

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