文章目录
HTML
HTML，超文本标记语言
负责页面中的结构，定义出页面中的各个组成部分
HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分
HTML页面的基本结构
一个网页有三个部分组成：结构html、表现css、行为js
结构:html
结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片
结构使用HTML来编写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
表现css
表现是页面的外在的样式，比如字体，字体大小，字体颜色，背景…
使用CSS来设置页面中元素的样式
行为js
页面和用户之间的交互行为
使用JavaScript来设置页面的行为
一个设计优良的网页要求结构、表现、行为三者分离
在开发中总是要面临一个问题，就是程序之间的耦合，三者分离就是为了解耦合
标签(元素)
成对出现
<标签名></标签名>
- 1
自结束标签
<标签名 />
- 1
块元素和内联元素
块元素
块元素会独占页面中的一行，无论他的内容的多少
一般使用块元素对页面进行布局
常见的块元素
div
p
h1~h6
内联元素
内联元素只占用自身的大小，不会独占一行
内联元素也叫行内元素（inline）
一般内联元素都是用来为文本来设置效果
常见的内联
span
a
img
包裹规则
一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素
a元素可以包含任意元素，除了a本身
p元素不能包含任何块元素
元素之间的关系
父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素叫做子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素
后代元素
直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素
兄弟元素
拥有相同父元素的元素叫做兄弟元素
属性
通过属性可以设置标签的效果
属性需要定义在开始标签中或这自结束标签中
属性实际上是一组一组名值对结构
例子：
<标签名 属性名="属性值" 属性名="属性值"></标签名>
<标签名 属性名="属性值" 属性名="属性值" />
- 1
- 2
常用标签
<!doctype html>文档声明
用来标识当前页面的html的版本
该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的
<html>网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在html标签的内部
<head>网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面
子标签
<title>用来设置网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名
<meta>
用来设置网页的元数据，比如网页使用的字符集
<meta charset="utf-8" />
设置网页的关键字
<meta name="keywords" content="关键字,关键字,关键字,关键字"/>
设置网页的描述
<meta name="description" content="网页的描述"/>
请求的重定向
<meta http-equiv="refresh" content="秒数;url=地址" />
<body>网页的主体
网页中所有的可见部分都需要在body中编写
<h1> ~ <h6>
标题标签
在html中一共有六级标题
六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
一般一个页面中只能写一个h1
<p>
段落标签
<br />
换行标签
<hr />
水平线标签
内联框架
可以向一个页面中引入其他的外部页面
<iframe>``</iframe>
属性
src
外部页面的地址，可以使用相对路径
width和height
可以设置框架的宽度和高度
name
可以为内联框架指定一个名字
可以将该属性值设置为超链接的target属性的值
这样当点击超链接时，页面将会在相应的内联框架中打开
内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架
<a>超链接
可以使当前页面跳转到其他的页面
<a>链接的文字</a>
属性
href
指向链接跳转的目标地址，可以是一个相对路径
还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置
可以使用mailto:来创建一个发送电子邮件的超链接
target
指定在哪个窗口中打开链接
可选值
_self
默认值，默认在当前窗口打开链接
_blank
在新窗口中打开链接
内联框架的name属性值
在指定的内联框架中打开链接
语法
注释
<!-- 注释内容 -->
- 1
注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码
也可以通过注释隐藏一些页面中不想显示的内容
实体
在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
实体也可以称为转义字符
实体的语法
&实体名;
常用的实体
空格 Non-Breaking Space” 的缩写，
<< 、>>、版权符号©©
图片标签
使用图片标签可以向页面中引入一个外部图片
属性
src
指向一个外部图片的路径，可以使用相对路径
alt
指定一个在图片无法加载时对图片的描述
搜索引擎主要通过该属性来识别图片的内容
如果不写该属性则搜索引擎会对图片进行收录
width
设置图片的宽度
height
设置图片的高度
图片的格式
JPEG
颜色丰富的图片，如，照片
GIF
颜色单一，简单透明的图片，动态图
PNG
颜色丰富，复杂透明的图片
图片选择的原则
效果一致，用小的
效果不一致，用效果好的
相对路径
相对于当前资源所在的目录的路径
可以使用…/返回一级目录，返回几级使用几个…/
xHtml语法规范
1.HTML中不区分大小写，但是尽量使用小写
2.HTML的注释不能嵌套
3.标签必须结构完整
要么成对出现
要么自结束标签
4.标签可以嵌套但是不能交叉嵌套
5.属性必须有值，且值必须加引号，单引号双引号都可以
文本标签
`<em>`
表示语气上的强调
`<strong>`
表示内容的重要性
`<i>`
表示单纯的斜体
`<b>`
表示单纯的加粗
`<small>`
表示细则一类的内容
`<cite>`
表示参考的内容，凡是加书名号的都可以使用cite
`<q>`
短引用，行内引用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
< blockquote>
长引用，块级引用
<sup>
上标
<sub>
下标
<del>
删除的内容
<ins>
插入的内容
< pre>
预格式标签，可以保留代码中空格换行这些格式
< code>
表示程序代码
css基础
Cascading（级联） Style Sheets(薄片，纸张，覆盖)，层叠样式表
css样式三种方式
内联样式
可以将css样式编写到元素的style属性中
将样式直接编写在style属性中，这样的样式成为内联样式
只对当前元素（标签）有效，不方便复用
内联样式属于结构与表现耦合，不方便后期维护
<p style="color: red; font-size: 40px">锄禾日当午，汗滴禾下土</p>
<p>谁知盘中餐，粒粒皆辛苦</p>
- 1
- 2
head编写style便签
也可以将CSS样式编写到head中的style标签里
将样式表编写的style标签中，然后通过CSS选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步分离它也是我们推荐的使用方式
<style type="text/css">
p{ color: red;
font-size: 40px;
}
</style>
- 1
- 2
- 3
- 4
- 5
外部的CSS文件
还可以将样式表编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入到当前页面中，
这样外部文件中的css样式表将会应用到当前页面中。
将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以是样式表可以在不同的页面中使用，
最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存
加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的CSS文件
<link rel="stylesheet" type="text/css" href="style.css" />
- 1
css语法简介:
选择器：
通过选择器可以选中页面中指定的元素，
并且将声明块中的样式应用到选择器对应的元素上
声明块：
声明块紧跟在选择器的后边，使用一对{}括起来，
声明块中实际上就是一组一组的名值对结构，
这一组一组的名值对我们称为声明，
在一个声明块中可以写多个声明，多个声明之间使用;隔开，
声明的样式名和样式值之间使用:来连接
p{
color:red;
font-size:50px;
}
- 1
- 2
- 3
- 4
注释
/*
CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中
*/
- 1
- 2
- 3
单位
长度单位
px
像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成
一个像素指的就是一个像素点
在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小
%
可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值
当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面
em
em会相对于当前元素的字体大小来计算
1em = 1font-size
em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变
rem…
颜色单位
颜色单词
直接使用英文单词来表示颜色
red green blue orange
RGB值
所谓RGB值就是通过红 绿 蓝三元色的不同组合来搭配出各种不同的颜色
语法：
rgb(红色,绿色,蓝色)
这三个值需要一个0-255之间的值
0表示没有
255表示最大
rgb(50,200,30)
也可以使用百分数来设置RGB值，需要0%-100%之间的值
百分数最终也是转换为0-255的
0%相当于0
100%相当于255
rgb(100%,0%,0%)
十六进制RGB值
也是一种RGB值的表示方式，不同的是它使用的是16进制数字来表示而不是
语法：
#红色绿色蓝色
这里的颜色需要一个00-ff之间的值
例子：
#ff0000
如果颜色的是两位两位重复的，可以进行简写
比如 #aabbcc 可以写成 #abc
比如 #bbffaa 可以写成 #bfa
文本样式
字体
color
字体的颜色
font-size
字体的大小
浏览器中默认的字体大小一般都是16px，而我们开发时一般会统一为12px
font-family
设置文字的字体
font-style
设置斜体
font-weight
设置文字的加粗
font-variant
小型大写字母
font
文字的简写属性
可以同时设置所有的字体相关的样式
语法：
font: [加粗 斜体 小大字母] 大小[/行高] 字体
加粗，斜体，小大字母，顺序无所谓，写不写都行，如果不写在使用默认值
文本大小，和字体必须写，且大小必须是倒数第二个，字体必须是最后一个
大小后可以设置行高，可写可不写，如果不写则使用默认值
文本样式
line-height
行高**
文本默认都是在行高中垂直居中的
通过line-height可以修改行高
行间距 = 行高 - 字体大小**
text-transform
设置文本的大小写
- 1
- 2
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
text-decoration
设置文本修饰
- 1
- 2
a {
/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
* */
text-decoration: none;
}
- 1
- 2
- 3
- 4
- 5
- 6
text-align
设置文本对齐
text-indent
设置首行缩进
它需要一个长度单位，如果是正值则首行向右移动，如果是负值则向左移动
/*
* text-indent用来设置首行缩进
* 当给它指定一个正值时，会自动向右侧缩进指定的像素
* 如果为它指定一个负值，则会向左移动指定的像素,
* 通过这种方式可以将一些不想显示的文字隐藏起来
* 这个值一般都会使用em作为单位
*/
- 1
- 2
- 3
- 4
- 5
- 6
- 7
letter-spacing
字符间距
word-spacing
单词间距
/* * 在CSS并没有为我们提供一个直接设置行间距的方式， * 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大 * 使用line-height来设置行高 * 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高， * 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示 * * 行间距 = 行高 - 字体大小 */ .p1{ font-size: 20px;<span class="token comment">/* * 通过设置line-height可以间接的设置行高， * 可以接收的值： * 1.直接就收一个大小 * 2.可以指定一个百分数，则会相对于字体去计算行高 * 3.可以直接传一个数值，则行高会设置字体大小相应的倍数 */</span> <span class="token comment">/*line-height: 200%;*/</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
}
.box{
width: 200px;
height: 200px;
round-color: #bfa;
/*
* 对于单行文本来说，可以将行高设置为和父元素的高度一致，
* 这样可以是单行文本在父元素中垂直居中
*/
line-height: 200px;
}
.p2{
/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
*/
font: 30px “微软雅黑”;
line-height: 50px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
选择器
通过选择器可以选中页面中的一组元素，然后为其设置样式
基础选择器
元素选择器
根据标签名，选中页面中的指定元素
语法：标签名{ }
例子：
div{}
p{}
h1{}
- 1
- 2
- 3
id选择器
根据元素的id属性值选中一个唯一的元素
语法：#id {}
例子：
#box1{}
#hello{}
- 1
- 2
类选择器
我们可以为元素设置class属性，
class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
根据元素的class属性值，选中一组元素
语法：.class{}
例子：
.hello{}
.box{}
- 1
- 2
通配选择器
选中页面中的所有元素
语法：*{}
通配选择器的性能比较差，尽量避免使用
并集选择器
可以同时选中符合多个选择器的元素
语法：选择器1,选择器2,选择器N{}
例子：
div,p,#box,.hello{}
- 1
交集选择器
对于id选择器来说，不建议使用复合选择器,因为id已经能唯一标识
可以选中满足多个条件的元素
先元素再类
语法：选择器1选择器2选择器N{}
例子：
p.hello{}
- 1
后代元素选择器
选中指定元素的指定后代元素
语法：祖先元素 （空格）后代元素{}
例子：
div span {}
div p{}
- 1
- 2
子元素选择器
选中指定元素的指定子元素
语法：父元素 > 子元素 {}
例子：
div > span {}
div > p{}
- 1
- 2
声明块
声明块中实际上就是一个一个CSS声明
声明
每一个CSS声明都是一个样式，实际上就是一个名值对的结构
名和值之间使用:链接
:左边是样式的名字
:右边是样式的值
每一个声明以;结尾
例子
color:red;
font-size:20px;
- 1
- 2
伪类和伪元素
伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置
伪类：
:link
表示一个普通的链接（未访问过的链接）
:visited
表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
:hover（盘旋，徘徊）
鼠标移入的链接，也可以为其他元素设置hover
:active
正在被点击的链接，也可以为其他元素设置active
:focus
表示元素获取焦点的状态，一般用于文本框
::selection（注意有两个冒号）
表示内容被选中的状态
在火狐中使用::-moz-selection来代替
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
伪元素：
:first-letter
表示第一个字符
:first-line
表示文字的第一行
:before
选中元素的最前边
一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
:after
选中元素的最后边
一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
属性选择器
根据元素的属性选择指定元素
[属性名]
选取含有指定属性的元素
[属性名="属性值"]
选取属性值等于指定值的元素
[属性名^="属性值"]
选取属性值以指定内容**开头的元素**
[属性名$="属性值"]
选取属性值以指定内容结尾的元素
[属性名*="属性值"]
选取属性值中**包含指定内容的元素**
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
子元素的伪类
:first-child
寻找父元素的第一个子元素，**在所有的子元素中排序**（前面不指定特定元素就表示全部元素,指定就是交集选择器）
:last-child
寻找父元素的最后一个子元素，在所有的子元素中排序
:nth-child
寻找父元素中的指定位置子元素，在所有的子元素中排序
例子
p:nth-child(3)
可以使用even，来找到偶数的子元素
可以使用odd，来找到奇数的子元素
:first-of-type
寻找指定类型中的第一个子元素
:last-of-type
寻找指定类型中的最后一个子元素
:nth-of-type
寻找指定类型中的指定子元素
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
:empty
Selects elements that don’t have any other elements inside of them.
div:empty selects all empty
:nth-of-type(A)
Selects a specific element based on its type and order in another element - or even or odd instances of that element.
div:nth-of-type(2) selects the second instance of a div.
.example:nth-of-type(odd) selects all odd instances of a the example class.
:only-child
You can select any element that is the only element inside of another one.
:nth-last-child(A)
Selects the children from the bottom of the parent. This is like nth-child, but counting from the back!
Nth-of-type Selector with Formula
:nth-of-type(An+B)
The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.
span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance.
:only-of-type
Selects the only element of its type within another element.
p span:only-of-type selects a span within any p if it is the only span in there.
兄弟元素选择器
**选取后一个兄弟元素**
前一个 + 后一个
选取后边所有的兄弟元素
前一个 ~ 后边所有
- 1
- 2
- 3
- 4
否定伪类
从一组元素中将符合要求的元素剔除出去
语法：
:not(选择器)
例子：
.abc:not(div)
- 1
- 2
- 3
- 4
- 5
样式的继承
为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。
通过样式的继承可以将一些样式统一设置个祖先元素，这样所有的后代都会应用到相同的样式。
但是并不是所有的样式都会继承，比如：背景相关的，边框相关的，定位相关的。具体参考文档
- 1
- 2
- 3
选择器的优先级
当使用选择器为元素设置样式时，如果样式发生了冲突，采用哪个样式由选择器的优先级（权重）来决定。
越精准，越优先
优先级
内联样式1000
id选择器100
类和伪类选择器10
元素选择器1
通配选择器0
继承的样式：没有优先级
- 1
- 2
- 3
- 4
- 5
- 6
- 7
当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式（覆盖）
优先级计算时，总大小不能超过他的最大的数量级
可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。
盒子模型
CSS 框模型Box Model
CSS中将每一个元素都设置为了一个矩形的盒子
将所有的元素都设置为盒子，是为了方便页面的布局
当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子
盒子模型构成
每个盒子都由如下几部分构成 4
内容区： content
内容区相当于盒子存放东西的空间
内容区在盒子的最里边
元素的所有的子元素都是放在父元素的内容区
内容区设置
width
内容区的宽度
height
内容区的高度
- 1
- 2
- 3
- 4
边框 border
边框盒子可见框最外侧，边框是盒子的边缘
设置边框
设置边框需要同时设置三个样式，缺一不可
border-width
边框的宽度
可以同时指定四个边框的宽度，也可以分别指定
规则
四个值
border-width : 10px 20px 30px 40px;
border-width : 上 右 下 左;(顺时针)
三个值
border-width : 10px 20px 30px;
border-width : 上 左右 下;
两个值
border-width : 10px 20px;
border-width : 上下 左右;
一个值
border-width : 10px;
border-width : 上下左右;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
border-color
边框的颜色
border-style
边框的样式
除了这三个样式，CSS中还提供了
border-xxx-width
border-xxx-color
border-xxx-style
xxx可以是
top
right
bottom
left
通过这些样式可以单独指定四个边的颜色，宽度和样式
边框的简写属性
border
border-left
border-top
border-right
border-bottom
- 1
- 2
- 3
- 4
- 5
border: red solid 10px ;
border-left: red solid 10px ;
- 1
- 2
这个几个属性可以同时设置边框相关的的样式
border可以同时设置四个边的颜色，宽度，样式
border-xxx可以单独设置某一个边
规则
使用这些样式可以同时设置border-width border-style border-color，不同的属性使用空格隔开，并且没有顺序要求
内边距： padding
内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
盒子中一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
- 1
- 2
- 3
- 4
padding
可以同时设置四个方向的内边距，规则和border-width一致
padding:上 右 下 左
padding:上 左右 下
padding:上下 左右
padding:上下左右
- 1
- 2
- 3
- 4
盒子的可见框大小由内容区、内边距和边框共同决定
外边距 margin
外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
也是具有四个方向的外边距
margin-top
margin-right
margin-bottom
margin-left
- 1
- 2
- 3
- 4
简写属性
margin
规则和padding一致
margin值
可以设置为auto
如果单独将左右外边距设置为auto，则会将左或右外边距设置为最大值
如果同时将左右外边距设置为auto，则会将左右外边距设置为一个相等的值，通过这种方式使一个子元素在它的父元素中水平居中
margin:0 auto
可以设置为负值
如果将margin设置为负值，则元素会向相反的方向移动
外边距的重叠
相邻的垂直外边距会发生重叠现象
相邻元素的外边距会取最大值
子元素的外边距会传递给父元素
水平外边距不会重叠，而是取和
内联元素的盒子模型
内联元素不能设置width和height
padding
支持水平方向的padding
垂直方向的padding也支持，但是不会影响布局
border
支持四个方向边框，但是垂直的边框不会影响布局
margin
支持水平方向外边距，水平方向的相邻外边距不会重叠，而是求和
不支持垂直方向的
盒模型相关的样式
CSS 定位属性（Positioning）
display
设置元素的显示类型
可选值
none
元素不会在页面中显示，并且不会占据页面的位置
block
元素会作为块元素显示
inline
元素会作为内联元素显示
inline-block
元素会作为行内块元素显示
既具有内联元素的特点也具有块元素的特点
既不独占一行，又可以设置宽高
visibility
设置元素是否在页面中显示
可选值
visible
默认值，元素在页面中正常显示
hidden
元素不在页面中显示，但是依然在页面中占据位置
overflow
设置元素如何处理溢出内容
可选值
visible
默认值，不会处理溢出的内容，在父元素以外的地方显示
hidden
溢出的内容会被隐藏不会显示
scroll
在父元素中同时添加水平和垂直方向的滚动条
不内容是否溢出都会添加滚动条
auto
根据需要自动生成滚动条
布局
文档流
文档流指的是网页中的一个位置
文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
块元素
1.块元素在文档流中自上向下排列
2.块元素在文档流中宽度默认是父元素的100%(auto)
3.块元素在文档流中高度默认被内容撑开
内联元素
1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列
2.内联元素在文档流中宽度和高度默认都被内容撑开
浮动
使用float来设置元素浮动
可选值
none
默认值，不浮动，元素在文档流中
left
元素向左浮动
right
元素向右浮动
特点
1.元素浮动以后会完全脱离文档流
2.浮动以后元素会一直向父元素的最上方移动
3.直到遇到父元素的边框或者其他的浮动元素，会停止移动
4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
浮动以后元素的特点
元素浮动以后，会使其完全脱离文档流。
块元素
块元素脱离文档流以后
1.不会独占一行
2.宽度和高度都被内容撑开
内联元素
内联元素脱离文档流以后会变成块元素
高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱
我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
方法一 开启父元素的BFC或hasLayout
BFC:Block Formatting Context,块级格式化环境
BFC是元素的隐含属性，默认是在关闭状态的
可以通过一些特殊的样式，来开启BFC
开启BFC以后元素将会具有如下特性
1、父元素的垂直外边距不会与子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动子元素
开启BFC的方式
1.设置元素浮动
使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
一般都是使用overflow:hidden来开启BFC
hasLayout
在IE6中没有BFC，但是有一个和BFC类似的hasLayout
在IE6中可以通过开启hasLayout来解决高度塌陷的问题
副作用最小的开启方式
zoom:1
当为元素设置宽度非默认值时，会自动开启hasLayout
方法二：清除浮动
clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
清除浮动以后，元素会回到其他元素浮动之前的位置
塌陷的父元素的最后添加一个空白的div，然后对该div进行**清除浮动**
然基本没有副作用，使用这种方式会在页面中添加多余的结构
- 1
- 2
方法三
用after伪类，向父元素后添加一个块元素，并对其清除浮动
种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构,这是我们最推荐使用的方式，几乎没有副作用
- 1
- 2
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
定位
通过定位可以将页面中的元素，摆放到页面的任意位置
使用position来设置元素的定位
可选值
static
默认值，元素没有开启定位
relative
开启元素的相对定位
absolute
开启元素的绝对定位
fixed
开启元素的固定定位
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
偏移量
当元素开启了定位以后，可以通过偏移量来设置元素的位置。
靠近中心是正数，远离是负数。
left
元素距离定位位置的左侧距离
top
元素距离定位位置的上边距离
right
元素距离定位位置的右侧距离
bottom
元素距离定位位置的底部距离
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
一般情况下，只使用两个值即可定义一个元素的位置。
相对定位：ralative
1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素相对于其自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
5.相对定位的元素会提升一个层级，会覆盖其他元素
绝对定位： absolute
1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位，子绝父相），如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
3.绝对定位的元素会完全脱离文档流
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5.绝对定位会使元素提升一个层级，会覆盖其他元素
固定定位:fixed
固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样.
不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动
IE6不支持固定定位
层级
定位元素 > 浮动元素 > 文档流中的元素
如果定位元素的层级是一样，则下边的元素会盖住上边的
当元素开启了定位以后，可以通过z-index来设置元素的层级
1.z-index值越高元素越优先显示
2.如果z-index值一样，或者都没有z-index则优先显示下边的元素
3.父元素永远不会盖住子元素
其他 css属性
cursor 属性
https://www.w3school.com.cn/cssref/pr_class_cursor.asp
定义和用法
cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
transform 属性
https://www.w3school.com.cn/cssref/pr_transform.asp
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
设置元素的透明背景
opacity可以用来设置元素背景的透明，
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用如下属性代替
alpha(opacity=透明度) filter: alpha(opacity=50);
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
background属性
使用backgroundimage来设置背景图片
语法：backgroundimage:url(相对路径);
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
backgroundimage:url(img2.jpg);
- 1
backgroundrepeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
norepeat ，背景图片不会重复，有多大就显示多大
repeatx， 背景图片沿水平方向重复
repeaty，背景图片沿垂直方向重复
background-position
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值
来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量，
第一个值是水平偏移量
如果指定的是一个正值，则图片会向右移动指定的像素
如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
如果指定的是一个正值，则图片会向下移动指定的像素
如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment
用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
当背景图片的backgroundattachment设置为fixed时，
背景图片的定位永远相对于浏览器的窗口
backgroundattachment: fixed;
常用标签
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，
div元素主要用来对页面进行布局的
form表单
表单的作用就是用来将用户信息提交给服务器的
比如：百度的搜索框 注册 登录这些操作都需要填写表单
使用form标签创建一个表单
action属性
*form标签中必须指定一个，该属性指向的是一个服务器的地址**
我们提交表单时将会提交到action属性对应的地址
- 1
- 2
input框
使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
name表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
格式：
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
单选按钮
使用input来创建一个单选按钮，它的type属性使用radio
单选按钮通过name属性进行分组，name属性相同是一组按钮
像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项，
则可以在希望选中的项中添加checked="checked"属性
多选框
使用input创建一个多选框，它的type属性使用checkbox
下拉列表
使用select来创建一个下拉列表
下拉列表的name属性需要指定给select，而value属性需要指定给option
可以通过在option中添加selected="selected"来将选项设置为默认选中
当为select添加一个multiple=“multiple”，则下拉列表变为一个多选的下拉列表
你喜欢的明星 <select name="star"> <!-- 在select中可以使用optgroup对选项进行分组 同一个optgroup中的选项是一组 可以通过label属性来指定分组的名字 --> <optgroup label="女明星"> <!-- 在下拉列表中使用option标签来创建一个一个列表项 --> <option value="fbb">范冰冰</option> <option value="lxr">林心如</option> <option value="zw">赵薇</option> </optgroup><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>男明星<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ldh<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>刘德华<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pcj<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>潘长江<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
<br /><br />
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
textarea
使用textarea创建一个文本域
按钮
提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮,它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字
可以创建一个重置按钮，
点击重置按钮以后表单中内容将会恢复为默认值
使用input type=button可以用来创建一个单纯的按钮，
这个按钮没有任何功能，只能被点击
除了使用input，也可以使用button标签来创建按钮
这种方式和使用input类似，只不过由于它是成对出现的标签
使用起来更加的灵活
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
- 1
- 2
- 3
标签label
在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
在点击标签时，相当于对for的表单向选中
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br/>
- 1
- 2
fieldset
在表单中可以使用fieldset来为表单项进行分组，
可以将表单项中的同一组放到一个fieldset中
<fieldset>
<!-- 在fieldset可以使用legend子标签，来指定组名 -->
<legend>用户信息</legend>
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br />
<label for="pwd">密码 </label>
<input id="pwd" type="pwd" name="password"/><br />
</fieldset>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
table表格
CSS border-collapse 属性
table{
border-collapse:collapse;
}
- 1
- 2
- 3
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
|---|---|
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
标签的 colspan. rowspan 属性
| 值 | 描述 |
|---|---|
| number | 设置单元格可横跨的列(行）数。 |
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
列表
列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
无序列表
使用ul(unordered list)来创建一个无序列表，在列表中使用li来表示一个列表项
无序列表使用符号作为项目符号
序列表
使用ol(ordered list)来创建一个无序列表，在列表中使用li来表示一个列表项
使用有序的序号作为项目符号
义列表
表相关的元素都是块元素，他们之间可以互相嵌套
除项目符号
list-style:none
frameset框架集
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，
框架集可以同时引入多个页面，而内联框架只能引入一个，
在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不可以使用body标签
属性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，
所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面
浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset cols="30% , * , 30%">
<!-- 在frameset中使用frame子标签来指定要引入的页面
引入几个页面就写几个frame
-->
<frame src="table.html" />
<frame src="form.html" />
<!-- 嵌套一个frameset -->
<frameset rows="30%,50%,*">
<frame src="04.表格的布局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表单.html" />
</frameset>
</frameset>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
me
CSS3 @media 查询
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
- 1
- 2
- 3
- 4
- 5
min-height 属性设置元素的最小高度。
设置以后：不能修改为小于此高度的距离
css hack 能有效识别低版本ie，具体八度
clearfix
解决父子元素的外边距重叠
.box1:before{
content: “”;
display:table可以将一个元素设置为表格显示
display: table;
}
解决父元素高度塌陷
.clearfix:after{
content: “”;
display: block;
clear: both;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
经过修改后的clearfix是一个多功能的
既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
- 1
- 2
- 3
- 4
- 5
- 6
长表格
有一些情况下表格是非常的长的，
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
css精灵图
CSS-Sprite
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验。
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，
但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
我们这个练习，一上来浏览器只会加载link.png由于hover和active的状态没有马上触发，
所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png
当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite,css精灵图）
优点：
1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
提高访问效率，提高了用户体验。
2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
title属性**，这个属性可以给任何标签指定当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
我是一个段落
### **浏览器默认样式**浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
清除浏览器的默认样式
*{
margin: 0;
padding: 0;
}
- 1
- 2
- 3
- 4
这种方式支持IE6，但是这种效果在IE Tester中无法测试
github笔记下载源文档
</div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
<div class="more-toolbox">
<div class="left-toolbox">
<ul class="toolbox-list">
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#csdnc-thumbsup"></use>
</svg><span class="name">点赞</span>
<span class="count">16</span>
</a></li>
<li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-Collection-G"></use>
</svg><span class="name">收藏</span></a></li>
<li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-fenxiang"></use>
</svg>分享</a></li>
<!--打赏开始-->
<!--打赏结束-->
<li class="tool-item tool-more">
<a>
<svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
</a>
<ul class="more-box">
<li class="item"><a class="article-report">文章举报</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/qq_42835910">
<img src="https://profile.csdnimg.cn/8/C/5/3_qq_42835910" class="avatar_pic" username="qq_42835910">
<img src="https://g.csdnimg.cn/static/user-reg-year/2x/2.png" class="user-years">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_42835910" data-report-click="{"mod":"popu_379"}" target="_blank">Nicolas Lee</a></span>
</div>
<div class="text"><span>发布了499 篇原创文章</span> · <span>获赞 591</span> · <span>访问量 6万+</span></div>
</div>
<div class="right-message">
<a href="https://bbs.csdn.net/topics/395526352" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板
</a>
<a class="btn btn-sm attented bt-button personal-watch" data-report-click="{"mod":"popu_379"}">已关注</a>
</div>
</div>
</div>
本文转载自链接：https://blog.csdn.net/qq_42835910/article/details/103103040
973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
