css基础

1.css的发展历程

      从HTML被发明开始，样式就以各种形式存在，不同的浏览器结合他们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

      随着HTML的成长，为了满足页面设计者的需求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变得越来越杂乱，而且HTML页面也越来越臃肿，于是CSS便诞生了。

      CSS用于控制网页的样式和布局, 修饰页面效果，可以配合脚本语言动态的对网页各元素进行格式化，在提升用户体验方面功不可没。

• CSS1： W3C 推荐，CSS1 发布于 1996 年 12 月 17 日。1999 年 1 月 11 日，此推荐被重新修订。

• CSS2：W3C 推荐，CSS2 发布于 1999 年 1 月 11 日。CSS2 添加了对媒介（打印机和听觉设备）和可下载字体的支持。

• CSS3：将 CSS 划分为多个小模块: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局、弹性盒子等。

2.css网页的美容师

     CSS的出现，拯救了混乱的HTML，也拯救了我们web开发者，让我们的网页更加丰富多彩。

     CSS最大的贡献就是：让HTML从样式中脱离苦海，实现了HTML专注做结构，样式使用CSS来实现。

     如果JavaScript是网页的魔法师，那么CSS就是网页的美容师。

3.css初识

    CSS(Cascading Style Sheets的缩写)

    CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

    CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。

4.css样式规则

     使用CSS时，需要了解CSS样式规则，具体格式如下：

     CSS规则主要由两个主要部分构成：选择器，以及一条或多条声明。

      在上面的样式规则中：

          1.选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。

          2.属性和属性值之间以“键值对”的形式出现。

          3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

          4.属性和属性值之间用英文“：”连接。

          5.多个键值对之间使用英文“；”区分。

       示例

h1 {  /*选择器*/
    color: red;	/*声明*/
    font-size: 14px;  /*声明*/
}

5.css引入方式

1.行内样式

    直接在标签的属性中使用style声明，在style属性中添加css声明即可。

    由于要将表现（样式）和内容（结构）混杂在一起，行内样式表会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

<!--在标签内部再嵌套一个内嵌标签来设置样式-->
<h1>这是一个<span style="color: red;">行内样式表</span>的css</h1>

2.内部样式表(内联样式)

    定义在head或body标签中,使用style标签.

    当单个文档需要特殊的样式时，就应该使用内部样式表。

/*内部定义的style样式*/
<style type="text/css">
	h1 {
        background-color: deeppink;
        color: blue;
	}
</style>

3.外部样式表

    定义在外部的css文件中，需要在head中引入相应的css文件

    当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。

（1）html文件中：使用link来导入css文件

/*关联外部的css样式文件*/
<link type="text/css" rel="stylesheet" href="../css/test.css" />

type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。

（2）css文件中：定义CSS样式

h1{
	background-color: rosybrown;
	color: #0000FF;	
}

4.三种样式表总结

样式表样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现结构与样式相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

  3种样式表的优先级：

   1.行内样式表 > 内部样式表 = 外部样式表

   2.当内部样式表和外部样式表同时存在时，采用就近原则来使用样式

6.css字体属性

1.font-size:字号大小

    font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

（1）tips:

         现在网页中普遍使用14px+。

         尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug。

<style>
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 30px;
	}
	p {
		font-size: 14px;
	}
</style>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸，如果父盒子字体大小为16px，1em=16px
px	像素
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

（2）em

         em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相当于浏览器的默认字体尺寸。1em=16px 24px/16px=1.5em

（3）px

          px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WINDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

（4）in

         in：英寸（Inch），绝对长度单位。

（5）cm

         cm：厘米（Centimeter），绝对长度单位。

（6）mm

         mm：毫米（Millimeter），绝对长度单位。

（7）pt

          pt：点（Point），绝对长度单位，是1/72英寸。1in=72pt=96px

     其中：1in = 2.54cm = 25.4 mm = 72pt = 96px = 6em（windows） ；

     容器的大小我们经常用px做单位，字体大小（font-size）很多国内的人使用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。

2.font-family：字体

    font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体都设置为微软雅黑，可以使用如下CSS样式代码：

p {
    font-family:"微软雅黑";
}
/*可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体*/

常用技巧：

1. 各种字体之间必须使用英文状态下的逗号“,”分隔。

2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。例如：font-family: Arial, "微软雅黑"; 。

3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family: "Times New Roman";。

4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3.CSS Unicode字体

    在CSS中设置字体名称，是可以直接写中文的。但是在文件编码（GB2312、utf-8等）不匹配时会产生乱码的错误。xp系统不支持类似“微软雅黑”的中文。

    方案一：可以使用英文来替代，比如：font-family:"Microsoft Yahei"; 。

    方案二：在CSS中直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确解析的。比如：font-family:"\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。

    在Unicode编码表中，中文的 取值范围是\u4e00~\u9fa5

字体名称	英文名称	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

4.font-weight:字体粗细

    字体加粗除了用 b 和 strong 标签外，还可以使用CSS来实现，但CSS是没有语义的。

    font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

<style type="text/css">
	p {
		font-weight: normal;
	}
	div {
		font-weight: bold;
	}
	span {
		font-weight: bolder;
	}
</style>

<p>这是normal的文本</p>
<div>这是bold的文本</div>
<span>这是bolder的文本</span>

5.font-style:字体风格

   字体倾斜除了用 i 和 em 标签外，可以使用CSS实现，但CSS是没有语义的。

   font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

         normal：默认值，浏览器会显示标准的字体样式。

         italic：浏览器会显示斜体的字体样式。

         oblique：浏览器会显示倾斜的字体样式。

<style>
	p {
		font-style: normal;
	}		
	div {
		font-style: italic;
	}		
	span {
		font-style: oblique;
	}
</style>

<p>这是一个段落,正常。</p>
<div>这是一个段落,斜体。</div>
<span>这是一个段落,斜体。</span>

6.font综合设置字体样式

    font属性用于对字体样式进行综合设置，其基本语法如下：

     选择器 {
           font: font-style  font-weight  font-size/line-height  font-family;
       }

     注意：使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
                其中不需要的属性可以省略（取默认值），但必须保留font-size、font-family属性，否则font属性将不起作用。

<style type="text/css">
	p{
		font: italic bold 12px/30px Georgia, serif;
	}
</style>

<p>这是一个设置了字体样式的文本</p>

7.CSS文本属性

1.color 文本颜色

    color属性用于指定文本的颜色，有3种表现形式。

（1）color-name：使用颜色名称，如：red, transparent

（2）hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色

（3）rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, 0.5)

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。a的值使用小数表示

<style type="text/css">
	h1 {
		color: red;
	}
	h2 {
		color: #00ff00;
	}
	h3 {
		color: rgb(0, 0, 255);
	}
</style>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

2.text-align 文本对齐方式

    text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）

<style type="text/css">
	h1 {
		text-align: left;	/*左对齐*/
	}
	h2 {
		text-align: center;	/*居中对齐*/
	}
	h3 {
		text-align: right; /*右对齐*/
	}
	p {
		text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/
	}
</style>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

<p>当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，
我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，
我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，
我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，
我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>

3.text-decoration 文本修饰

    text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：

  （1）none：默认，定义标准的文本，没有任何修饰。

  （2）underline：定义在文本下方的一条线

  （3）overline：定义在文本上方的一条线

  （4）line-through：定义穿过文本的一条线

<style type="text/css">
	h1 {
		text-decoration: none;
	}
	h2 {
		text-decoration: overline;
	}		
	h3 {
		text-decoration: line-through;
	}		
	h4 {
		text-decoration: underline;
	}
	h5 {
		text-decoration: blink;
	}
</style>

4.text-transform 文本转换

    text-transform用于转换文本的大小写（主要用于英文），其取值有：

        none：默认

        capitalize：文本中每个单词以大写字母开头

        uppercase：所有单词字母都大写

        lowercase：所有单词字母都小写

<style>
	h1 {text-transform:uppercase;}
	h2 {text-transform:lowercase;}
	h3 {text-transform:capitalize;}
</style>

5.text-indent 文本缩进

    text-indent 属性规定文本块中首行文本的缩进。取值有：

        数值：表示像素值

        百分比：基于父元素宽度的百分比的缩进。

    注意： 负值是允许的。如果值是负数，将第一行左缩进。

<style>
	p {
        text-indent:50px;
    }
</style>

<!-- 小技巧： 首行缩进2字符使用 2em -->

6.text-shadow 文本阴影

    text-shadow用于设置文本的阴影效果。语法格式是

text-shadow: h-shadow v-shadow blur color;

• h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值

• v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值

• blur：可选。模糊的距离。

• color：可选。阴影的颜色。

<style type="text/css">
	h1 {
		text-shadow: 2px 2px #FF0000;
	}	
	h2 {
		text-shadow: 2px 2px 8px #FF0000;
	}		
	h3 {
		color: white;
		text-shadow: 2px 2px 4px #000000;
	}		
	h4 {
		text-shadow: 0 0 3px #FF0000;
	}
</style>

7.direction文本方向

    direction 用于指定文本的方向。取值如下：

    ltr：默认的，文本方向从左到右 left to right

    rtl：文本方向从右到左。right to left

<style type="text/css">
	p {
		direction: ltr;
	}		
	div {
		direction: rtl;
	}
</style>

8.letter-spacing 字符间距

    letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字

<style>
	h1 {
        letter-spacing:2px;
  	}
	h2 {
      	letter-spacing:-3px;
  	}
</style>

9.word-spacing 字间距

    word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落

<style>
  p { 
      word-spacing:30px;
  }
</style>

10.line-height 行高

      line-height 用于设置文字行与文字行之间的距离。取值如下：

         number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

         length：设置固定的行间距 px em 。

         %：基于当前字体尺寸的百分比行间距。

           注意：一般情况下，行距比字号大7 8像素即可。

<style>
    span {
    	line-height:2;
    }
    p {
        line-height:20px;
    }
    div {
        line-height:100%;
    }
</style>

8.CSS注释

css规则是使用  /*需要注释的内容*/ 进行注释的。例如：
p {
    font-size: 14px;	/*设置字体的大小是14像素*/
}
/* 快捷键 ctrl + / 或者ctrl + shift + /*/

9.基本选择器(重点)

     要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。

1.标签选择器（元素选择器）

    标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

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

    标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

h1 {
    color: red;
}

p {
    color: green;
}

2.id选择器

   id选择器使用“#”进行标识，后面紧跟id名，基本语法格式如下：

   #id名{属性1：属性值1; 属性2：属性值2; ...}

   <标签名 id="id值"></标签名>

   该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本与类选择器相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
	   .lin {			/*类选择器， 在元素中使用class属性*/
		     color: blue;
	    }
	   #xue {			/*id选择器， 在元素中使用id属性*/
		     color: red;
	    }
    </style>
</head>
<body>
    <div class="lin">林黛玉</div>	<!-- 使用类选择器 -->
    <div id="xue">薛宝钗</div>		<!-- 使用id选择器 -->
</body>
</html>

3.类选择器

    类选择器使用“.”（英文点）进行标识，后面紧跟类名，其基本语法格式如下：

    定义：

    .类名{属性1：属性值1; 属性2：属性值2; ...}

    调用：

    <标签名 class="类名"></标签名>

    类选择器最大的优势是可以为元素对象定义单独或相同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
	  .demo {
            color: red;
        }  
    </style>
</head>
<body>
    <div class="demo">这是一个div</div>
</body>
</html>

4.多类名选择器

    我们可以给标签指定多个类名，从而达到更多的选择目的。

<!--在class属性中使用多个类名，表示同时满足多个样式 -->
<div class="font20 red fontWeight">西游记</div> 
<div class="font20">红楼梦</div>
<div class="font14 fontWeight">三国演义</div>
<div class="font14">水浒传</div>

<style>
	.font20 {
		font-size: 20px;
	}
	.font14 {
		font-size: 14px;
	}
	.red {
		color: red;
	}
	.fontWeight {
		font-weight: bold;
	}
</style>

     多类名选择器在后期布局较为复杂的情况下使用较多。

5.id选择器和类选择器区别

    W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

     类选择器（class）好比人的名字，可以重复使用，如：小明、小明

     id选择器（id）好比人的身份证号，是唯一的，不允许重复，只能使用一次。

6.通配符选择器

    通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

    *{属性1：属性值1; 属性2：属性值2; ...}

    例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML元素的默认边距。

* {
    margin: 0;	/*定义外边距*/
    padding: 0;	/*定义内边距*/
}

    通配选择器较少使用。

7.伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

    伪类选择器使用“:”冒号来表示，比如 :link{}

（1）链接伪类选择器

         链接伪类选择器主要针对于a标签

a:link		/*未访问的链接*/
a:visited	/*已访问的链接*/
a:hover		/*鼠标移动到链接上*/
a:active	/*选定的链接*/

注意：

1. a:hover 必须在 a:link 和 a:visited 之后。

2. a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。

所以，写的时候顺序尽量不要颠倒，按照l o v e h a t e来记忆

<style>
	a:link {		/*未访问的链接*/
		font-size: 16px;
		color: grey;
		font-weight: 700;
	}
	a:visited {		/*已访问的链接 表示已经点击过一次的状态*/
		font-size: 16px;
		color: orange;
		font-weight: 700;
	}
	a:hover {		/*鼠标移动到链接上*/
		font-size: 16px;
		color: red;
		font-weight: 700;
	}
	a:active {		/*选定的链接  鼠标点击不松开的状态*/
		font-size: 16px;
		color: blue;
		font-weight: 700;
	}
</style>

   实际工作中，链接伪类选择器使用简写即可

a {		/*a是标签选择器，所有的链接*/
	font-weight: 700;
	font-size: 16px;
	color: grey;
}
a:hover {	/*:hover 是链接伪类选择器 鼠标移动到链接上*/
	color: red;		/*鼠标经过时，文本由原来的灰色变为红色*/
}

（2）结构（位置）伪类选择器（CSS3）

        :first-child 获取第一个子元素

        :last-child 获取最后一个子元素。注意：IE8不支持X:last-child。

        :nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。

        :nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。

p:first-child { /*第一个子元素*/
	color: red;
}
p:last-child { /*最后一个子元素*/
	color: blue;
}
p:nth-child(2) { /*第二个子元素*/
	color: blue;
}
p:nth-last-child(2) { /*倒数第2个子元素*/
	color: pink;
}
p:nth-child(3n) {
	color: purple;
}

• :first-of-type 选择特定元素的第一个子元素

• :last-of-type 选择特定元素的最后一个子元素

• :nth-of-type(n) 只计算父元素中指定的某种类型的子元素

• :nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取

p:first-of-type {	/*第一个p元素*/
	color: red;
}
p:last-of-type {	/*最后一个p元素*/
	color: green;
}
p:nth-of-type(2) {	/*第2个p元素*/
	color: red;
}
p:nth-last-of-type(2) { /*倒数第2个p元素*/
	color: red;
}

• :only-child 匹配没有任何兄弟元素的元素

​

<ol>
  <li>First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>

li:only-child {
  color: red;
  list-style-type: square;
}

• :only-of-type` 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>


p :only-of-type{

}

• :empty 现在的元素里面没有任何的内容或子节点

• :root 匹配文档的根节点

li:only-child {	/*匹配父元素中只有一个子元素*/
	color: blue;
}
p:only-of-type { /*匹配父级中唯一的子元素，如整个文档只有一个p元素*/
	color: green;
}
div:empty {	/*匹配没有内容和子节点的元素*/
	width: 100px;
	height: 50px;
	background-color: red;
}
:root {	/*匹配文档的根元素*/
	background-color: #dde6ef;
}

E:nth-child和E:nth-of-type的区别：

1. E:nth-child ：对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否与E匹配

2. E:nth-of-type：对元素里面指定子元素进行排序，先去匹配，然后再找第n个孩子

为了方便记忆，把CSS的结构伪类选择器归为四类：

1. 通用子元素（不同类型）过滤器：:nth-child(n)（顺序过滤）和 :nth-last-child(n)（逆序过滤）

2. 通用子类型元素（同一类型）过滤器：:nth-of-type(n)（顺序过滤）和 :nth-last-of-type(n)（逆序过滤）

3. 特定位置的子元素：:first-child, :last-child, :first-of-type, :last-of-type

4. 特定状态的元素：:root（根节点）、:only-child（独子元素）、:only-of-type（独子类型元素）、:empty（孤节点）

（3）目标伪类选择器

   :target选择器用于选取页面中的某个target元素。那什么是target元素呢？target元素，说白了就是该元素的id被当做页面的超链接来使用。

          如下示例：当点击个人生活链接时，对应的目标就更改样式

<a href="#live">个人生活</a>

<h2 id="live">个人生活</h2>
<p>
    家庭 刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）。
</p>

:target {
    color:red;
}

10.CSS复合选择器

       复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

1.交集选择器

    交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格，如h1.red。 

记忆技巧：交集选择器是并且的意思，即...又...的意思

注意点：

     1、选择器之间没有任何的连接符号

     2、选择器可以是class，也可以是id，还可以是标签，但标签要放在前面

     比如： p.one 表示选择类名既是.one 且是段落标签。

<style type="text/css">
	p.red {
		color: red;
	}
	p#pink {
		color: pink;
	}
	.red#pink {
		color: blue;
	}
</style>
<p class="red">段落1</p>
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>

2.并集选择器

   并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以使用并集选择器。

  

记忆技巧：并集选择器表示 和 的意思，只要使用逗号分隔，所有选择器都会执行后面的样式。

比如： .one, p, #id {color:red;} 表示.one  p  #id这3个选择器都会执行同一个样式，通常用于集体声明。

<style type="text/css">
	div, 
	p,
	.pig,
	#sanzang {
		color: red;
	}			
</style>
<div>这是一个div</div>
<p>段落</p>
<h1>孙悟空</h1>
<h1 class="pig">猪八戒</h1>
<h2>沙悟净</h2>
<h2 id="sanzang">唐三藏</h2>

3.兄弟选择器

    兄弟选择器是CSS3.0新增的一个选择器，语法格式： A~B 或者 A+B

      ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

      ‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

<head>
    <style>
        div+p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是一个段落</p>
    </div>
    <p>我是相邻的兄弟</p>
    <p>我是一个段落</p>
</body>

<head>
   <style>
        div~p{
            color: red;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>

4.后代选择器

    后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

<style type="text/css">
	div p {
		color: red;
	}
	.wangjianlin p {
		color: green;
	}
	#wang p{
		color: blue;
	}
</style>
<p>王者荣耀</p>

<div>
	<p>王源</p>
</div>

<div class="wangjianlin">
	<p>王思聪</p>
</div>

<div id="wang">
	<p>王宝强</p>
</div>

5.子元素选择器  

    子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接,

<style type="text/css">
	.nav li { /*后代选择器*/
		color: blue;
	}
	.nav > li { /*子元素选择器*/
		color: red;
	}
</style>

/*子级元素选择器会覆盖后代选择器，但是只覆盖了一级菜单（.nav的儿子）*/
<ul class="nav">
	<li>一级菜单
		<ul>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
</ul>

6.伪元素选择器(CSS3)

（1）E::first-letter 块级文本的第一个单词或字

（2）E::first-line 文本的第一行

（3）E::selection 可改变选中文本的样式

         注意：“.”一个点是类选择器， “：”一个冒号是伪类选择器， “::”两个冒号是伪元素选择器。

<style>
  p::first-letter {
	 color: red;
  	 font-size: 50px;
   }
  p::first-line {
	 color: green;
   }
  p::selection {
	 color: blue;
   }
</style>
<h2>锦上添花</h2>
<p>锦上添花，读音：jǐn shàng tiān huā ，汉语成语。释义：意指在美丽的锦织物上再添加鲜花。
比喻略加修饰使美者更美，引申比喻在原有成就的基础上进一步完善。
 出处： 宋 黄庭坚 《了了庵颂》：“又要 涪翁 作颂，且图锦上添花。”
 此外， 清 李渔 《凰求凤·让封》：“三位夫人恭喜贺喜，又做了状元的夫人，又进了簇新的房子，
又释了往常的嫌隙，真个是锦上添花。” 毛泽东 《在延安文艺座谈会上的讲话》二：“对于他们，
第一步需要还不是‘锦上添花’，而是‘雪中送炭’。所以在目前条件下，普及工作的任务更为迫切。”
</p>

（4）E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。

        注意：before与after表示在盒子内部的前端和后端插入内容。

<div>今年</div>

div::before {
	content: "我";
}
div::after {
	content: "18岁";
}

11.CSS三大特性

1.CSS层叠性

    是浏览器处理冲突的一个能力。如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 。

2.CSS继承性

    作用：子元素可以继承父元素的样式。 特殊性：

             并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。

             在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。

             a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。

             h标签的字体大小不能修改，必须对h标签本身进行修改。

3.CSS优先级

（1）什么是优先级？

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

（2）优先级判断

         1、如果使用的是同类型的选择器，那么谁写在后面就听谁的。就近原则

         2、如果使用的是不同类型的选择器，那么会按照选择器的优先级来层叠。

         !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

（3）优先级之!important

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

         1、!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 。

         2、!important必须写在属性值得分号前面，与属性值之间加上一个空格 。

         3、!important前面的感叹号不能省略 。

（4）优先级权重

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

         权重计算规则

       （1）内联样式，如: style=””，权值为1，0，0，0。

       （2）ID选择器，如：#content，权值为0，1，0，0。

       （3）类，伪类和属性选择器，如.content  E:link   E[attr]，权值为0，0，1，0。

       （4）元素选择器和伪元素选择器，如div p   ::before，权值为0，0，0，1。

       （5）通配符、子选择器、相邻选择器等的。如\*、>、+,权值为0，0，0，0。

       （6）继承的样式没有权值。!important的权重最高

<style>
    a {		/*特殊性值：0,0,0,1*/
	color: yellow;	
} 
div a {	/*特殊性值：0,0,0,2*/
	color: green;
} 
.demo a {	/*特殊性值：0,0,1,1*/
	color: black;
} 
.demo input[type="text"] {	/*特殊性值：0,0,2,1*/
	color: blue;	
} 
.demo *[type="text"] {	/*特殊性值：0,0,2,0*/
	color: grey;
} 
#demo a {	/*特殊性值：0,1,0,1*/
	color: orange;
} 
div#demo a {	/*特殊性值：0,1,0,2*/
	color: red;
} 
</style>
<!--适用第1行规则-->
<a href="">第一条应该是黄色</a> 
<div class="demo">
	<!--适用第4、5行规则，第4行优先级高-->
	<input type="text" value="第二条应该是蓝色" />

	<!--适用第2、3行规则，第3行优先级高-->
	<a href="">第三条应该是黑色</a>
</div>
<div id="demo">
	<!--适用第5、6行规则，第6行优先级高-->
	<a href="">第四条应该是红色</a>
</div>

12.CSS书写规范

1.空格规范

  【强制】选择器与 { 之间必须包含空格。

      示例： .nav { }

  【强制】属性名与之后的：之间不允许包含空格， ：与属性值之间必须包含空格。

      示例： font-size: 14px;

2.选择器规范

  【强制】当一个rule包含多个Selector时，每个选择器声明必须独占一行。

.post,
.page,
.comment {
  color: red;
}

  ​​​​​【建议】选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。

.nav ul li ul li a
可以写为：
.nav li a

3.属性规范

  【强制】属性定义必须另起一行。

.selector {
  color: red;
  font-size: 14px;
}

  【强制】属性定义后必须以分号结尾。

.selector {
  color: red;
  font-size: 14px;
  font-family: "Microsoft Yahei";
}

13.标签显示模式

        HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

1.块级元素（block-level）

    每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性，常用于网页布局和网页结构的搭建。

常见块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form>等，其中<div>标签是最典型的块元素。
div非常符合布局，所以通常叫CSS+div布局

   块级元素的特点：

       总是从新行开始

       宽度、高度、外边距以及内边距都可以控制

       宽度默认是容器的100%

       可以容纳内联元素和其他块元素

2.行内元素（inline-level）

   行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。

    行内元素的特点：

       和相邻行内元素在一行上。

       宽、高无效，但水平方向的padding和margin可以设置，垂直方向的无效。

       默认宽度就是它本身内容的宽度。

       行内元素只能容纳文本或其他行内元素（a特殊）。

    注意：

1. 只有文字才能组成段落，因此p标签中不能放块级元素，示例：p标签中放div，查看源代码（有bug）

2. 链接里面不能在放链接。

3.块级元素和行内元素区别

块级元素的特点：

（1）总是从新行开始

（2）宽高、内外边距都可以控制

（3）宽度默认为容器的100%

（4）可以容纳内联元素和其他块元素 文字类的块级标签（p，h1~h6，dt）内部不能嵌套块级标签

行内元素的特点：

（1）和相邻行内元素在一行上

（2）宽高无效，可以设置水平方向的内外边距，垂直方向不可设置。

（3）默认宽度就是它本身内容的宽度

（4）行内元素只能容纳文本和其他行内元素

4.行内块元素（inline-block）

   在行内元素中有几个特殊的标签——<img />、<input />，可以对它们设置宽高和对齐属性，有些资料可能会把它们称为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上，但是之间会有空白间隙。

（2）默认宽度就是它本身内容的宽度。

（3）宽高、内外边距都可以控制。

5.标签显示模式转换 display

    块转行内：display:inline;

    行内转块：display:block;

    块、行内元素转换为行内块：display:inline-block;

<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		display: inline;	/*块级元素转为行内元素，宽高会失效*/
	}
	span {
		width: 100px;
		height: 100px;
		background-color: skyblue;
		display: block;		/*行内元素转为块级元素，可以设置宽高*/
	}
	a {
		width: 50px;
		height: 50px;
		background-color: deeppink;
        /*行内元素转为行内块元素，可以设置宽高，在一行内显示*/
		display: inline-block;	
	}
	p {
		width: 100px;
		height: 100px;
		background-color: red;
        /*块级元素转为行内块元素，可以设置宽高，在一行内显示*/
		display: inline-block;	
	}
</style>

14.CSS背景（background）  

       CSS可以添加背景颜色和背景图片。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）	background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

1.背景颜色（background-color ）

    background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

   指定背景颜色透明时可使用transparent作为属性值。

background-color: red;
background-color: transparent;	/*透明*/

2.背景图片（background-image）

    background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

    提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

background-image: url('图片路径');	/*设置图片显示*/

<style>
   #example1 {
	width: 500px;
	height: 300px;
	background-image: url('../img/a1.PNG');
  }
</style>
<div id="example1"></div>

3.背景平铺（background-repeat）

   设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。

background-repeat: repeat-y; 

值	说明
repeat	背景图像将向垂直和水平方向重复
repeat-x	只有在水平方向会重复背景图像
repeat-y	只有在垂直方向会重复背景图像
no-repeat	不会重复

background-image: url('paper.gif');
background-repeat: no-repeat;

4.背景位置（background-position）

    background-position属性设置背景图像的起始位置

    语法：

/*取值有left、right、top、bottom、center，如果仅指定一个关键字，
  其他值将会是"center"*/
background-position: center; 
background-position: 30% 20%; 
background-position: 50px 100px;

5.背景附着（background-attachment）

    background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

    语法：

background-attachment:fixed;

   属性值：

值	说明
scroll	背景图片随页面的其余部分滚动。默认
fixed	背景图像是固定的

6.背景简写

    background属性的值书写顺序官方并没有强制标准。为了可读性，建议如下：

    background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url('./img/logo.png') repeat-y scroll 50% 0;

7.背景透明（CSS3）

   CSS3支持背景半透明的语法格式：

background: rgba(0, 0, 0, 0.3);

   alpha的取值范围在0~1之间

   同样可以给文字和边框透明，都是使用rgba的格式来写

color: rgba(255, 0, 0, 0.3);
border: 1px solid rgba(255, 0, 0, 0.5);

8.背景缩放（CSS3）

    通过background-size设置背景图片的尺寸。其参数设置如下：

    1.可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）。

     2.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

     3.设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url(../img/blue.jpg);
background-size: 300px 100px;
/*background-size: contain;*/
/*background-size: cover;*/

div {
	width: 500px;
	height: 500px;
	background-color: pink;
	background-image: url(img/boy.png);
	background-size: 300px 100px;
	background-repeat: no-repeat;
}

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

1. 插入图片在更改图片大小时使用属性 width 和 height ，更改图片位置使用 margin 或 padding 盒模型。

2. 背景图片在更改图片大小时使用 background-size 属性，更改图片位置时使用background-position属性。

3. 一般情况下背景图片适合做一些小图标使用，产品展示之类的就用插入图片

<style>
section {
	width: 400px;
	height: 400px;
	border: 1px solid #000;
}
section img {
	width: 300px;	/*插入图片更改大小使用 width 和 height 属性*/
	height: 200px;
	margin-top: 20px;	/*插入图片更改位置可以使用 margin 或 padding 盒模型*/
	margin-left: 50px;
}
			
aside {
	width: 400px;
	height: 400px;
	border: 1px solid goldenrod;
	background: #FFC0CB url(img/blue.jpg) no-repeat;
	background-size: 300px 200px;	/*背景图片更改大小要使用background-size*/
	background-position: 50px 100px; /*背景图片更改位置要使用background-position*/
}

</style>
<section>	<!-- 插入图片 -->
	<img src="img/blue.jpg"/>
	12345	<!-- 插入的图片会将盒子中的文本挤压到图片之后显示-->
</section>

<aside>	<!-- 背景图片 -->
	12345	<!-- 背景图片则是被当成背景使用，文本还是显示在盒子中背景图片之上 -->
</aside>

9.背景颜色渐变（CSS3）

  CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

  CSS3 定义了两种类型的渐变（gradients）：

      线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

      径向渐变（Radial Gradients）- 由它们的中心定义

A、线性渐变

      a. 从上到下的线性渐变

background: linear-gradient(red, blue);

      b. 从左到右的线性渐变

background: linear-gradient(to right, red, yellow, blue, green);

      c. 对角方向的线性渐变

background: linear-gradient(to bottom right, red, blue);

B、径向渐变

 a. 颜色结点均匀分布的径向渐变

background: radial-gradient(red, green, blue);

b. 颜色结点不均匀分布的径向渐变

background: radial-gradient(red 5%, green 10%, blue 50%);

c. 形状为圆形的径向渐变

background: radial-gradient(circle, red, green, blue);

10.凹凸文字

<div class="to">我是凸起的文字</div>
<div class="ao">我是凹下的文字</div>
<style>
body {
	background-color: grey;
	font: bold 6em "micro"
}			
div {
	margin: 30px;
	color: grey;
}	
/*上阴影为黑色#000，下阴影为白色#fff*/
.to {
	text-shadow: -1px -1px 1px white, 1px 1px 1px #000;
}		
.ao {
	text-shadow: -1px -1px 1px #000, 1px 1px 1px white;
}
</style>

11.空心文字

<p>我是空心的文字，酷不酷？</p>

p {
	font-size: 50px;
	/*伪空心元素，与背景色有关*/
	-webkit-text-fill-color: white;
	-webkit-text-stroke-color: blue;
    -webkit-text-stroke-width: 2px;
}

15.盒子模型（CSS重点）

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成

1.盒子模型（Box Model）

2.盒子边框（border）

边框就是元素最外层的包装。CSS边框属性允许你指定一个元素边框的样式和颜色。

语法：

border： border-width  border-style  border-color

• border-width：用于指定边框的粗细。

• border-style：用于定义边框的样式。

• border-color：用于设置边框的颜色。

盒子边框总结表

设置内容	样式属性	常用属性值
上边框	border-top-style: 样式; border-top-width: 宽度; border-top-color: 颜色; border-top: 宽度 样式 颜色;
右边框	border-right-style: 样式; border-right-width: 宽度; border-right-color: 颜色; border-right: 宽度 样式 颜色;
下边框	border-bottom-style: 样式; border-bottom-width: 宽度; border-bottom-color: 颜色; border-bottom: 宽度 样式 颜色;
左边框	border-left-style: 样式; border-left-width: 宽度; border-left-color: 颜色; border-left: 宽度 样式 颜色;
样式综合设置	border-style：上边 [右边 下边 左边]	none无（默认）、solid（单实线） dashed（虚线）、dotted（点线）、 double（双实线）
宽度综合设置	border-width：上边 [右边 下边 左边]	像素值 使用关键字thick、medium（默认值）、 thin
颜色综合设置	border-color：上边 [右边 下边 左边]	颜色名称、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%)
边框综合设置	border: 四边宽度 四边样式 四边颜色

还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

border-style属性可以有1-4个值：

• border-style:dotted solid double dashed;

  • 上边框是 dotted

  • 右边框是 solid

  • 下边框是 double

  • 左边框是 dashed

• border-style:dotted solid double;

  • 上边框是 dotted

  • 左、右边框是 solid

  • 下边框是 double

• border-style:dotted solid;

  • 上、下边框是 dotted

  • 右、左边框是 solid

• border-style:dotted;

  • 四面边框是 dotted

实例：

<p>设置盒子四个边框的颜色</p>

p {
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}

表格的细线边框

table {
	border-collapse: collapse;	/*表示边框合并在一起*/
}

实例：

<table cellpadding="0" cellspacing="0">
	<tr>
		<td>123</td>
		<td>123</td>
		<td>123</td>
	</tr>
	<tr>
		<td>123</td>
		<td>123</td>
		<td>123</td>
	</tr>
</table>

table {
	width: 700px;
	height: 500px;
	border: 1px solid deeppink;
	border-collapse: collapse;  /*合并单元格的线*/
}
td {
	border: 1px solid deeppink;
}

圆角边框（CSS3）：

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。radius 半径（距离）

语法格式：

border-radius： 左上角  右上角  右下角  左下角;	  /*4个值*/
border-radius： 左上角  右上/左下  右下角;	   		/*3个值*/
border-radius： 左上/右下  右上/左下;			 /*2个值*/
border-radius： 四个圆角值相同;					  /*1个值*/

实例：

#rcorners {
    border-radius: 5px 50px;
    background: #8AC007;
    width: 200px;
    height: 150px; 
} 

3.内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top: 上内边距

padding-right: 右内边距

padding-bottom: 下内边距

padding-left: 左内边距

padding: 上右下左内边距

注意：属性后面的数值可变，表示不同的含义。

值的个数	表达意思
1个值	padding: 四周内边距
2个值	padding: 上下、左右内边距
3个值	padding: 上、左右、下内边距
4个值	padding: 上、下、左、右内边距

4.外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top: 上外边距

margin-right: 右外边距

margin-bottom: 下外边距

margin-left: 左外边距

margin: 上 右 下 左

注意：行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距。

（1）外边距实现盒子居中

  可以让一个盒子实现水平居中，需要满足两个条件：

  1、必须是块级元素。

  2、盒子必须指定了宽度。

   只需要给左右的外边距都设置为auto，就可以使块级元素水平居中。

   实际工作中常用这种方式来进行网页布局，示例如下：

.header {
	width: 960px;
  	margin: 0 auto;	/*表示上下外边距为0，左右水平居中*/
}

（2）清除元素的默认内外边距

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

* {
	padding: 0;	/*清除内边距*/
  	margin: 0;	/*清除外边距*/
}

    需要注意的是：行内元素只有左右内外边距，是没有上下内外边距的。

（3）文字水平居中和盒子水平居中

<div id="box1">
	这是一个div盒子
</div>

div {
	width: 300px;
	height: 200px;
	border: 1px solid deeppink;
	margin: 0 auto;	/*盒子居中使用 margin */
	text-align: center;	/*文本居中使用 text-align*/
}

5.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

（1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom与margin-top之和，而是取两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）。

（2）嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及上边框，则父元素的上外边距会与子元素的上外边距合并，合并后的外边距为两者中的较大者。即使父元素的上外边距为0，也会发生合并。

解决方案：

1.可以为父元素定义1像素的上边框border或上内边距padding

2.可以为父元素添加overflow: hidden;

6.盒子模型布局的稳定性

优先使用宽度（width），其次使用内边距（padding），最后使用外边距（margin）
width > padding > margin

原因：

1.margin会有外边距合并，还有在ie6下margin容易出bug。

2.padding会影响盒子大小，需要进行加减计算。box-sizing:border-box;

3.width没有问题。我们经常用宽度剩余法 、 高度剩余法来做

7.盒子阴影

语法格式：box-shadow: 水平位置  垂直位置  模糊距离  阴影尺寸（影子大小）  阴影颜色  内/外阴影;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影（outset）改为内部阴影

外部阴影是默认的，不能写。想要内部阴影inset

 .box {
            width: 200px;
            height: 200px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            transform: translate3d(0, -2px, 0);
        }

16.浮动（Float）

1.什么是文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

元素在文档流中的特点：

块元素：

块元素在文档流中会独占一行，块元素会自上向下排列

行内元素：

行内元素在文档流中只占自身的大小，会默认从左向右排列

2.什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版。

在CSS中，通过float属性来定义浮动，其基本语法如下：

选择器 {
    float: 属性值;
}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

Float（浮动），最早用来控制图片，以便其他元素（特别是文字）实现环绕图片的效果，但它在布局时一样非常有用。

3.浮动的特点

（1）浮动会脱离标准流

如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断

（2）浮动会影响元素的显示方式

浮动后的行内元素是可以设置宽高 ，块级元素是内容的宽高，说白了会改变他的模式display为inline-block

float就是隐性的把内联元素转化为块元素，这是对内部的特性就是有物理特性，但是他不占据一行。对外是内联元素的属性

17.常见的布局

1.布局流程

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

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

18.定位

1.元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分

（1）边偏移

边偏移属性	描述
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
top	顶端偏移量，定义元素相对于其父元素上边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

定位要与边偏移一起搭配使用，如top: 100px; left:30px;

（2）定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法如下：

选择器 {
    position:  属性值;
}

position属性的常用值

属性值	描述
static	默认值，自动定位。
relative	相对位置，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口是固定位置

2.静态定位static

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

在静态定位状态下，无法通过偏移属性（top、bottom、left、right）来改变元素的位置。

一般用来清除定位，比如一个原来有定位的盒子，不写定位了，就可以加static

3.相对定位relative

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

示例：如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

4.绝对定位absolute

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块(父元素)定位，包含块可能是文档中的另一个元素或者是初始包含块（body）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。 脱标

绝对定位的元素相对于最近一级已经定位的父元素来定位 （相对于定位的父元素来移动）

普通流中其它元素的布局就像绝对定位的元素不存在一样：

注意：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

• 父级没有定位

  父亲没有定位,孩子以浏览器为基准点对齐

• 父级有定位

  父亲有定位，则以父亲为基准点对齐

• 子绝父相

  意思是：子级是绝对定位的话，父级要用相对定位。

  子绝父相的由来：

  相对定位 占有位置 不脱标

  绝对定位 不占有位置 完全脱标

实例：用定位实现盒子的水平/垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
<style>
    .fa{
        height: 400px;
        width: 400px;
        border: 1px solid black;
        position: relative;
    }
    .fa .son{
        height: 200px;
        width: 200px;
        border: 1px solid black;
        position: absolute;
        left: 100px;
        top: 100px;
        /* margin-top: 100px; */
        /* margin-left: -100px; */
    }
</style>
</html>

5.固定定位

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

6.叠放次序（z-index）

当多个元素同时设置定位时，定位元素之间有可能发生重叠。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。 z-index的值越大，元素越靠上

<h1>This is a heading</h1>
<img src="./img/a0.png" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

img {
	position:absolute;
	left:0px;
	top:0px;
	z-index: -1;
}

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index层叠等级属性，其取值可为正整数、负整数、0.

注意：

1. z-index的默认值是auto，同级元素越靠后，定位元素在层叠元素中越靠上；

2. z-index嵌套关系

   ① 父级z-index为auto时,子元素在z-index正负值上才会与父元素产生层叠效果

   ③ 不同父元素且父元素设置z-index情况下，子元素依照自己父元素的z-index发生层叠（即“拼爹”）；

   ④ 在上一条情况的基础上，修改子元素的z-index只会影响该子元素的层叠效果，对父元素不产生影响；

3. 如果取值相同，根据书写顺序，后来者居上。

4. 数字后面不能加单位。

5. 只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。

6. flex盒子的子元素也可以设置z-index属性(后面了解)

19.CSS3转换transform

CSS3 转换是使元素改变形状、尺寸和位置的一种效果。 转换可以对元素进行移动、缩放、旋转、拉长或拉伸。

1.2D转换

2D转换表现在平面上，主要方法有：

（1）translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <style>
        .box{
            height: 100px;
            width: 100px;
            background-color: aqua;
            transform: translate(100px,100px);/*向右移动100px，向下移动100px*/
        }
    </style>
</body>
</html>

特点：

1. translate最大的优点：不会影响其他元素的位置

2. translate中的百分比单位是相对于自身元素的transform: translate(50%,50%);

3. 对行内标签没有效果

（2）rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 需要带单位deg

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div></div>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: aqua;
            transform: rotate(30deg);
            /* -ms-transform: rotate(30deg); IE 9 */
            /* -webkit-transform: rotate(30deg); Safari and Chrome */
        }
    </style>
</body>

</html>

（3）scale() 该元素放大或缩小的大小，取决于宽度（X轴）和高度（Y轴）的参数 ，正数表示放大，小数表示缩小。

div {
    transform: scale(2,3); /* 标准语法 */
    -ms-transform:scale(2,3); /* IE 9 */
	-webkit-transform: scale(2,3); /* Safari */
}

（4）skew() 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div {
	transform: skew(30deg,20deg);
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

2.3D转换

    透视原理： 近大远小 。

（1）translate()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 200px;
            width: 200px;
            background-color: aqua;
            transform: translate3d(100px, 100px, 100px); 
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

20.CSS3过渡 transition

1.如何实现

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。使用transition来实现。

格式： transition:要过渡的属性 花费时间 运动曲线 何时开始

（1）属性（必须）：想要变化的css属性，宽度高度，背景颜色，内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以

（2）花费时间（必须）：单位是秒（必须写单位） 比如0.5s

（3）运动曲线：单位是ease（可以省略）

（4）何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: aqua;
            transition: all 2s;
            -webkit-transition: all 2s;
        }
        div:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

</html>

2.多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: aqua;
            transition: width 2s, height 2s, transform 2s;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
        }

         div:hover {
            width: 300px;
            height: 300px;
        } 
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

3.过渡元素

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

transition-timing-function属性值如下表：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

21.CSS3动画 animation

动画是使元素从一种样式逐渐变化为另一种样式的效果， 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

1.基本使用

（1）语法from to（2）案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            animation: mymove 5s;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        /*@keyframes是关键字不能更改  name是自定义的变量*/
        @keyframes mymove {
            from {
                left: 0px;
            }
            to {
                left: 600px;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

2.动画运动

animation-timing-function 规定动画的速度曲线。 animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

（1）linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

（2）ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

（3）ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

（4）ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

（5）ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

（6）cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-timing-function: cubic-bezier(0,.99,.22,1);

在应用 CSS3 渐变/动画时，有个控制时间的属性 <animation-timing-function> 。它的取值中除了常用到的 贝萨尔曲线以外，还有个让人比较困惑的 steps() 函数。

steps(n，start/end) 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

3.动画延时

animation-delay 属性定义动画什么时候开始。

/*延迟2s,只有第一次会延迟*/
animation-delay:2s;

4、循环次数animation-iteration-count

/*循环3次 */
animation-iteration-count：3;
/*无限循环 */
animation-iteration-count：infinite;