Num.02-CSS

🍓CSS的由来

改变html中混乱的结构和样式，让html专门做结构，CSS则专门做样式，使结构和样式相分离

🍓CSS的定义

CSS通常称为层叠样式表，用于设计html中的样式

🍓CSS的书写规范

1. 选择器与{之间必须有一个空格
2. 属性与：之间没有空格，：与值之间有一个空格
3. 并集选择器，每一个选择器+，应独占一行
4. 选择器的层级嵌套尽量不要超过3层
5. 属性： 值；应独占一行

🍓页面设计步骤

1. 先使用html划分页面结构
2. 后使用CSS加样式

🍓选择器

/**
 1. 标签选择器
  	标签名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
div {
	width: 100px;
	height
}

/**
 2. 类选择器
  	.类名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav {
	width: 100px;
	height
}

/**
 3. id选择器
  	#id {
		属性1:属性值;
		属性2:属性值;
	}
 */
#title {
	width: 100px;
	height
}

/**
 4. 通配符选择器
  	* {
		属性1:属性值;
		属性2:属性值;
	}
 */
* {
	width: 100px;
	height
}

/**
 5. 伪类选择器
  	:类名 {
		属性1:属性值;
		属性2:属性值;
	}
	常用伪类选择器有：
		链接伪类选择器：
			a. link     未访问的链接
		 	b. visited	已访问的链接
		 	c. hover	鼠标移动到链接上
		 	d. active	选定的链接
		 结构伪类选择器：
		 	a. first-child  			选择第一个列
			b. last-child 				选择最后一个列
			c. nth-child(n)				选择第n列
			d. nth-child(even)			选择所有偶数列
			e. nth-child(odd)			选择所有的奇数列
			f. nth-child(n)				选择所有的列（n从0开始）
			g. nth-child(2n)			选择所有的偶数列
			h. nth-child(2n+1)			选择所有的奇数列
			i. nth-last-child(even)		从最后一个开始数，选择所有的偶数列
		目标伪类选择器：
			a. target					
 */
 
 /**
 6. 交集选择器
  	标签名.类名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
div.title {
	width: 100px;
	height
}

 /**
 7. 并集选择器
  	标签名,.类名,#id名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
h1,p,div{
	color: red;
}

 /**
 8. 后代选择器
  	父级选择器名称 子一级选择器名称  子二级选择器名称 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav ul li{
	color: red;
}

 /**
 9. 子元素选择器（注意：子元素选择器必须与后代选择器一起使用，否则单独使用子元素选择器会变成后代选择器的作用）
  	父级选择器名称 > 直属子级选择器名称 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav > li{
	color: red;
}

 /**
 10. 属性选择器
  		a. E[attr] 			存在attr属性即可
  		b. E[attr=val] 		属性值完全等于val
  		c. E[attr*=val] 	属性值包含val并且在任意位置
  		d. E[attr^=val] 	属性值以val打头
  		e. E[attr$=val] 	属性值以val结尾
 */
a[title] {
	color:red;
}

 /**
 11.  伪元素选择器 before 和 after
  	  before 和 after之所以被称为伪元素，因为他们并不是html里面真正所有的元素，但是拥有和html元素相同的属性,相当于在指定的盒子中加了一个行内元素，所以如果想要设置宽高，需要先进行元素转换
 */
div::before {
	content: "this ";
	border: 1px solid red;
	display:inline-block;
	width:100px;
	height:100px;
}
div::after {
	content: " a pan";
	border: 1px solid red;
}

🍓初始化设计

* {
	margin: 0;				/*去除浏览器默认外边距*/
	padding: 0;				/*去除浏览器默认内边距*/
	list-style: none;		/*去除ul标签的默认小点*/
	text-decoration:none;	/*去除a标签链接的默认下划线*/
	outline: none;			/*去除默认轮廓线*/
}

🍓优先级

🍒选择器优先级

选择器	权重
标签选择器	0001
类选择器，伪类选择器	0010
id选择器	0100
行内样式表	1000
！important	∞无穷大

🍒权重的叠加

例如：

div ul li	0 0 0 3
.nav ul li	0 0 1 2
a:hover	0 0 1 1
a:hover	0 0 1 1
.nav a	0 0 1 1
#nav a	0 1 0 1

注意：

1. 权重的数位之间是没有进制的，级别之间不可超越，比如0 0 0 5 + 0 0 0 5 = 0 0 0 1 0而不是0 0 1 0，所以不会存在10个标签选择器跟类选择器的权重一样的情况
2. 子类标签继承父类标签的样式，继承过来的权重为0 0 0 0

🍓字体样式

属性名称	作用	属性值
color	字体颜色	1. 正常的颜色英文字母； 2. rgb代码； 3. rgba代码
font-size	字体大小	具体精确数值，单位px，通常网页中的文字设置为14px
font-family	字体	值监下表“字体名称”，为了兼容各个浏览器，使用多个字体值使用逗号隔开
font-weight	字体加粗	由细到粗：100，200，300，400（normal），500，600，700（bold），800，900
font-style	字体风格	1. normal正常； 2. italic斜体
font	综合设置字体样式	font-style font-weight font-size font-family; 其中不需要设置的属性可以省略，但是font-size和font-family不能省略

字体名称：

字体名称	英文名称	Unicode编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

🍓文章标题

属性名称	值	作用
text-align	left	水平居左
	center	水平居中
	right	水平居右

🍓段落设置

属性名称	值	作用
text-indent	2em	首行缩进两个汉字
line-height	一般比字体大小大8	行间距
letter-spacing	单位是px	汉字间距
word-spacing	单位是px	单词间距
color	rgba()，四个参数，red，green，blue，a为透明度，范围是0~1	设置颜色和透明度
text-shadow	1. 四个参数，阴影水平偏移距离，阴影垂直偏移距离，阴影模糊程度，rgba()，前两个参数必须写，后两个参数可以省略；2. 典型的凹凸文字：凸文字：1px 1px 1px #000, -1px -1px 1px #fff;凹文字：-1px -1px 1px #000, 1px 1px 1px #fff;多值用逗号隔开，指的是上下阴影和左右阴影	设置颜色和透明度和阴影
word-break	normal	对英文单词进行换行，按照浏览器默认换行规则
	break-all	对英文单词进行换行，允许单词拆开换行
	keep-all	对英文单词进行换行，保证单词的完整性，允许在半角空格或者-处换行
white-space	normal	按照浏览器默认换行规则
	nowrap	强制在同一行内显示所有文本，除非遇到br标签
text-overflow	clip	直接裁剪溢出部分
	ellipsis	超出部分用省略号代替显示

注意： 想要使用 text-overflow 属性，必须先设置 white-space 强制一行显示，其次必须有 overflow:hidden 辅助才行

🍓标签的分类

🍒块元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
块元素的特点：

1. 总是从新行开始
2. 高度，行高、外边距以及内边距都可以控制
3. 宽度默认是容器的100%
4. 可以容纳内联元素和其他块元素。

🍒行内元素

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元的特点：

1. 和相邻行内元素在一行上。
2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
3. 默认宽度就是它本身内容的宽度。
4. 行内元素只能容纳文本或则其他行内元素。（<a>特殊）

注意：

1. 行内块元素里面不能再放行内块元素
2. 链接里面不能再放链接

🍒行内块元素

在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对他们设置宽高和对齐属性，这些特殊的标签就叫行内块元素
行内块元素的特点：

1. 和相邻行内元素（行内块）在同一行上，但是之间会有空白缝隙
2. 默认宽度就是它本身内容的宽度
3. 宽度，高度，外边距，内边距都可以控制

🍓转换标签类型

属性名称	值	作用
display	inline	将块级标签转为行内标签
	hotpink	将行内标签转为块级标签
	inline-block	行内标签转换为行内块标签

🍓背景

属性名称	作用	属性值
background-color	设置背景颜色	1. 正常的颜色英文字母； 2. rgb代码； 3. rgba代码
background-image	设置背景图片（默认横向纵向平铺）	url(图片路径)
background-repeat	设置平铺	1. no-repeat不平铺； 2. repeat-x横向平铺； 3. repeat-y纵向平铺； 4. repeat横向纵向平铺； 5. round图片自动缩放适应填满整个容器； 6. space图片以相同的间距平铺填满整个容器
background-position	设置背景图片位置，以容器左上角为参考点	值格式为：x y。 1. 使用方位名词：left，right，top，bottom，center； 2. 使用精确数值，单位是px，代表背景图左上角在容器中的位置
background-attachment	设置背景附着	1. scroll背景图像随对象内容滚动（默认值）； 2. fixed背景图像固定
background-size	设置背景大小	值格式：weight height；也可以是一个值，另外一个值自适应。 1. 精确数值，单位px； 2. 百分比设置； 3. cover图片铺满整个容器，溢出部分会被隐藏，保证图片不会失真，但会造成图片不完整 4. contain缩放图片铺满容器，保证了图片的3完整，但会造成图片失真
background	1. 综合设置背景样式； 2. 设置背景渐变色	1. 综合设置单张图片属性：背景颜色 图片路径 平铺 附着 位置； 2. 综合设置多张图片属性：图片路径1 位置1，图片路径2 位置2，图片路径3 位置3 … 背景颜色；

注意事项：

1. 一个元素可以设置多背景图像
2. 每组属性之间使用，分隔
3. 如果多个背景图片之间存在交集，那么前面的图片就会覆盖后面的图片
4. 为避免背景颜色将图片覆盖，背景颜色通常定义在最后一组

🍒设置背景渐变色

背景渐变色使用函数linear-gradient函数设置，但是函数linear-gradient有一定的兼容性，需要使用浏览器前缀来兼容。

🍅浏览器私有前缀

浏览器前缀	浏览器
-webkit-	Google Chrome，Chrome，Safari，Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer，Edge
-khtml-	Konqueror

🍅背景渐变色

	/*两种颜色的渐变色*/
	background: 浏览器前缀linear-gradient(渐变的起始位置,起始颜色,结束颜色);
	/*多种颜色的渐变色*/
	background: 浏览器前缀linear-gradient(渐变的起始位置,颜色1 0%,颜色2 50%,颜色3 80%,颜色4 100%);
	/*渐变起始位置：
		left
		top
		right
		bottom
		left bottom
		left top
		right bottom
		right top
	*/
	/*demo*/
	background: -webkit-linear-gradient(top,red,green);

🍒精灵技术

🍅精灵技术产生的原因

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图片都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图片作为修饰，当页面中的图像过多时，服务器就会频繁的接收和发送请求，这将大大降低页面的加载速度。

🍅精灵技术的实质

CSS精灵技术就是一种处理网页背景图像的方式，它将一个页面涉及到的所有零星图片都集中到一张大图中去，然后将大图应用于网页，用户访问时只需要向服务器发送一次请求即可。

🍅CSS精灵技术涉及到的属性

属性名称	值	作用
background-image	url(图片地址)	加载背景图
background-repeat	no-repeat	设置平铺，不平铺
background-position	横向偏移量（左减右加） 纵向偏移量（上减下加）	设置图片位置

🍒插入图片和背景图片的区别

• 插入图片的标签：img（行内块标签）
  设置插入图片的大小与设置块标签的大小方式一样，img具备行内块标签的所有属性，可以修改外边距
• 背景图片：属性background
  修改背景图片的大小用的是background-size，调整位置用background-position
  一般情况下背景图片适合做一些小图标，logo，插入图片一般用于产品展示，做动画，显示效果等

🍓链接

属性名称	值	作用
text-decoration	none	没有下划线
	underline	下划线(默认)
	overline	上划线
	line-through	删除线

🍓盒子

🍒盒子边框

属性名称	作用	属性值
border-width	设置边框的宽度	精确值，单位px，不需要边框，设置值为0即可
border-color	设置边框颜色	1. 正常的颜色英文字母； 2. rgb代码； 3. rgba代码
border-style	设置边框样式	1. none没有边框（默认值）； 2. solid边框为单实线（常用）； 3. dashed边框为虚线； 4. dotted边框为点线； 5. double边框为双实线
border	综合设置边框样式	边框宽度 边框样式 边框颜色
border-collapse	合并相重叠的边框，一般用于表格单元格边框的合并	collapse
border-radius	设置圆角边框	a. 一个值：设置的四个角的弧度  1. 精确值，单位px；  2. 百分比，50% 就是圆或椭圆； b. 两个值：第一个值设置的是左上角和右下角的弧度，第二个值设置的是右上角和左下角的弧度； c. 三个值：第一个值设置的是左上角的弧度，第二个值设置的是右上角和左下角的弧度，第三个值设置的右下角的弧度； d. 四个值：从左上角开始顺时针依次设置

🍒盒子内边距

属性名称	作用	属性值
padding-top	设置盒子上内边距	1. 精确值，单位px； 2. 百分比
padding-right	设置盒子右内边距	1. 精确值，单位px； 2. 百分比
padding-bottom	设置盒子下内边距	1. 精确值，单位px； 2. 百分比
padding-left	设置盒子左内边距	1. 精确值，单位px； 2. 百分比
padding	综合设置内边距	a. 一个值：设置的四个方向的内边距； b. 两个值：上下为第一个值，左右为第二个值； c. 三个值：上为第一个值，左右为第二个值，下为第三个值 ； d. 四个值：从上开始，顺时针依次为值

🍒盒子外边距

属性名称	作用	属性值
margin-top	设置盒子上外边距	1. 精确值，单位px； 2. 百分比
margin-right	设置盒子右外边距	1. 精确值，单位px； 2. 百分比
margin-bottom	设置盒子下外边距	1. 精确值，单位px； 2. 百分比
margin-left	设置盒子左外边距	1. 精确值，单位px； 2. 百分比
margin	综合设置外边距	a. 一个值：设置的四个方向的外边距； b. 两个值：上下为第一个值，左右为第二个值； c. 三个值：上为第一个值，左右为第二个值，下为第三个值 ； d. 四个值：从上开始，顺时针依次为值； e. auto：左右的一个特殊值，设置盒子页面居中的

注意：

• auto设置盒子居中首先盒子必须是块级元素，其次必须设置盒子的宽度，否则无效，并上下是没有auto的值的，只有左右有
• 行内元素是只有左右外边距，没有上下外边距的。

🍅外边距合并问题

• 水平盒子之间的外边距是相加的，也就是说另一个盒子的外边距是相对于下面这个线做参照物
  
• 垂直盒子之间的外边距以最大的那个外边距为主
• 当两个盒子嵌套时，指定内盒子的外边距，会导致出现如下情况：
  
  外面的盒子和里面的盒子一起往下移动了，这不是我们所需要的效果，我们需要的是内盒与外盒之间产生边距，外盒保持不动
  解决办法：
  1. 给外盒添加边框，注意是给外盒，给内盒添加是没用的
  2. 给外盒添加1px的内边距
  3. 给外盒添加overflow:hidden
• 当给父级盒子加内边距，子级盒子加外边距，那他们之间的边距是相加的，也就是说子级盒子的外边距的参照物是下面这根线，而不是我们经常误以为的border
  

🍅元素的默认内外边框

不同的浏览器会默认有外边距和内边距的，比如下面谷歌浏览器有默认的外边距，但没有内边距

为了方便控制网页中的元素，制作网页时，会使用如下代码清除默认的内外边距

* {
	padding:0;
	margin:0;
}

🍒盒子的尺寸

如上图所示：
盒子的实际宽度 = width + padding * 2 + border * 2
盒子的实际高度=height + padding * 2 + border * 2
总结： 给盒子设置内边距和边框会使盒子的宽度和高度增大，但是如果一个盒子没有给定宽度或高度或者继承了父亲的宽度或高度的话，则 padding 不会影响本盒子对应的宽度或高度的大小

🍒盒子模型布局稳定性

按照稳定性依次考虑使用下列属性
width > padding > margin
原因：

1. margin 会有外边距合并还有ie6下面margin加倍的bug，所以最后使用
2. padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用
3. width 没有问题，经常使用宽度剩余法，高度剩余法来做。

🍒盒子模型

属性名称	值	作用
box-sizing	content-box	盒子模型的大小由width，height，padding，border-weight决定
	border-box	盒子模型大小由width，height决定

🍒盒子阴影

属性名称	作用	属性值
box-shadow	设置盒子阴影	水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色 阴影位置（inset内阴影；外阴影默认）；其中水平阴影和垂直阴影必须有，值可为负值，其他可选，可以设置多值，用逗号隔开，即上下阴影和左右阴影

🍓浮动

属性名称	值	作用
float	left	元素向左浮动
	right	元素向右浮动
	none	元素不浮动

浮动的特点：
块元素和行内元素添加浮动属性，都将转为行内块元素

🍒清除浮动的需求

清除浮动主要是为了解决父级元素由于没有设置高度，但因为子级元素浮动引起父级元素高度为0的问题。
demo：

	.father {
		border: 1px solid red;
	}
	.father div:first-child {
		height:80px;
		width: 500px;
		background-color: deeppink;
	}
	.father div:last-child {
		height: 100px;
		width: 400px;
		background-color: pink;
	}

如上所示，父级和子级盒子都是标准流，父级盒子未设高度，子集盒子会将父级盒子撑开，但是当给两个子集加上浮动会导致父级标签没有高度了。在很多情况下，我们不方便给父级标签高度，比如新闻，你并不知道新闻里面会有多少字。一般情况下，让里面的内容自动撑开盒子，这种情况下所引起的上述问题用清除浮动解决。

🍒清除浮动的方法

属性名称	值	作用
clear	left	不允许左侧有浮动元素（清除左侧浮动的影响）
	right	不允许右侧有浮动元素（清除浮动的影响）
	both	同时清除左右两侧浮动的影响

🍅额外标签法

在浮动的盒子下面添加一个空盒子，并添加属性 clear ，赋值 both

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.father {
				border: 1px solid red;
			}
			.father div:first-child {
				height:80px;
				width: 500px;
				background-color: deeppink;
				float: left;
			}
			.father div:nth-child(2) {
				height: 100px;
				width: 400px;
				background-color: pink;
				float: left;
			}
			.father div:last-child {
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差，不推荐使用

🍅父级添加 overflow 属性

	.father {
		border: 1px solid red;
		overflow: hidden;  /*overflow的三个值hidden,auto,scroll都可以触发BFC,BFC可以实现清除浮动效果*/
	}
	.father div:first-child {
		height:80px;
		width: 500px;
		background-color: deeppink;
		float: left;
	}
	.father div:nth-child(2) {
		height: 100px;
		width: 400px;
		background-color: pink;
		float: left;
	}

优点：代码简洁
缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

🍅使用after伪元素清除浮动

第一个方法容易改变Html的结构，不推荐使用，本方法通过css在父级元素的后面追加盒子，这样就不会改变html的结构了

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.father {
				border: 1px solid red;
			}
			.father div:first-child {
				height:80px;
				width: 500px;
				background-color: deeppink;
				float: left;
			}
			.father div:nth-child(2) {
				height: 100px;
				width: 400px;
				background-color: pink;
				float: left;
			}
			.clearfix::after {
				content: ".";   /*内容为小点代替,尽量不要为空*/
				display: block;  /*转换为块级元素*/
				height: 0px;	/*高度为0，不要让他撑开父级盒子*/
				visibility: hidden;  /*隐藏盒子*/
				clear: both;	/*清除浮动*/
			}
			.clearfix {	 /* ie6,7浏览器的处理方式*/
				*zoom: 1;  /* * 代表ie6,7能识别的特殊符号 zoom就是ie6,7清除浮动的方法*/
			}
		</style>
	</head>
	<body>
		<div class="father clearfix">
			<div></div>
			<div></div>
		</div>
	</body>

优点：符合闭合浮动思想，结构语义化正确
缺点：由于 IE6-7 不支持 after ，使用 zoom:1 触发 hasLayout

🍅使用 before 和 after 双伪元素清除浮动

	.father {
		border: 1px solid red;
	}
	.father div:first-child {
		height:80px;
		width: 500px;
		background-color: deeppink;
		float: left;
	}
	.father div:nth-child(2) {
		height: 100px;
		width: 400px;
		background-color: pink;
		float: left;
	}
	.clearfix::before,
	.clearfix::after {
		content: "";   
		display: table; 
		clear: both;
	}
	.clearfix {	 /* ie6,7浏览器的处理方式*/
		*zoom: 1;  /* * 代表ie6,7能识别的特殊符号 zoom就是ie6,7清除浮动的方法*/
	}

🍓定位

• 定位是指将页面中的某些内容固定在屏幕的某一个位置，不随页面的滚动而滚动
• 元素的定位属性主要包括定位模式和边偏移两个部分
• 跟浮动一样，当我们元素添加了绝对能定位和固定定位之后，元素模式会发生转换，都转为行内块元素

属性名称	值	作用
position	static	设置定位模式，自动定位（默认定位方式），不脱离标准流
	relative	设置定位模式，相对定位，相对于自身默认位置进行定位，不脱离标准流
	absolute	设置定位模式，绝对定位，相对于其上一个已经定位（static不算）的父元素进行定位，若没有符合条件的父元素，则以浏览器为准对齐，完全脱离标准流
	fixed	设置定位模式，固定定位，相对于浏览器窗口进行定位，完全脱离标准流
top	1. 精确值，单位px； 2. 百分比	设置边偏移，顶端偏移量
bottom	1. 精确值，单位px； 2. 百分比	设置边偏移，底部偏移量
left	1. 精确值，单位px； 2. 百分比	设置边偏移，左侧偏移量
right	1. 精确值，单位px； 2. 百分比	设置边偏移，右侧偏移量
z-index	精确值，没有单位，0是默认值，如果取值越大，定位的元素在层叠元素中越居上；如果取值相同，则根据书写顺序，后来居上；只有相对定位，绝对定位，固定定位模式可以设置该属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性	设置边偏移，右侧偏移量

🍒定位模式

🍅静态定位（static）

静态定位是所有元素默认的定位方式，当 position 属性取值为 static 时，可以将元素定位于静态位置。所谓静态位置就是各个元素在 HTML 文档流中默认的位置，即网页中所有元素默认都是静态定位。
在静态定位模式下，任何边偏移效果都不起作用！一般用于清除定位。

🍅相对定位（relative）

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来所占的位置继续占着

2. 其次每次移动都是以自己的左上角为基点移动

相对定位和浮动的区别：

1. 相对定位是不脱离标准流的，浮动脱离标准流

2. 浮动是为了让多个块级元素在同一行显示，相对定位可以让盒子去我们任何想要去的位置

🍅绝对定位（absolute）

绝对定位是完全脱离标准流的，不占有位置，如果有多个盒子设置的偏移是一样的或者部分区域相重叠，默认情况按文档流顺序 ，后面的盒子将覆盖在前面的盒子之上，可以使用z-index属性进行干预。

🍒子绝父相

1. 相对定位，占有位置，不脱标
2. 绝对定位，不占位置，完全脱标
   子绝父相就是指父级加相对定位，子级加绝对定位，可以保证页面其他元素不会跑到父亲的下面去

🍓显示与隐藏

属性密名称	值	作用	特点
display	none	隐藏	隐藏后不保留位置
	block	显示
visibility	hidden	隐藏	隐藏后保留位置
	visible	显示
overflow	visible	溢出显示
	auto	超出自动显示滚动条，不超出不显示滚动条
	hidden	超出部分直接隐藏
	scroll	不管超不超出都显示滚动条

🍓鼠标样式

属性密名称	值	作用
cursor	default	默认，箭头
	pointer	小手
	hand	与pointer一样，也是小手，但是火狐浏览器不支持
	move	移动
	text	文本

🍓轮廓线

轮廓线在边框外围，当鼠标点击某个元素或者使用tab定位到某个元素，该元素获得焦距，会在元素外围显示包围的线条，表示该元素被选中了 ，默认是有的，一般我们会选择清除 轮廓线

属性名称	作用	属性值
outline-width	设置轮廓线的宽度	精确值，单位px，不需要轮廓线设置值为0即可
outline-color	设置轮廓线的颜色	1. 正常的颜色英文字母； 2. rgb代码； 3. rgba代码
outline-style	设置轮廓线的样式	1. none没有轮廓线（常用）； 2. solid轮廓线为单实线； 3. dashed轮廓线为虚线（默认值）； 4. dotted轮廓线为点线； 5. double轮廓线为双实线
outline	综合设置轮廓线的样式	轮廓线宽度 轮廓线样式 轮廓线颜色

🍓防止拖拽

属性名称	值	作用
resize	none	防止拖拽，一般用于设置textarea文本域元素

🍓居中

属性名称	值	作用
margin	0 auto	盒子水平居中（盒子水平居中还有一种办法就是使用定位）
text-align	center	文字水平居中
line-height	盒子的高度	文字垂直居中
vertical-align	middle	元素旁边的文字按元素的中心线和元素对齐，一般用于图片和文字对齐，表单输入框和提示文字对齐

🍒盒子水平居中的几种方式

注意： 设置盒子居中之前必须指定盒子的宽度

/*方式一：margin*/
div {
	width: 200px;
	height: 100px;
	margin: 0 auto;
}

/*方式二：position*/
div {
	width: 200px;
	height: 100px;
	position: absoult;
	left: 50%;
	transform: translateX(-50%);
}

🍓CSS滑动门技术

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了 CSS 滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见的是各种导航栏的滑动门。
思路：

1. 转换盒子类型为行内块元素，这样可以保证盒子的宽度是由内容撑开的
2. 可以设置高度，但不要给盒子设置宽度，由内边距padding-left来撑开盒子

🍓过渡

属性名称	描述	值
transition-property	要过渡的CSS属性名	例如：width，height，也可以是all，all就是所有的属性都过渡
transition-duration	过渡效果的时间	例如：0.5s
transition-timing-function	过渡曲线	匀速：linear
		逐渐慢下来：ease
		加速：ease-in
		减速：ease-out
		先加速后减速：ease-in-out
transition-delay	过渡效果何时开始	例如：0s
transition	综合设置过渡属性，用于设置四个值，如果要设置的过渡属性有很多，可以用“,”隔开	要过渡的属性 1 花费时间 运动曲线 何时开始,要过渡的属性 2 花费时间 运动曲线 何时开始

🍓动作

动作分平面动作和3D动作。平面动作又分水平移动，垂直移动和旋转。动作跟过渡组合，可以变成动画

属性名称	值	作用
transform	translate(x,y)；x表示水平移动距离，y表示垂直移动距离，可以是精确值，没有单位，也可以是百分数，百分数是参照元素自己的宽高为标准	平面动作，设置盒子水平或垂直移动
	rotate(d)；d表示顺时针旋转角度，单位deg，配合属性transform-origin设置旋转点	平面动作设置盒子顺时针旋转
	translateX(x)；x表示水平移动距离，可以是精确值，没有单位，也可以是百分数，百分数是参照元素自己的宽为标准	平面动作设置盒子沿x轴水平移动
	translateY(x)；x表示垂直移动距离，可以是精确值，没有单位，也可以是百分数，百分数是参照元素自己的高为标准	平面动作设置盒子沿y轴垂直移动
	translate3d(x,y,z)；x表示水平移动距离，y表示垂直移动距离，z表示z轴前后移动距离	3D动作设置盒子沿x，y，z轴运行
	rotateX(d)；d表示顺时针旋转角度，单位deg，配合属性transform-origin设置旋转中心线	3D动作设置盒子沿x轴顺时针旋转
	rotateY(d)；d表示顺时针旋转角度，单位deg，配合属性transform-origin设置旋转中心线	3D动作设置盒子沿y轴顺时针旋转
	rotateZ(d)；d表示顺时针旋转角度，单位deg，配合属性transform-origin设置旋转中心线	3D动作设置盒子沿z轴顺时针旋转
transform-origin	y x；y代表垂直距离，x代表横向距离；还可以写特殊值：left，right，top，bottom，center	平面旋转设置旋转中心点
	单个值； left；right；top；bottom；center	3D旋转设置旋转中心线
perspective	精确值，单位px	给3D动作的元素的父级标签加上该透视属性，可以优化3D动作效果，值越小，效果越明显
backface-visibility	hidden	只要不是正面对着屏幕的就隐藏

🍒3D坐标系

• x轴：左负右正
• y轴：上负下正
• z轴：内负外正

🍓动画

属性名称	值	描述
@keyframes	定义动画
animation	定义动画名称 动画时间 运动曲线 何时开始 播放次数 运动方向	动画综合写法
animation-name	任意合法标识符	定义动画名称
animation-duration	例：2s	动画播放的总时间
animation-timing-function	ease（默认值）	运动曲线：逐渐慢下来
	linear	运动曲线：匀速
	ease-in	运动曲线：加速
	ease-out	运动曲线：减速
	ease-in-out	运动曲线：先加速后减速
animation-delay	例：2s	规定动画开始时间，默认为0s
animation-iteration-count	例：2	规定动画播放次数，默认一次，这是2次
	infinite	规定动画播放次数:无限次
animation-direction	normal（默认）	规定动画播放方向：正方向
	reverse	规定动画播放方向：反方向
	alternate	先正后反，持续交替
	alternate-reverse	先反后正，持续交替
animation-play-state	running（默认值）	规定动画运行
	paused	规定动画停止

🍒案例1

/*定义动画*/
@keyframes go{
	/*运动起始点*/
	from{
		transform: translateX(0);
	}
	/*运动结束点*/
	to{
		transform: translateX(1000px);
	}
}

div {
	width: 100px;
	height: 100px;
	background-color: pink;
	/*引用动画*/
	animation: go 2s ease 0s infinite alternate;	/*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 运动方向;*/
}

🍒案例2

/*定义动画*/
@keyframes go{
	/*运动起始点*/
	0% {
		transform: translate3d(0,0,0);
	}
	25% {
		transform: translate3d(1000px,0,0);
	}
	50% {
		transform: translate3d(1000px,500px,0);
	}
	75% {
		transform: translate3d(0,500px,0);
	}
	/*运动结束点*/
	100% {
		transform: translate3d(0,0,0);
	}
}

div {
	width: 100px;
	height: 100px;
	background-color: pink;
	/*引用动画*/
	animation: go 8s ease 0s infinite alternate;	/*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 运动方向;*/
}

🍓版心和布局流程

🍒版心

版心是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

🍒布局流程

为了提高网页制作效率，布局时通常需要遵循一定的布局流程，具体如下：

1. 确定页面的版心
2. 分析页面中的行模块，以及每个行模块中的列模块，先行后列！
3. 制作HTML页面，CSS文件
4. CSS初始化，然后开始运用盒子模型原理，通过DIV+CSS布局来控制网页的各个模块。

🍓伸缩布局

以前的伸缩布局是百分比的方式调整宽度，可以随着窗口大小的变化而变化，但是如果有了边距等复杂元素，计算会变得非常复杂

🍒伸缩布局的条件

分类	属性名称	值	描述
	display	flex	设置在父盒子上，开启响应式布局
主轴，设置排列方向	flex-direction	row（默认值）	设置在父盒子上，水平排列
		row-reverse	设置在父盒子上，水平倒序排列
		column	设置在父盒子上，垂直排列
		column-reverse	设置在父盒子上，垂直倒序排列
设置单行水平对齐方式	justify-content	flex-start	设置在父盒子上，左边开始排列
		flex-end	设置在父盒子上，右边开始列
		center	设置在父盒子上，水平中间排列
		space-between	设置在父盒子上，左右子元素贴近父元素两边，中间的子元素平分外边距
		space-around	设置在父盒子上，给所有子元素添加平均的外边距
设置单行垂直对齐方式	align-items	flex-start	设置在父盒子上，上边开始排列
		flex-end	设置在父盒子上，下边开始列
		center	设置在父盒子上，垂直中间排列
		stretch	设置在父盒子上，在子元素不提供高度的前提下，可以让子元素拉伸适应父亲的高度相当于 height:100%;
设置单行垂直对齐方式（只针对指定的子盒子）	align-self	所有属性和功能与align-items相同，只是它只针对某一个子盒子	设置在需要针对的子盒子上
设置多行对齐方式	align-content	flex-start	设置在父盒子上，默认值，让子元素在父元素的开头上边线对齐
		flex-end	设置在父盒子上，让子元素在父元素的下边线对齐
		center	设置在父盒子上，让子元素在父元素的中间排列
		space-between	设置在父盒子上，左右子元素贴近父元素两边，中间的子元素平分外边距
		space-around	设置在父盒子上，给所有子元素添加平均的外边距
		stretch	设置在父盒子上，在子元素不提供高度的前提下，可以让子元素拉伸适应父亲的高度相当于 height:100%
控制换行	flex-wrap	nowrap	设置在父盒子上，默认值，强制不换行，收缩在一行显示
		wrap	设置在父盒子上，自适应换行
		wrap-reverse	设置在父盒子上，翻转换行
设置响应式自适应大小	flex	精确值，没有单位	设置在子盒子上，表示子盒子所占的空间大小的份数
设置盒子排列顺序	order	精确值，没有单位，默认值为0	设置在子盒子上，表示子盒子的排序序号，从小到大排序，相同序号按照页面顺序排列，默认都是0，如果想把某个子元素提到前面去，可以设置该属性值为负数

🍒justify-content的效果

查看justify-content效果

🍒align-items的效果

查看align-items效果

🍒align-self的效果

查看align-self效果

🍒align-content效果

查看align-content效果

🍓BFC

🍒什么是BFC

BFC 是一个独立的渲染区域，它规定了父级元素内部的子元素如何布局，与父元素之外的区域毫不相干。

🍒产生BFC的条件

1. 父元素必须是块内元素或链表或表格

   	display:block;
   	display:list-item;
   	display:table;
   

2. 给上面这些类型的元素添加下列属性可以触发BFC
   • float属性不为 none
   • position 为 absolute 或 fixed
   • display 为 inline-block，table-cell，table-caption，flex，inline-flex
   • overflow 不为 visible

🍒BFC元素所具有的特性

1. 在 BFC 中，盒子默认从顶端开始垂直一个接一个的排列
2. 在同一个BFC中，盒子垂直方向的 margin距离为最大的那一个
3. 子盒子与父盒子的margin距离是从 border 的内边缘开始算的
4. BFC 的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
5. 计算 BFC 高度时，自然也会检测到浮动盒子的高度

🍒BFC的作用

1. 清除浮动

2. 解决外边距合并问题

3. 做右侧自适应的盒子，不会与其他盒子产生交集

   demo：

   	<head>
   		<meta charset="UTF-8">
   		<title></title>
   		<style type="text/css">
   			.father {
   				width: 300px;
   				border: 1px solid pink;
   				overflow: auto;
   			}
   			.son1,
   			.son2 {
   				width: 100px;
   				height: 100px;
   				background-color: pink;
   			}
   			.son1 {
   				margin-bottom: 100px;
   			}
   			.son2 {
   				background-color: blueviolet;
   				margin-top: 150px;
   			}
   			.other {
   				/*开启BFC，使son1和son2不在同一个BFC中，这样他们的外边距就是100+150=250*/
   				overflow: hidden;
   			}
   		</style>
   	</head>
   	<body>
   		<div class="father">
   			<div class="other">
   				<div class="son1"></div>
   			</div>
   			<div class="son2"></div>
   		</div>
   	</body>
   

4. 可以使下面的盒子不会与浮动盒子产生交集

   	.father {
   		width: 300px;
   		border: 1px solid pink;
   	}
   	.son1 {
   		width: 100px;
   		height: 100px;
   		background-color: pink;
   		float: left;
   	}
   	.son2 {
   		background-color: plum;
   		overflow: hidden;	/*创建BFC区域*/
   	}
   

   不使用BFC可以实现文字环绕效果：
   
   对son2使用BFC，两个盒子将没有交集
   

🍓CSS3 W3C统一验证工具

网址：http://validator.w3.org/unicorn/
验证步骤：

验证通过：

🍓CSS压缩

CSS压缩的目的是为节约空间和资源
CSS压缩网站：http://tool.chinaz.com/Tools/CssFormat.aspx

🍓旋转轮播图

需要用到的技术：

1. 透视

2. 过渡

3. preserve-3d，让子盒子具有3D效果

   	<head>
   		<meta charset="UTF-8">
   		<title></title>
   		<style type="text/css">
   			body {
   				perspective: 1000px;
   			}
   			div {
   				width: 300px;
   				height: 200px;
   				margin: 100px auto;
   				background: url(img/1.jpg) no-repeat;
   				background-size: cover;
   				position: relative;
   				transform-style: preserve-3d;
   				transition: all 5s linear;
   			}
   			div nav {
   				width: 100%;
   				height: 100%;
   				position: absolute;
   				top: 0;
   				left: 0;
   			}
   			div nav:nth-child(1) {
   				background: url(img/1.jpg) no-repeat;
   				background-size: cover;
   				transform: rotateY(0deg) translateZ(400px);
   			}
   			div nav:nth-child(2) {
   				background: url(img/2.jpg) no-repeat;
   				background-size: cover;
   				transform: rotateY(60deg) translateZ(400px);
   			}
   			div nav:nth-child(3) {
   				background: url(img/3.jpg) no-repeat;
   				background-size: cover;
   				transform: rotateY(120deg) translateZ(400px);
   			}
   			div nav:nth-child(4) {
   				background: url(img/4.jpg) no-repeat;
   				background-size: cover;
   				transform: rotateY(180deg) translateZ(400px);
   			}
   			div nav:nth-child(5) {
   				background: url(img/5.jpg) no-repeat;
   				background-size: cover;
   				transform: rotateY(240deg) translateZ(400px);
   			}
   			div nav:nth-child(6) {
   				background: url(img/6.jpg) no-repeat;
   				background-size: cover;
   				transform: rotateY(300deg) translateZ(400px);
   			}
   			div:hover {
   				transform: rotateY(360deg);
   			}
   		</style>
   	</head>
   	<body>
   		<div>
   			<nav></nav>
   			<nav></nav>
   			<nav></nav>
   			<nav></nav>
   			<nav></nav>
   			<nav></nav>
   		</div>
   	</body>
   

🍓ico图标

默认情况下，我们把ico图标放在系统的根目录下，并使用以下代码将图标引入到我们的页面

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

制作自定义ico图标的地址

🍓网站三大标签

• title：网站标题
• description：网站描述，一般搜索引擎搜出来的结果会显示网站的描述
• Keywords：搜索引擎搜索的关键词所出现的网站

demo：百度网上购物搜索的结果：

<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description"
      content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>