B站尚硅谷HTML&CSS核心基础教程全笔记

/*
CSS语法：
结构：选择器+声明块（{}）
  选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的应用样式应用到对应的
		素上。
  声明块：紧跟在选择器后面，用大括号括起来，实际上是一组一组的名值对结构，
		我们称为声明。多个声明之间使用分号隔开，声明的样式名与样式值之间用冒号连接。

*/

/*
块和内联元素
	
div：就是一个块元素，所谓的块元素就是会独占一行，无论内容多少
		p、h1、h2等也是块元素
div没有任何语义，不会为里面的元素设置任何默认样式
div元素主要用来对页面进行布局
	
span：是一个内联元素（行内元素），不会占用一整行，只占自身元素大小，一行容不下	才换行
		常见的内联元素：a、img、iframe、span
		span没有任何语义，专门用来选中文字，然后为文字来设置样式。


		块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
		一般情况下只使用块元素包含内联元素，而不会使用内联元素去包含块元素
		a元素可以包含任意元素（各种各样的元素除了它本身）

		p元素中不可以包含其他任何的块元素
*/

/*
id选择器：通过元素的id属性值选中唯一的一个元素
语法：
	#id属性值{}
*/

/*
类选择器：通过元素的class属性选中一组元素
语法：
		class属性{}
	一个元素可以设置多个class属性，多个值之间使用空格隔开
*/

/*
选择器分组：通过选择器分组可以同时选中多个选择器对应的元素
语法：
	选择器1，选择器2，选择器N{}
*/

/*
通配选择器：选择页面中的所有元素
语法：
	*{}
*/

/*
复合选择器（交集）：同时满足多个选择器
语法：
	选择器1选择器2选择器N{}
*/

/*
后代元素选择器：选中指定元素的指定后代元素
语法：
		祖先元素 后代元素{}
*/

/*
子元素选择器：选择指定父元素的子元素
语法：
	父元素 > 子元素{}
*/

/*
伪类：专门用来表示元素的一种特殊状态
	比如：访问过的链接，普通的超链接，获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
语法：
		没访问过的：a:link{}
		访问过的（只能设置颜色）：a:visited{}
			浏览器通过历史记录来判断链接是否被访问过
			visited涉及到的用户的隐私，所以只能设置字体的颜色
		鼠标移入的状态：a:hover{}
		超链接被点击的状态（不松手）：a:active{}
		文本框获取焦点：input:focus{}
		p标签文本选中后的样式修改：p::selection{}
		但是在火狐浏览器中需要使用：p::-moz-selection{}，（是mozila）如果要兼容浏览器就要    都写
	这些伪类除了给a标签设置以外也可以给其他元素绑定。但是IE6不支持超链接以外的标签绑定伪类
*/

/*
伪元素：表示元素中的一些特殊位置
语法：
		为p中的第一个字符设置样式：p:first-letter{}
		为p中的第一行设置样式：p:first-line{}
	:before表示元素最前边的部分，一般都需要结合content样式一起使用，通过content可以向before或after（结束标签的前面）的位置添加一些内容，这一部分不能被选中。例如：
	p:before{
		content:"我会出现在整个段落的最前面"
	}
*/

/*
title属性：这个属性可以给任何标签指定，当鼠标移入到元素上时，元素中的title属性内容会被显示
属性选择器：可以根据元素中的属性或者属性值来选取指定元素
语法：
		标签名[属性名]{}
		标签名[属性名=属性值]{}（属性值也可以加双引号表示指定值）
		标签名[属性名^=某值]{}表示选取以某值开头的该属性的值的元素
		标签名[属性名$=某值]{}表示选取以某值结尾的该属性的值的元素
		标签名[属性名*=某值]{}表示选取存在某值的该属性的值的元素

*/

/*
其他子元素选择器：
	语法：
		第一个子元素还必须是p元素：p:first-child{}这里不区分是哪一个父元素的第一个子元素
		最后一个子元素必须还是p元素：p:last-child{},也不区分父元素是哪一个父元素
		如果想要区分父元素，使用大于号确定父元素
		选中第n个子元素：p:nth-child(n){}   特殊值：even偶数位置，odd奇数位置
		在当前标签下该类型的子元素排序寻找对应位置的元素：
			p:first-of-type{}
			p:last-of-type{}
			p:nth-of-type{}
*/

/*
后一个（必须是紧挨着的，不然没用）兄弟元素选择器：前一个 + 后一个{}
选中后面的所有兄弟元素：前一个 ~ {}
*/

/*
否定伪类：可以从已经选中的元素中剔除某些元素
语法：
	元素名:not(要剔除的对象){}
	其中要剔除的对象可以是类（.类名），也可以指定id值（要加#）
例如：
p:not(.hello){
	background-color:yellow;
}
表示将所有除了class为hello的p元素的背景变为黄色
*/

/*
选择器的优先级：当使用不同的选择器选中同一个元素并且设置了相同的样式，这时样式之间产生冲突，优先级高的优先显示。
优先级规则：
	内联样式：1000
	id选择器：100
	类和伪类：10
	元素选择器：1
	通配选择器（#）：0
	继承样式：没有优先级(可以被任何一个有优先级的覆盖掉)

当选择器中包含多个选择器时候，要把优先级相加比较
但是注意选择器的优先级计算不会超过他最大的数量级，比如>10个测类选择器的优先级加起来不大于100.

如果选择器的优先级相同，则使用靠后的样式

并集选择器的优先级是单独计算,不会加起来算：
div,p,#p1,.hello{}

在样式的最后加一个 !important 时候（写在分号前面），该样式将获得最高优先级，优先于内联样式显示，但是在开发中尽量避免 !importtant 的使用，不利于后期的修改

*/

/*
样式的继承：儿子可以继承父亲的遗产，在CSS中祖先元素的样式可以别其后代元素继承
后代元素是自动继承祖先元素的样式的。
但是并不是所有的子元素都会被继承，比如背景相关、边框、定位的样式就不会被继承下来

*/

/*
a的伪类有四种：:link、:visited、:hover、:active
这四种伪类的优先级相同，采用后面的样式，在使用:hover和:active时候要考虑代码顺序
:link和:visited必须在:hover和:active的上面(LVHA)
*/

/*
em表示一段内容中的着重点（语气），em浏览器中默认斜体显示
strong标签用于表示一个内容的重要性，strong浏览器中默认粗体

i 标签表示斜体
b 标签表示加粗
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者斜体就可以使用b和i标签

small 标签中的内容会比父元素中的字小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中的小字，网站版权声明都可以放到small中

big 标签被淘汰，没有什么语义

cite 指明引用参考的内容，例如：书名、话剧名、电影名...

q 标签表示一个短引用（行内引用），默认加上引号表示引用，是通过CSS加的引号，该引号不能被选中（和before和after相同）

blockquote 标签表示一个常引用（块引用）独占一行。

sup 标签设置上标
sub 标签设置下标

del 标签表示删除的内容，自动加删除线
ins 标签表示插入的内容，自动加下划线

需要在页面中编写代码时候：
pre 标签是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code 标签专门用来表示代码，但是会忽略空格
所以一般结合使用code和pre表示代码
*/

/*
3种列表标签
1.无序列表：<ul></ul>，使用<li></li>创建列表项，项前面默认加一个点(有可选值)
	注意：默认的项目符号我们一般都不使用，在不同的浏览器中的显示效果不统一,如果真的需要可以采用为li设置背景图片的方式设置。
	去掉项目符号：
	ul{
		list-style:none;
	}
	ul和li都是块元素

2.有序列表：和无序列表类似，只是用ol代替ul，默认加数字序号作为项目序号，
			设置type="1、a、A、i、I"设置序号形式

3.定义列表：<dl></dl>用来对一些词汇或者内容进行定义解释
	其中的<dt></dt>表示被定义的对象
		<dd></dd>表示定义的内容描述，会有换行缩进

列表之间是可以相互嵌套的，嵌套的列表自动缩进。
*/

/*
文本格式化：
px：像素值设置
百分比：根据父元素计算该值，当父元素发生变化时候，子元素也发生变化，自适应页面适用
em：和百分比类似，1 em=1 font-size，根据字体大小变化，设置字体相关样式时使用
*/

/*
颜色：
1.颜色单词
2.RGB：rgb(红色浓度，绿色浓度，蓝色浓度)，0-255，也可以使用百分比表示
3.使用16进制数：使用三组两位的十六进制数组表示一个颜色，原理上和RGB相同
	三组两位语法：#红色绿色蓝色
	每一组的表示是：00 - ff  
	如果两位两位都重复可以简写，譬如：#0000ff可以写成：#00f
*/

/*
字体样式：
设置字体颜色：
浏览器默认像素是16px

font-size设置的并不是文字本身的大小，而是设置的是文字所存在的看不见的格的大小，字体要比格小一些。字体不同显示效果也不同

font-family可以指定字体
当采用某种字体时如果浏览器支持就采用，如果不采用就用默认值
该样式同时指定多个字体，逗号分开
浏览器优先使用前面的字体，前面的字体不行就看下一个
（华文彩云、arial、微软雅黑）
浏览器中的字体默认就是计算机中的字体，如果计算机中欧就使用，如果没有就不使用。
在开发中，如果字体很奇怪尽量不要使用，有可能用户的电脑中没有

.p1{
color:red;
font-size:20px
font-family：微软雅黑
}
*/

/*
字体的分类：
在网页中将字体分为五大类：
	serif（衬线字体）
	sans-serif（非衬线字体）
	monospace（等宽字体）
	cursive（草书字体）
	fantasy（虚幻字体）
可以将字体设置为大的分类，浏览器会自动在所设置的字体中选择样式

一般将字体的大分类指定为font-family的最后一个
*/

/*
font-style:
可选值：
normal（正常）
italic（斜体）
oblique（倾斜）
大部分浏览器不会对倾斜和斜体进行区别，这两个的效果一样，经常使用italic

fon-weigth：设置字体粗细
可选值：normal、bold等（可以查手册）

font-variant：文本以小型大写字母的显示
可选值：normal、small-caps

可以直接设置字体，用font:italic small-caps bold 60px "微软雅黑";
不同的属性之间使用空格隔开，没有顺序要求，可写可不写，没有写就用默认值。
但是要求文字的大小和字体必须写，字体必须是最后一个样式，大小必须是倒数第二个

使用上面的简写样式可以增加效率
*/

/*
行间距：在CSS中并没有提供一个直接设置行间距的方式
我们只能通过设置行高来间接设置行间距
网页中的字是处在一个看不见的行中
使用line-height来设置行高；也可以接受百分比，是相对于本行字体大小的；也可以接受一个数值，表示倍数，同百分比。
.p{
line-height:40px;
}

行间距=行高-字体大小


对于单行文本，可以将行高设置为和父元素的高度一致，，这样文本可以在父元素中垂直居中
在 font 中也可以指定行高，格式是：字体大小/行高
在font中如果没有指定行高就会使用默认值，如果line-height在font之前设置，而font中没有指明，则line-height之前的值会被默认值覆盖
*/

/*
text-transform可以用来设置文本的大小写
可选值：
	none：默认值，该怎么显示就怎么显示
	capitalize：单词的首字母大写（通过单词边界来判断是否是一个独立的单词）
	uppercase：全部大写
	lowercase：全部小写


text-decoration文本修饰
可选值：
none（默认值）
underline（下划线）
overline（上划线）
line-through（删除线）
blink（文本闪烁）
inherit（从父元素继承）

超链接的文本默认带有下划线，如果想去除超链接的下划线需要手动设置a的text-decoration属性为none或者其他


letter-spacing 设置字符之间的间距，可以给定一个像素值

word-spacing 设置单词之间的距离（这个是找的空格来区分的，所以这个属性对中文段落意义不大）

text-align设置文本对齐方式
可选值：
left：靠左对齐（默认值）
right：靠右对齐
center：居中对齐
justify：两边对齐（通过调整文本之间的空格实现）

text-indent：设置首行缩进，可以给一个像素值，也可以给em值
当给定一个正值时候会向右移动，指定负值会向左移动，可以隐藏一些不想显示的东西
*/

/*
盒子模型：box-model
内容区（content）
内边距（padding）
边框（border）
外边距（margin）


为一个元素设置边框必须指定三个样式（缺一不可）：
border-width：边框的宽度
border-color：边框的颜色
border-style：边框的样式

边框是在盒子的外围加的，width和height设置的是div盒子内容区的大小，盒子的整个大小（可见大小）是由内容区、内边距、边框共同决定的

使用border-width可以指定4个边框的宽度，给border-width四个值分别设置上、右、下、左边框的宽度（顺时针的方向）
如果指定三个值，会给上、左右、下
如果指定两个值，会给上下、左右
如果指定一个值，四个边都是这一个值

除了border-width以外还提供了了border-xxx-width专门设置xxx处的宽度
xxx可以为：上下左右

边框颜色的设置和宽度的设置规则相同，同时也有上下左右的分开设置方式

border-style边框的样式：
可选值：
none：默认值
soild：实线
其余查看手册
也有四个边框的分开设置方式，同设置边框宽度


大部分的浏览器的宽度和颜色都有默认值，但是样式没有默认值。
三个属性的简写样式：
语法：border:10px soild red;
没有任何的顺序要求，空格隔开，border一指定件就是四个边

border-xxx:10px soild red;分别设置四个边的样式
top-right-left-bottom

*/

/*
内边距：指的是盒子的内容区与盒子边框之间的距离，一共有四个内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
padding-top:
padding-right:
padding-bottom:
dadding-left:

直接使用padding设置四个内边距
四个值、三个值、两个值、一个值同设置盒子边框宽度
*/

/*
外边距：当前盒子与其他盒子之间的距离
不会影响可见框的大小但是会影响盒子的位置
盒子有四个方向的外边距：
margin-top:
margin-right:
margin-bottom:
margin-left:

由于页面中的元素都是靠左靠上摆放的，当设置上和左外边距时，会导致盒子自身的位置发生变化，但是当设置右和下外边框时会改变其他盒子的位置

外边距也可以指定一个负值，元素会向反方向移动

margin也可以设置为auto，auto一般只设置给水平方向的margin；
如果只指定左外边距或者右外边距为auto，则会将外边距设置为最大值；
垂直方向设置为auto，则外边距默认是0；
如果左右外边距都设置为auto，则将两侧的外边距设置为相同的值，即在父元素中水平居中


外边距也可以同时设置四个方向的外边距，即
margin:
规则个padding一样
margin:0 auto直接设置居中（给了两个值）

两个相邻垂直方向（兄弟）盒子的元素的外边距可以重叠且可见距离取两者之间最大的
但是如果是父子相邻垂直方向上的情况则设置的子元素的外边距会传递给父元素

*/

/*
默认样式：浏览器为了在页面中没有样式的时候也可以有一个比较好的显示效果，所以为很多元素设置了一些默认的margin和padding，很多情况下的默认样式我们是不需要使用的

所以我们在编写时候要去掉这些默认样式。

使用通配符去除浏览器的默认样式：
*{
margin:0;
}
但是这种方式效率计较第，以后会有更好的方法
*/

/*
内联元素（有多少占多大）的盒子：
内联元素不能设置width和height，设置完没用

内联元素可以设置水平方向的内边距，并且可以影响布局
padding-left、padding-right

内联元素可以设置垂直方向的内边距，但是它不会影响页面布局，即能覆盖掉与其他盒子的重叠部分

内联元素可以设置边框，同内边距水平影响布局，垂直方向不影响页面布局

内联元素水平方向的外边距不会重叠而是求和

内联元素不支持垂直外边距
*/

/*
将一个内联元素变为块元素，或者将块元素变为内联元素

通过display修改元素的类型：
可选值：
	inline:可以将一个元素作为内联元素显示；
	block：可以将一个元素作为块元素显示
	inline-block：将一个元素转换为行内块元素，使一个元素既有行元素的特点，也有内			联元素的特点，可以设置宽和高又不会独占一行
	none：不显示元素并且元素不会再页面中继续占有位置

visibility：可以用来设置元素Dev隐藏和显示的状态
可选值：
visible：默认值，元素会在页面中显示
hidden：元素会隐藏不显示但是仍然会占有位置

*/

/*
子元素是默认存在于父元素的内容区中的，理论上讲子元素的最大等于父元素的内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示
超出父元素的内容我们称之为溢出的内容
父元素默认是将溢出内容在父元素的外面显示
通过overflow可以设置父元素如何处理溢出的内容
可选值：
	visible：默认值，不会对溢出内容做任何处理
	hidden：溢出的内容会被修剪，不会被显示
	scroll：会为父元素添加滚动条，通过拖动滚动条查看内容，该属性不论内容是否溢出		都会添加横竖滚动条
	auto：按照需求添加滚动条

*/

/*
文档流：网页最基础的一层，是最底层，表示的是一个页面中的位置
我们所创建的元素都处在文档流中


元素在文档中的特点：
块元素：
在文档流中独占一行，自上向下排列
块元素在文档流中的宽度是父元素的100%
当元素的高度或者宽度为auto，此时指定内边距不会影响可见框大小，而是自动修正宽度和高度来适应内边距
块元素在文档流中的高度默认被内容撑开

内联元素：
在文档流中只占自身大小，从左向右排列，如果一行中不足以容纳所有的内联元素则换行依然从左向右排列
在文档流中，内联元素的宽度都被内容撑开
*/

/*
浮动：
块元素在文档流中是默认垂直排列的
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值：
	none：默认值，元素默认在文档流中排列
	left：元素会立即脱离文档流，向页面的左侧浮动
	right：元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性设置为非none值），元素会立即脱离文档流，它下面的元素会立即向上移动，元素浮动以后会尽量往左上或者右上浮动直到遇到父元素的内容区的边界或者其他元素

如果浮动元素的上面是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过他上边的兄弟元素，最多最多一边齐

*/

/*
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

在文档流中，子元素的宽度 默认占父元素的全部
当元素设置浮动以后，会完全脱离文档流
块元素脱离文档流后宽度和高度会被内容撑开

开启内联元素的float即脱离文档流会变成块元素，此时设置宽度和高度起作用
*/

/*
高度塌陷：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就有多高
但是当子元素设置浮动以后，子元素会完全脱离文档流
此时会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高度塌陷，则父元素以下的所有元素都会向上移动，这样会导致布局混乱
所以在开发中一定要避免出现高塌陷的问题
我饿么可以将父元素的高度写死，但是一旦高度写死，父元素的高度将不能适应子元素的高度，所以这种方案是不建议使用的。
*/

/*
高度塌陷问题的解决
根据w3c的标准，在页面中元素都有一个隐含的属性叫做：Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的

当元素的BFC以后，元素将具有如下特性：
1.父元素的垂直外边距不会和子元素的重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.父元素开启BFC可以包含浮动的子元素

如何开启元素的BFC：
1.设置元素浮动，使用这种方式会导致父元素的宽度丢失，也会导致下面的元素上移
2.设置元素绝对定位
3.设置元素为inline-block，可以解决问题，但是宽度依然会丢失
4.将元素的overflow设置为一个非visible的值，最好是hidden（推荐方式）

IE6及以下的浏览器不支持BFC，所以使用这种方式不能兼容IE6
在IE6中虽然没有BFC，但是有另一个具有隐含的属性叫做：hasLayout
该属性的作用域BFC类似，所在的IE6浏览器可以通过hasLayout来解决该问题
开启hasLayout的方式：直接使用一种副作用最小的方式：直接将元素（父元素）的zoom设置为即可
zoom表示放大的意思，写几就是放大几倍
zoom:1不放大元素，但是可以开启hasLayout
zoom只在IE浏览器中认识

但是其他浏览器就不行了，只支持IE8以下
如果要求全部兼容就要都写
*/

/*
如果希望清除掉其他元素对当前元素产生的影响，这是可以使用clear来完成功能
clear可以用来清除其他元素对当前元素的影响
可选值：
	none：不清除浮动影响
	left：清除左侧浮动元素对当前元素的影响
	right：清除右侧浮动元素对当前元素的影响
	both：清除两侧浮动元素对当前元素的影响（清除对他影响最大的元素的浮动）

解决高度塌陷的最终方案：
给子元素1声明一个兄弟元素（必须是块元素），编号为子元素2，子元素1浮动，子元素2声明clear:both
使用这种方案虽然会解决问题但是会添加多余结构 

利用after伪类选中父元素
添加一个内容content，再使用display变为块元素
再清除两侧浮动：clear:both
原理与直接添加div相同，但是不会有多余的代码结构出现
这是最推荐的解决高度塌陷的方式，几乎没有副作用

代码：
.clearfix:after{
 content:"";
display:block;
clear:both;
}

但是IE6不支持after伪类，因此还要加一个：
.clearfix{
zoom:1;
}

*/

/*
div.box$*3再按tab键生成3个div，class分别为box1、box2、box3

定位：
就是将指定的元素摆放到页面的任意位置

通过定位可以任意摆放元素

通过position属性来设置元素定位
可选值：
	static：默认值，元素没有开启定位
	relative：开启元素的相对定位
	absolute：开启元素的绝对定位
	fixed：开启元素的固定定位，也是绝对定位的一种


当开启了元素定位时，可以通过left、right、top、bottom四个属性来设置元素的偏移量
通常偏移量只使用两个就可以定义一个元素位置（类比二维平面坐标轴）
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上侧偏移量
bottom：元素相对于其定位位置的下侧偏移量


relative：相对定位
1.当开启了相对定位但没有设置偏移量时候元素不发生任何变化
2.相对于元素在 文档流 中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会将元素提升一个层级，会盖住原文档流中的元素
5.相对定位不会改变元素的性质，块还是块，内联元素还是内联元素（还是在文档流里面）
*/

/*
绝对定位：
当position属性设置为absolute时，则开启了绝对定位
1.开启绝对定位会使元素脱离文档流
2.开启绝对定位以后如果不设置偏移量，则元素的位置不发生变化
3.绝对定位是相对离他最近的开启了定位的祖先元素定位（position的值是非static）
		如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位
		一般情况下，开启了子元素的绝对定位都会同时开启父元素的相对定位
4.绝对定位会使元素提升一个层级
5.决定定位会改变元素的性质，内联元素会变成块元素，块元素的宽度和高度默认被内容撑开
*/

/*
固定定位：
position属性设置为fixed
固定定位也是一种绝对定位，大部分特点都和绝对定位相同
不同的是：
	固定定位永远相对于浏览器窗口进行定位
	固定定位会固定在浏览器窗口的 某个位置，不会随滚动条滚动

IE6不支持固定定位，必须用JS解决
*/

/*
如果定位元素的层级是一样的，（代码）下面的元素会盖住上面的
通过 z-index 的属性可以来设置元素的层级
可以为 z-index 指定一个正整数作为值。该值将作为当前元素的层级
层级越高。越优先显示

对于没有开启定位的元素不能使用 z-index

父元素的层级再高也不会盖住子元素
*/

/*
设置元素的透明背景：
opacity：可以设置元素背景的透明
		他需要一个0-1之间的值
			0表示完全透明，1表示完全不透明

opacity在IE8及以下的浏览器不支持
而需要使用如下属性代替：
filter:alpha(opacity=50)
opacity的值为0-100，设置不透明度，0表示完全透明，100表示完全不透明

这种方式支持IE6，但是这种方式在IE Tester中无法测试

*/

/*
使用background-image设置背景：
语法：
background:url(../img/xxx.jpg);
url里面写的是图片的相对路径
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片小于元素，默认将背景图片平铺（重复）以充满元素

可以同时为一个指定背景颜色和背景图片，背景颜色会作为图片的底色
一般情况下同时指定背景颜色和背景图片


background-repeat：设置背景图片是否重复
可选值：
repeat：默认值，双方向重复，即平铺
no-repeat：不重复，只有一个，有多大就显示多大
repeat-x：背景图片沿水平方向重复
repeat-y：背景图片沿垂直方向重复
渐变色截取一个像素然后重复即可

*/

/*
背景图片默认是贴着左上角显示
background-position：定义背景图片在元素中的位置
可选值：
1.top、left、bottom、center中的两个表示位置，如：top left为左上
       如果只给出一个值则第二值默认为center
2.直接指定两个偏移量（像素），第一个值是水平偏移量，第二个值是垂直偏移量
       如果指定的是一个负值，则会向反方向移动
3.百分比形式（看手册）


background-attachment：用来设置背景图片是否随着页面的滚动而滚动
可选值：
scroll：默认值，背景图片随着窗口滚动
fixed：背景图片固定在窗口的某一位置，不随页面滚动

当背景图片的background-attachment设置为fixed时，背景图片的定位永远相对于浏览器窗口

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
*/

/*
为超链接设置一个背景图片
先将a转换为块元素（或者其他方式）
做出鼠标移入、点击效果：使用伪类hover、active设置不同的图片

缺点：做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不好的用户体验

问题产生原因：背景图片时以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求。但是我们的外部资源并不是同时加载，浏览器会在资源被使用时在会去加载资源。一上来浏览器只会加载link.png。由于hover和active的状态没有马上被触发，所以hover.png和active.png并不是立即加载的。只有触发时才会加载

由于加载图片需要一定的时间，所以在加载和显示过程中会有一段时间背景图片加载不出来


解决方案：
将三个按钮整合为一张图片，然后再通过background-position来切换将要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）

优点：
1.将多个图片整合为一张，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高用户体验
2.将多个图片整合为一张图片时，减小了图片的总大小，提高请求的速度，增加了用户体验 
*/

/*
 background:简写属性，同时设置所有背景相关的样式
没有顺序要求，谁在前谁在后都行，不使用样式就是用默认值
*/

/*
雪碧图PS自己合成
*/

/*
表格就是用来表示一些格式化的数据，比如课程表
创建表格：使用table标签
语法：
<table>
	<tr>
		<td></td>
	</tr>
</table>
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
td中的colspan属性表示横向合并单元格，合并几个单元格属性值就是几
td中的rowspan属性表示纵向合并单元格，合并几个单元格属性值就是几

table是一个块元素
table和td之间默认有一个距离
通过border-spacing属性可以设置这个距离
border-spacing：像素值

border-collapse可以用来设置表格的边框合并
可选值：
collapse：此时的border-spacing属性失效
separate：此时的border-spacing属性生效

如果只想要边框，则只设置border-collapse为collapse并设置td边框属性（像素 类型 颜色）

表头元素：<th></th>
默认是居中加粗

隔行变色,使用伪元素：
tr:nth-child(even/odd){
background-color:#bfa;
}

鼠标选中效果，伪类：
tr:hover{
background-color:#ff0;
}
*/

/*
长表格：
需要将表格分为三个部分：表头、表格的主体、表格底部
HTML中提供了三个标签：
	thead：表头
	tbody：表格主体
	tfoot：表格底部
三个都是table的子标签
<table>
	<thead>
		<th>日期</th>
		<th>收入</th>
		<th>支出</th>
		<th>合计</th>
	</thead>
	<tbody>
		<tr>
			<td>2019-08-06</td>
			<td>200</td>
			<td>300</td>
			<td>400</td>
		</tr>
		...
	<tbody>
	<tfoot>
		<tr>
			<td></td>
			<td></td>
			<td>合计</td>
			<td>100</td>
		</tr>
	</tfoot>
</table>


如果表格中没有写tbody，浏览器会自动添加tbody并且将所有的tr都放到tbody中
所以注意，tr并不是table的子元素，通过大于号无法在table中选中行
*/

/*
以前表格更多的情况是用来布局的，但是这方式已经被CSS淘汰了
表格的列数由td最多的决定
表格是可以嵌套的
*/

/*
完善clearfix：
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
空的div不能隔开父子的外边距，但是空的table可以，阻止外边距重叠
直接加到HTML代码中会增加冗余代码
通过CSS添加：
.box1:before{
content:"";
display:table;
}


可以同时解决父子关系重叠和高度塌陷：
.clearfix:before,.clearfix:after{
content:"";
display:table;
clear:both;
}
*/

/*
表单的作用就是用来将用户信息提交给服务器
使用form创建一个表单
form中的action属性必须指定，该属性指定一个服务器的地址
当我们提交表单时将会提交到action指定的地址中
form创建的仅仅是一个空白的表单，我们需要向form添加不同的表单向
使用input来创建一个文本框
如果希望表单项中的数据会提交到服务器中，还必须给表单向指定一个name属性
name表示提交信息的名字

用户填写的信息会附在url地址后面，以字符串的形式发送给服务器
url?查询字符串
格式：
	属性名=属性值&属性名=属性值&属性名=属性值

在提交按钮中可以通过value属性修改按钮上的文字
在文本框中也可以指定value属性作为默认值
密码框的type是password，也需要指定name属性

<form action="">
	用户名<input type="text" name="username"/>
	<input type="submit" />
</form>
*/

/*
使用input创建单选按钮：
单选按钮通过name属性进行分组，name属性相同的是同一组
像这种需要用户选择但是不需要用户直接填写的内容表单项还必须指定一个value属性，这样被选中的表单项才会最终传送给服务器
<input type="radio"  name="gender" value="male" />

使用input创建多选按钮：
使用name属性分组：
使用value属性设置值
<input type="checkbox" name="xixi" value="lq"/>

使用select创建下拉列表：
在下拉列表中使用option创建一个个列表项
name属性指定给select，value属性指定给option
<select name="star">
	<option value="cxk">蔡徐坤</option>
	<option value="zbs">赵本山</option>
	<option value="Messi">梅西</option>
</select>

如果在单选按钮或者是多选按钮中指定默认选中的选项
	则可以在希望选中的项中添加checked="checked"属性
下拉列表的默认选择是在option中设置：selected="selected"

当给下拉列表添加multiple="multiple"这个下拉列表则变为一个多选的下拉列表
选择的要按着ctrl

在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
optgroup中的属性label=""设置分组名字
*/

/*
使用textarea创建一个文本域
<textarea name="wenben"></textarea>


创建一个重置按钮：
<input type="reset" />

创建一个单纯的按钮：
这个按钮只能被点，结合JS使用
<input type="button" value="按钮"/>

除了使用input，也可以使用button来创建按钮
<button type="submit">提交</button>

将提示文字（类似于“用户名”）的文字放在labelb标签中可以选中这些文字
该标签可以指定一个for属性，该属性可以指定一个表单项的id值
<label for="指定表单项的id">用户名</label>


使用fieldset来为表单项分组
语法：
<fieldset>
	<legend>组名</legend>
	表单项内容
<fieldset>
在fieldset中可以使用legend子标签指定组名

*/

/*
框架集：和内联框架的作用类似，都是用于在一个页面中引入其他的外部页面
	框架集可以同时引入多个页面，而内联框架只能引入一个
	在h5中，推荐使用框架集，而不使用内联框架
使用<frameset></frameset>来创建一个框架
注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不能使用body标签
引入几个页面就写几个frame
frame标签是自结束标签

frameset中的rows属性可以指定框架集中的所有框架，一行一行地排列
		也可以用cols，是按照列排列的
这两个属性必须选择一个，而且必须在属性中指定每一部分所占的大小

frameset中也可以再嵌套frameset

<frameset rows="50%,50%">
	<frame src="xxx.html" />
	<frame src="xxx.html" />
</frameset>

不推荐frameset的原因：和iframe一样，里面的内容都会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它是不能判断里面的内容
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面
每单独加载一个页面，浏览器需要重新发送一次请求，引用几个页面就需要发送几次请求，用户的体验比较差
如果非得用，建议使用frameset，iframe在h5中已经废了
*/

/*
在IE6中对图片png24支持度不高，如果使用的图片的格式是png24，则会导致透明效果无法正常显示
解决方法：
1.使用png8代替png24
   但是图片的清晰度会有所下降
2.使用JavaScript来解决，需要向页面中应用一个外部的JS文件
	在body标签的最后引用外部的JS文件
	<script type="text/javascript" src="xxx.js">
在创建一个新的script标签，并编写一些js代码
	<script type="text/javascript">
		DD_belatePNG.fix("div");
	</script>
*/

/*
条件hack：
有一些情况，有一些代码我们只需要在某些特殊的浏览器中执行
而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决该问题

CSS Hack实际上指的是一个特殊的代码，这段代码只在某些浏览器中可以识别
而其他浏览器不能识别，通过这种方式来为一些浏览器设置特殊的代码

条件hack只对IE浏览器有效，其他浏览器都会将他识别为注释
下面的代码还判断了IE的版本为6
<!--[if IE 6]>
	<p>为了您和家人的安全，远离IE6！！</p>
<![endif]-->
这种方式IE10及以上的浏览已经不支持


IE版本小于9的显示：
<!--[if lt IE 9]>
	<p>为了您和家人的安全，远离IE！！</p>
<![endif]-->
把lt换成gt为大于，lte为小于等于，gte为大于等于，!为非

可以查手册
*/

/*
属性hack：
希望黄色背景只在IE6中生效
方法1：if IE 6方法
方法2：在样式前面添加一个下划线，只有IE6及以下的浏览器才会识别
方法3：在样式前面添加星号（*），只有IE7及以下的浏览器才会识别
方法3：将“\0”写在样式的后面只有IE8及以上的浏览器才会识别


CSS Hack不到万不得已的情况尽量不要使用
还有浏览器hack：在选择器前面加“* html ”则该选择器只有IE6认识（用的很少）
*/