【前端基础】12.CSS 基础知识学习——基本语法结构

视频

一，css基本规则规范

1.快捷方式

快捷方式可以快速提高我们代码的书写方式。
1.生成标签。直接输入标签名，按tab键即可。比如div然后tab键，就可以生成<div></div>。
2.如果想要生成多个相同标签，加上 * 就可以了，比如 div*3就可以快速生成3个div。
3.如果有父子关系的标签，用 “+” 就可以了，比如 div+p 。
4.如果生成带有类名或者id名字的 .demo 或者 #two tab键就可以了。

2.css注释

 /*   快捷键：control+"\"  */

3.css命名规范

例：

c-orange{
		color:orange;/*见名知义*/
	}

小技巧：
（1）长名称或词组可以使用中横线来为选择器命名。
（2）不建议使用 “_" 下划线来命名css选择器。
（3）不要使用纯数字和中文来命名，尽量使用英文字母来表示。

举例：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：siderbar
栏目：column
页面，外围控制整体，布局宽度：wrapper
左，右，中：left right center
登陆条：bginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer

4.css书写规范

（1）空格规范

【强制】选择器与 { 之间必须包含空格。
    实例：.selector { }
【强制】属性名与之后的 : 之间不允许包含空格，：与属性值之间必须包含空格
    实例：font-size: 12px;

（2）选择器规范

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

/*good*/
.post,
.page,
.comment{
	line-height:1.5;
}

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

.nav li a {
	color: red;
}

<div class="nav">
	<ul>
		<li> <a href="#">1</a> </li>
	</ul>
</div>

（3）属性规范

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

.selector{
	margin:0;
	padding:0;
}

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

.selector{
	margin:0;
}

5.css样式规则

CSS（Cascading Style Sheets)，css样式表或层叠样式表（级联样式表）。
样式规则：
在上面的样式规则中：
1.选择器用于css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以 “ 键值对 ” 的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。
4.属性和属性值之间用英文 “ ：” 连接。
5.多个“键值对”之间用英文“ ；”进行区分

二，字体样式

1.font-size: 字号大小

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2.font-family：字体

（1）font-family基本结构

font-family: "microft yahei"; /* 默认*/

技巧：
1.现在网页中普遍使用14px+。
2.尽量使用偶数的数字字号，ie6等老式浏览器支持奇数点有bug。
3.各种字体之间必须使用英文状态下的逗号隔开。
4.中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5.如果字体名中包含空格，#，$ 等符号，则该字体必须加英文状态下的单引号或双引号，例如：

font-family:"Times New Roman";

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

（2）.css Unicode字体

字体名称	英文名称	Unicode编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun
黑体	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\6F53

我们以后尽量只写unicode字体，写宋体和微软雅黑

3.font-weight:字体粗细

字体加粗除了b和strong，还可以用css来实现。
取值：
normal：
正常的字体。相当于数字值400
bold：
粗体。相当于数字值700。
bolder：
定义比继承值更重的值
lighter：
定义比继承值更轻的值
：
用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

小技巧：数字400等价于normal，而700等价于bold,但是我们更喜欢用数字来表示。

strong{
		font-weight:normal; /*让粗体的字体变得不加粗*/
	}

4.font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用 css 来实现。
取值：
normal：
指定文本字体样式为正常的字体
italic：
指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique：
指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

em{
		font-style:normal;/*让斜体变得不倾斜*/
	}

5.font:综合设置样式（重点）

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

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

三，选择器

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

如上；

2.类选择器

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
标签调用的时候用class="类名"即可

.mingren{
color:orange;/*声明类样式*/
	}

<div class="mingren">鸣人</div>
<!--引用类样式-->

3.多类名选择器

        .font20{
            font-size: 20px;
        }
        .font14{
            font-size:14px;
        }
        .pink{
            color: pink;
        }

	 <div class="font20 pink">亚瑟</div>
    <div class="font20">刘备</div>
    <div class="font14 pink">安琪拉</div>
    <div class="font14">貂蝉</div>

注意：
1.样式显示效果跟HTML元素中的类名先后顺序没有关系，与css样式书写的上下顺序有关。
2.各个类名中间用空格隔开。

4.ID选择器

        #big{
            color: red;
            /* id选择器和类选择器结合记忆 */
        }  

 <div id="big">亚瑟</div>

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

总结：类选择器和id选择器的区别就是在使用次数上。

     .red{
            color: red;
            /* 类选择器是可以重复多长使用的，类似于人名 */
        }
        #pink{
            color:pink;
            /* id类类似于身份证号,是唯一的,只允许使用一次 */
        }

    <div class="red">张三</div>
    <div id="pink">张三峰</div>
    <div class="red">张三疯</div>

6.通识符选择器

      *{
            color:pink;
            /* 代表所有的选择器 */
        }

7.伪类选择器

向某些选择器添加效果。
类选择器是一个点，比如.demo{ }
而伪类用两个点，就是冒号比如：link{ }

（1）链接伪类选择器

链接伪类选择器基本结构
主要针对a;

:link       未访问的链接
:visited    已访问的链接
:hover      鼠标移动到链接上
:active     选定的链接，当我们点击不松开鼠标显示的状态

     a:link{
          color:green;
      }
      a:visited{
          color:orange;
      }
      a:hover{
          color: red;
      }
      a:active{
          color: blue;
      }

 <a href="#" >秒杀</a>

注意写的时候，它们的顺序尽量不要颠倒，按照lvha的顺序。
记忆法：love hate 爱上了讨厌。

链接伪类选择器简写

  a{
          font-weight: 700;
          font-size: 16px;
          color: grey;
      }
      a:hover{
          color: red;
          /* hover是链接伪类选择器,鼠标经过的时候,由原来的灰色变成红色 */
      }

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

基本用法：

：first-child: 选取属于其父元素的首个子元素的指定选择器。
: last-child:  选取属于其父元素的最后一个子元素的指定选择器。
: nth-child(n):匹配属于其父元素的第N个子元素，不论元素的类型。
:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每一个元素，不论元素的类型，从最后一个字元素开始计数。

     li:first-child{
         color: pink;
     }
     li:last-child{
         color: purple;
     }
     li:nth-child(4){
         color: skyblue;
     }

     <ul>
         <li>第一个孩子</li>
         <li>第二个孩子</li>
         <li>第三个孩子</li>
         <li>第四个孩子</li>
         <li>第五个孩子</li>
     </ul>

关键词：even偶数 odd奇数

even:可以选择所有的odd奇数的孩子标签
odd:可以选择所有的even偶数的孩子标签

     li:nth-child(odd){
         color: red;/*可以选择所有的odd奇数的孩子标签*/
     }
     li:nth-child(even){
         color: skyblue;/*可以选择所有的even偶数的孩子标签*/
     }

公式：依据于n从0开始计算：

如果是2n:

     li:nth-child(n){
         /* 所有 */
         color: red;
     }
     li:nth-child(2n){
         /* 2n */
         color: skyblue;
     }

    li:nth-child(2n+1){
         /* 2n */
         color: skyblue;
     }

（3）目标伪类选择器

.target目标伪类选择器，选择器可用于选取当前活动的目标元素。

 :target{
           color :red;
       }

<h2>目录</h2>
  1 早年经历<br/>
  <a href="#movie">2 演艺经历</a>

  <h3>早年经历</h3>
  <hr/>
  刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。早年刘德华刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。
早年刘德华刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。
早年刘德华刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。
早年刘德华刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。
早年刘德华刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。
早年刘德华刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。
早年刘德华刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [17]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [18]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [19]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [20]  。
早年刘德华
    <h3 id="movie">演艺经历</h3>
    <hr/>
    1981年，刘德华考进第10期无线电视艺员训练班。同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙；该剧获得美国电视节电视剧特别奖 [21]  。1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [22]  。同年在喜剧《花艇小英雄》中饰演败家仔钱日添。12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注 [23]  。1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过 [24]  ；该剧在香港播出后取得62点的收视纪录。同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将” [25]  。

四，css外观属性

1.color文本属性

 .red{
        color: red;
    }
    li:nth-child(2){
        color:#f60;
        /* 
        以后颜色尽量是十六进制,我们提倡简写格式,
        #ffffff---#fff,#00ff00---#0f0,#ff00fe---不可简写
         */
    }
    #rgb{
        color:rgb(203,35,224);
    }

 <h3>color属性用于定义文本的颜色,其取值方式有如下3种</h3>
    <ol>
        <li class="red">预定义的颜色值,如red,green,blue等</li>
        <li>十六进制,如#FF0000,#FF6600,#29D794等.十六进制是最常用的定义颜色的方式</li>
        <!-- 常用 -->
        <li id="rgb">RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,1%)</li>
    </ol>

2.line-height:行间距

line-height 属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高，line-height 常用的属性值单位有3种，分别为像素px，相对值em 和百分比 %，实际工作中使用最多的是像素px。
一般情况下，行距比字号大7,8个像素左右就可以了。

	p{
		line-height:26px;
	}

3.text-align:水平对齐方式

left : 左对齐（默认值）
right :右对齐
center :居中对齐

	h3{
		text-align:center;
	}

4.text-indent:首行缩进设置

建议使用em（字符宽度的倍数）单位。
1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度。

	p{
		text-indent:2em;/*2em就是2个汉字的宽度*/
	}

5.letter-spacing:字间距

其属性值可以是不同单位的数值，允许使用负值，默认为normal。

	div{
		letter-spacing:2px;
	}

6.word-spacing:单词间距

针对英文，中文无效

	p{
		word-spacing:10px;
	}

7.颜色半透明（css3）

h1{
		color:rgba(r,g,b,a);
	}

a是alpha透明的意思，取值范围在0~1之间，color:rgba(0,0,0,0.3)
4个参数，不能省略。

	h1{
		color:rgba(0,0,0,0.3);
	}

8.文字阴影（css)

text-shadow:水平位置  垂直位置  模糊距离  阴影颜色

值	描述
h-shadow	必需。水平阴影的位置。允许为负值 。
v-shadow	必需。垂直阴影的位置。允许为负值。
blur	可选。模糊的距离
color	可选。阴影的颜色

前两项是必须写的。后两项可选。

例：

	h1{
		text-shadow:5px 11px 3px rgba(0,0,0,0.4);
	}

五，css样式表（书写位置）

1.内部样式表（内嵌式）

内嵌式是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
	<style type="text/css">
		选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
	</style>
</head>

语法中，style标签一般位于head标签中，title标签之后，也可以把他放在HTML文档的任何位置。
type=“text/css” 在html中可以省略。

2.行内式（内联样式）

内联样式，又有人称为行内样式，行间样式，内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3;">内容</标签名>

语法中style是标签的属性，实际上任何HTML标签都用于style属性，用来设置行内式。其属性和值的书写规范与css样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
	<link href="css文件的路径” type="text/css" rel="stylesheet"/>
</head>

注意：link是个单标签！！！
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
href:定义所链接外部样式表文件的url,可以是相对路径，也可以是绝对路径。
type:定义链接文档的类型，在这里需要指定为 “text/css”, 表示链接的外部文件为css样式表。
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为"style sheet",表示被链接的文档是一个样式表文件。

4.三种样式表总结

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

六，标签显示模式(display)

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

1，块级元素(block-level)

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

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

2.行内元素（inline-level)

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

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

注意：
1.只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签，里面不能放其他块级元素。
2.链接里面不能再放链接。

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

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

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

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

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

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

5.显示模式转换—display

块转行内：display:inline
行内转块：display:block
块，行内元素转成行内块：display:inline-block
此阶段，我们只需关心这三个，其他的是我们后面的工作。

七，复合选择器

1.交集选择器

例：

p.red{
	font-size:30px;
}

<p class="red">小强</p>

记忆技巧：
交集选择器是并且的意思，既…又…的意思，用的相对来说比较少，不太建议使用。

2.并集选择器

div,p{
	color:red;
}

<div>刘德华</div>
<p>张学友</P>

记忆技巧：
并集选择器是 和 的意思，就是说。只要逗号隔开的，所有的选择器都会执行后面样式。

比如 .one,p,#test{color:#F00;} 表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

3.后代选择器

把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成后代标签的后代。

div p {
	color:pink;/*只要是他的后代，不管是儿子还是孙子都要选上*/
}

.nav ul li a {
	color:skyblue;
}

<div>
	<p>小王</p>
</div>

4.子元素选择器

.nav > li {
	color: green;/*只选择亲儿子，不包括孙子，重孙子之类*/
}

<ul class="nav">
	<li>一级菜单
		<ul>
			<li>二级菜单
		</ul>
	</li>
</ul>

5.属性选择器

选择器	含义
E[attr]	存在attr属性即可
E[attr=val]	属性值完全等于val
E[attr*=val]	属性值包含val字符并且在“任意”位置
E[attr^=val]	属性值包含val字符并且在“开始”位置
E[attr$=val]	属性值包含val字符并且在“结束”位置

a[title] {
	color:red;/*属性选择器用中括号来表示*/
}

input[type=text]{
	color:red;
}

div[class^=font]{
	color:pink;/* class^=font 表示 font 开始位置就行 */
}

div[class$=footer]{
	color:blue;/* class$=footer 表示 footer 结束位置就行了 */
}

div[class*=tao]{
	color:green;/* *= 表示tao在任意位置就可以了*/
}

<a href="#" title="我是百度">百度</a>
<a href="#">网易</a>

<input type="text" value="文本框">
<input type="submit">

<div class="font12">1</div>
<div class="sub-footer">2</div>
<div class="news-tao-nav">3</div>

6.伪元素选择器（css3）

（1）E::first-letter 文本的第一个单词或字（如中文，日文，韩文等）
（2）E::first-line 文本第一行
（3）E::selection 可改变选择中文本的样式

p::first-letter{
	font-size:20px;
	color:hotpink;
}
p::first-line{
	color:skyblue;
}
p::selection{
	color:orange;
}

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

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

<div>今年</div>

九，css背景（background）

css可以添加背景颜色和背景图片，以及来进行图片设置。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动

1.背景图片(image)

.div{
	width:300px;
	height:300px;
	background-color:pink;
	background-image:url(images/l.jpg);
}

2.背景平铺(repeat)

background-repeat:

repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向上平铺
repeat:背景图像在横向和纵向上平铺
no-repeat:背景图像不平铺

3.背景位置(position)

语法：

background-position:length
background-position:position

参数:

length:   百分数/由浮点数字和单位标识符组成的长度值
position:  top/center/bottom/left/center/right

/*1.调用方位名词 top ,bottom来更改背景图片的位置*/
div{
	background-position:right top;
	/*方位名词没有顺序，谁在前面都可以*/
	/*默认时左上角*/
	/*如果方位名词只写一个，默认另外一个为center */
}
/*2.精确单位 第一个值一定是x坐标，第二个值一定是y坐标，可为负值。*/
div{
	background-position:10px 30px;
}
/*混搭*/
div{
	background-position:10px center;
	/*水平10px,垂直是居中*/
}

4.背景附着(attachment)

background-attachment:fixed;
/*默认是滚动scroll*/

5.背景简写(background)

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

background:#000 url(image/l.jpg) no-repeat fixed center -25px;

6.背景半透明(background)

 div{
            background: rgba(0, 0, 0, 0.5);
        }

7.背景缩放(size)

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

 div{
           width: 400px;
           height: 500px;
           background: hotpink url(img/tup.webp) no-repeat;
           /* 我们插入的图片img直接通过width和height设置即可。 */
           /* 背景图片设置大小 background-size */
           /* 我们尽量只改一个值，防止缩放失真扭曲 */
           background-size: 50%;
           /* 缩小为原来的一半 */
        }

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

  background-size: cover;

图片进行等比缩放，图片一定要让宽，高满足盒子大小，势必会部分溢出。

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

background-size: contain;

图片等比缩放，高宽一个满足停止缩放，保证了图片完整，但会有部分裸露。

8.多背景图片

逗号分隔设置多背景

一个元素可以设置多重背景图片
每组属性间使用逗号分隔
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图片图会覆盖在后面的背景图之上。

为了避免背景图像盖住，背景色通常都定义在最后一组上。

background: url(img/tup.webp) no-repeat left top,
           url(img/tup.webp) no-repeat left bottom hotpink;

9.凹凸文字

凸文字：

        div:first-child{
          /* text-shadow: 水平位置 垂直位置 模糊位置 阴影颜色 */
          text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
        }

凹文字：

        div:last-child{
          /* text-shadow: 水平位置 垂直位置 模糊位置 阴影颜色 */
          text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
        }

10.文本修饰

在一行内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

text-decoration 通常我们用于给 链接修改装饰效果

值	描述
none	默认，定义标准的文本，取消下划线
underline	定义文本下的一条线
overline	定义在文本上的一条线
line-throungh	定义穿过文本的一条线

a:hover{
           /* 鼠标经过，给我们的链接添加背景图片 */
           background:url(img/tup.webp) no-repeat;
       }

八，css三大特性

1.层叠性

样式冲突，遵循的原则是就近原则，那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠。

        div{
            color: skyblue;
            font-size: 12px;
        }
        div{
            color: pink;
        }

记忆：长江后浪推前浪，前浪死在沙滩上。

2.css继承性

   <div>
       <p>小王</p>
   </div>

记忆：子承父业。
注意：子元素可以继承父元素的样式
(text-,font-,line- 这些元素开头的都可以继承，以及color属性)。

3.css优先级

        div{
            color: pink;
            /* 标签选择器 */
        }
        .king{
            color: blue;
            /* 类选择器 */
        }

css特殊性（Specificity）

关于css权重，我们需要一套计算公式去计算，这个就是 css Specificity , 我们称为css特性或称非凡性。它是一个衡量css值优先级的一个标准 具体规范如下：

specificity用一个四位的数字串（css2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，级别之间没有进制，级别之间不可超越。

继承或者*的贡献值	0，0，0，0
每个元素（标签）贡献值为	0，0，0，1
每个类，伪类贡献值为	0，0，1，0
每个ID贡献值为	0，1，0，0
每个行内样式贡献值	1，0，0，0
每个!important贡献值	∞无穷大

        div{
            color: pink!important;
            /* 标签选择器 */
        }

权重是可以叠加的

       ul li{
           color:green;
           /* 
           ul 0001 li 0001
           叠加 0002
           */
       }

数位之间没有进制，所以不会存在10个div能赶上一个类迭代器的情况。
继承的权重是0.

总结：权重是优先级的算法，层叠是优先级的表现。

九，盒子模型（css重点）

其实，css就是三个大模块：盒子模型，浮动，定位，其余都是细节。
盒子模型（Box Model）

1.盒子边框（border）

边框就是那层皮。橘子皮，柚子皮。。。
语法:

border:border-with||border-style||border-color

（1）边框属性——设置边框样式（style）

边框样式用于定义页面中边框的风格，常用属性如下：

none:没有边框即忽略所有边框的宽度（默认值）
solid:边框为单实线（最为常用）
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线

盒子边框写法总结：

     input{
         border:0;
     }

      .text{
         border-width: 1px;
         border-color: pink;
         border-style: solid;
     }

   .email{
        border-bottom-width:1px;
        border-bottom-color: hotpink;
        border-bottom-style: solid;
    }

   .name{
       border-bottom: 1px solid red;
       /* 边框：宽度 样式 颜色  */
    }

.tel{
       border: 1px solid skyblue;
       /* 综合性书写 */
    }

（2） 表格的细线边框（collapse）

html表格边框很粗，解决：

    <table  cellspacing="0" cellpadding="0">

    table{ 
        border-collapse: collapse;
    }

border-collapse: collapse;表示边框合并在一起。

（3）圆角边框（css3）

       /* border-radius:左上角 右上角 右下角 左下角
       一个数值表示4个角都是相同的
       100px 50%:取高度宽度的一半，则会变成一个圆形 */
       border-radius:10px 40px;
       /* 左上角和右下角都是10px 右上角和左下角是40px 对角线 
          顺时针变换*/
       border-radius: 10px 0;
       /* 柠檬 */

2.内边距（padding）

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

        padding-left: 20px;
        /* 左内边距 */
        padding: 20px;
        /* 如果只写一个值表示上下左右都是 */
        padding: 10px 50px;
        /* 上下10px 左右30px */
        padding: 10px 30px 50px;
        /* 上10px 左右30px 下50px */
        padding: 10px 20px 30px 40px;
        /* 顺时针，上右下左 */

3.外边距（margin）

用法同padding

外边距实现盒子居中
可以让一个盒子实现水平居中，需先满足两个条件。
（1）必须是块级元素
（2）盒子必须制定了宽度（width）
然后就给左右的外边距都设置了anto，就可使块级元素水平居中。

       .header{
           width: 960px;
           margin: 0 auto;
       }

4.文字盒子居中图片与背景区别

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

       div{
        width: 300px;
        height: 100px;
        border: 1px solid pink;
        text-align: center;
        /* 文字水平居中 */
        margin:10px auto;
        /* 盒子水平居中，左右margin改为auto就可以了 */
       }

（2）插入图片与背景图片

section{
           width: 400px;
           height: 400px;
           border: 1px solid #000;
       }
       section img{
           width: 200px;
           height: 210px;
           /* 插入图片更改大小width和height */
           margin-top: 30px;
           /* 插入图片更改位置，可以用margin或padding全模型，插入的图片也是一个盒子 */
       }

       aside{
           width: 400px;
           height: 400px;
           border: 1px solid purple;
           background: #fff url(img/tup.webp) no-repeat;
           background-size: 200px 210px;
           /* 背景图片更改大小只能用background-size */
           background-position: 30px 50px;
           /* 背景图片更改位置，我们用background-position */
       }

    <section>
        <img src="img/tup.webp" alt="">
    </section>
    <aside></aside>

（3）总结

一般情况下，背景图片一般适用做小图标，产品展示就用插入图片。

5.清除元素的默认内外边距

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

注意：行内元素（例：span）是只有左右内外边距，没有上下内外边距的。内边距在ie6等低版本也会有问题，我们尽量不要给行内元素指定上下的内外边距。

6.外边距合并

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

外边距合并，垂直的块级盒子，以最大的外边距为准。
解决方案：尽量避免。

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

解决方案：
a.可以为父元素定义1像素的上边框或上内边距。

	padding:1px;
	/*或*/
	border:1px solid red;

b.可以为父元素添加overflow:hidden。

7.盒子的宽度和高度

大多数浏览器，如Firefox,IE6及以上版本都采用了W3C规范，符合css规范的盒子模型的总宽度和总高度的计算原则是：

外盒（空间）尺寸：width+border+padding+margin。
内盒（实际）尺寸：width+border+padding。

注意：
（1）宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）。
（2）计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
（3）*** 如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小。

	ul{
	    list-style:none;
	    /*取消列表自带的小点，默认的列表样式*/
      }

8.盒子模型布局稳定性

内外边距大部分情况下是可以混用的。
根据稳定来分，建议如下：

width>padding>margin

原因：
1.margin会有外边距合并还有ie6下面margin加倍的bug，所有最后使用。
2.padding会影响盒子大小，需要进行加减计算，其次使用。
3.width我们经常使用宽度剩余法，高度剩余法来完成。

9.css3盒模型

css3中可以通过box-sizing来指定盒模型，即可指定为content-box,border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：

（1）box-sizing:content-box
盒子大小为width+padding+border,
content-box:此值为其默认值，其让元素维持W3C标准Box Mode。
（2）box-sizing:border-box
盒子大小为width,
就是说padding和border是包含到width里面的。

10.盒子阴影

box-shaw:水平位置 垂直位置 模糊距离 阴影尺寸(阴影大小) 阴影颜色 内/外阴影
（1）前两个属性是必须写的。其余的可以省略。
（2）外阴影(outset)但是不能写 默认 想要内阴影 inset。

       h1{
           font-size: 100px;
           /* text-shadow:水平距离 垂直距离  模糊距离  阴影颜色 */
           text-shadow: 10px 3px 3px rgba(0,0,0,.5);
       }
       div{
           width: 200px;
           height: 200px;
           border: 10px solid red;
           box-shadow: 5px 5px 3px 4px rgba(0,0,0,.5) inset;
       }

十，浮动（float）

1.浮动基本格式

css的定位机制有3种，普通流（标准流），浮动和定位。

html语言当中另外一个相当重要的概念——标准流，普通流或者文档流。普通流实际上就是一个网页内标签元素，正常从上而下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

开始的时候，浮动是用来做文字浮动效果。浮动就是漂浮的意思，漂在标准流的上面，压住标准流。在css中通过float属性来定义浮动，其基本语法格式如下：

选择器 {float:属性值;}

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

div{
           width: 200px;
           height: 200px;
           background-color: pink;
           /* 
           display:inline-block;
           转换成行内块元素  就可以放一行  
           有宽度高度  但是元素之间有空隙  不方便处理
           */
           float: left;
           /* 左侧浮动 */
       }

2.活动详细内幕特征

活动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

浮动首先创建了包含块的概念，就是说，浮动的元素总是找离他最近的父级元素对齐，但是不会超过内边距的范围。

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

3.总结

一个父盒子里面的子盒子，如果其中一个子集有浮动时，则其他子级都需要浮动。这样才能一行对齐显示。

元素添加浮动后，元素会具有行内块元素的特征。元素的大小完全取决于定义的大小或者默认的内容多少。（行内块特征：可以一行放多个 有高度和宽度 盒子的大小是由内容决定的）。

一句话总结浮动：
浮动的主要目的就是为了让多个块级元素在一行内显示。
float—浮漏特
浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏：加了浮动的盒子是不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。
特：特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。

十一，版心和布局流程

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

布局流程：
（1）确定页面的版心（可视区）。
（2）分析页面中的行模块，以及每行模块中的列模块。
（3）制作HTML结构。
（4）CSS初始化，然后开始运用盒子模块的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

两列左窄右宽型

通栏平均分布型

十二，清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版长生影响，为了解决这些问题，我们要清除浮动后造成的影响。

清除浮动本质主要为了解决父级元素因为浮动引起内部高度为0的问题。

清除浮动的方法：

1.额外标签法

选择器 {clear:属性值;}

属性值	描述
left	清除左侧浮动影响
right	清除右侧浮动影响
both	同时清除两侧浮动影响

往浮动元素末尾添加一个空的标签，例如：

<div style="clear:both"> </div>

或者其他标签 br 等。
缺点：
添加许多无意义的标签，结构性差。

2.父级添加overflow属性方法

可以给父级添加overflow: hidden/auto/scoll 都可以实现。
缺点：
内容增加时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.使用after伪元素清除

       .clearfix:after {
           content: ".";
           /* 内容为小点，尽量加不要空，否则旧版本浏览器会有空隙 */
           display: block;
           height: 0;
           clear: both;
           visibility: hidden;
           /* 隐藏盒子 */
       }
       .clearfix{
           *zoom: 1;
           /* 
           ie6,7浏览器处理方式
           *代表ie6,7能识别的特殊符号
           zoom就是ie6,7清除浮动的方法
           */
       }

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

      .clearfix:before,.clearfix:after{
           content: "";
           display: table;
           /* 这句话可以触发BFC,BFC可以清除触发 */
       }
       .clearfix:after{
           clear: both;
       }
       .clearfix{
           *zoom: 1;
           /* 
           由于IE6-7不支持：after,
           使用zoom:1 触发hasLayout
           */
       }

十三，定位

1.元素的定位属性

边偏移

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

定位模式

在css中，position属性用于定义元素的定义模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值

值	描述
Static	自动定位（默认定位方式）
Relative	相对定位，相对于其原文档流的位置进行定位
Absolute	绝对定位，相对于其上一个依据定位的父元素进行定位
Fixed	固定定位，相对与浏览器窗口进行定位

       div {
            width: 100px;
            height: 100px;
            background-color: pink;
            边偏移
            top: 100px;
            left: 100px;
            position: absolute;
            /*定位模式（绝对定位）
            定位模式 + 边偏移 = 完整定位*/
        } 

2.静态定位(static)

网页中所有元素都默认的是静态定位，其实就是标准流的特性。
在静态定位下，无法通过边偏移属性(top,bottom,left或right)来改变元素的位置。

3.相对定位relative(自恋型)

1.相对定位最重要的一点是，它可以通过边偏移移动1位置，但是原来的所占的位置，继续占有。
2.其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍然以标准流方式对待它（相对定位不脱标）。
如果说浮动的主要目的是 让多个块级元素一行显示，那么定位是主要价值就是 移动位置，让盒子到我们想要的位置上去。

4.绝对定位absolute（拼爹型）

注意：如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

父级没有定位

若所有父元素都没有定位，以浏览器位准对齐（document文档）

父级有定位

绝对定位是将元素依据最近已经定位（绝对，固定或相对定位）的父元素（祖先）进行定位。

子绝父相

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

因为子级是绝对定位，不会占用位置，可以放在父元素里面的任何一个地方。
父盒子布局时，需要占用位置，因此父亲只能时相对的。

5.绝对定位的盒子水平/垂直居中

普通的盒子是左右margin改为auto就可，但是对于绝对定位就无效了
定位的盒子就可以水平或者垂直居中，有一个算法。
1.首先left 50%
2.然后走自己外边距负的一半值就可以了。

 .father {
            width: 800px;
            height: 400px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
            /* 父级有定位 则以父亲为基准点对齐 还可以是 absolute */
        }
        .son {
            width: 100px;
            height: 40px;
            background-color: purple;
            position: absolute;
            /* margin: 0 auto; 加了绝对定位 margin 左右auto就无效了 */
            left: 50%;
            margin-left: -50px;
            top: 50%;
            margin-top: -20px;
            /*绝对定位 父级没有定位，孩子以浏览器为基准点对齐 */
        }
       /* left 父盒子宽度的一半 */
       /* 左走自己宽度的一半 */

6.固定定位fixed(认死理型)

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

固定定位有两点：
2.固定定位的元素跟父亲没有任何关系，只认浏览器
3.固定定位完全脱标，不占用位置，不随着滚动条滚动。

7.叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在css中，要想调整元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数，负整数和0.
比如：z-index: 2;
注意：
1.z-index的默认值是0，取值越大，定位元素在层叠元素中越居中。
2.如果取值相同，则根据书写顺序，后来居上。
3.后面数字一定不能加单位。
4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

8.四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位 absolute	完全脱标，不占用位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

十四，定位模式转换

跟浮动一样，元素添加了绝对定位之后，元素模式也会发生转换，都转换为 行内块模式。
因此 比如 行内元素 如果添加了 绝对定位 或者 固定定位后，可以不用转换模式。直接给高度和宽度就可。

十五，元素的显示与隐藏

在css中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，他们又会出现和你玩躲猫猫。

1.display显示

display设置或检索对象是否及如何显示
Display:none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不再保留位置

2.visibility可见性

设置或检索是否显示对象
Visible: 对象可视
Hidden: 对象隐藏
特点：隐藏之后，继续保留原有位置。

       div {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            margin: 100px auto;
            position: relative;
        }
        div img {
            position: absolute;
            left: 110px;
            top: 0;
            display: none;
            /* 隐藏二维码 */
        }
        div:hover img {
            /* 我们鼠标经过div时，里面的图片会显示出来 */
            display: block;
        }

3.Overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
Visible: 不剪切内容也不添加滚动条
Auto: 超过自动显示滚动条，不超过不显示滚动条
Hidden: 不显示超过对象尺寸的内容，超出的部分隐藏掉
Scroll: 不管超出内容否，总是显示滚动条

        div {
            width: 100px;
            height: 200px;
            border: 1px solid red;
            /* overflow: visible;默认的，超出显示 */
            /* overflow: auto; 自动 超出就显示滚动条，不超过就不显示 */
            /* overflow: scroll; 一直显示滚动条 */
            overflow: hidden;
            /* 溢出隐藏 */
        }

十六，CSS高级技巧

1.鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor: default 小白| pointer 小手| move 移动| text 文本

    <ul>
        <li style="cursor: default;">小白</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: text;">文本</li>
        <li style="cursor: move;">移动</li>
    </ul>

尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

2.轮廓outline

是绘制与元素周围的一条线，位于边缘编译的外围，可起到突出元素的作用。
我们平时都是去掉

outline: 0;

或者：

outline: none;

        input{
            outline: 5px solid red;
            border: 10px solid blue; 
            /* outline: 0; */
            /* 取消轮廓线 */
        }

（1）防止拖拽文本域resize

Resize: none 这个单词可以防止火狐，谷歌等浏览器随意的拖动 文本域。
右下角可以拖拽：

右下角不可以拖拽：

（2）vertical-aligh 垂直对齐

块级元素居中对齐，margin: 0 auto;
文字居中对齐，text-aligh: center;
垂直居中：

Vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直方式。
Vertical-align 不影响块级元素中的内容对齐。它只针对于 行内元素或者行内块元素，特别是行内块元素，通常用于控制图片/表单与文字的对齐。

        div{
            width: 200px;
            height: 100px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
            /* 作用自动 auto 盒子可水平居中对齐 */
            text-align: center;
            /* 文字水平居中 */
            /* vertical-align: middle; */
            /* 对于块级元素无效 */
        }
        /* 行内块 */
        img {
            /* 默认的基线对齐 */
            /* vertical-align: baseline; */
            /* 手动修改为中线对齐 */
            vertical-align: middle;
        }
        textarea {
            height: 300px;
            width: 300px;
            vertical-align: middle;
        }

<div>文字居中</div>
<hr/>
<img src="./ANLI/images/images/tup_03.png" alt="">我好帅呀
<!-- 图片和文字默认的是基线对齐，但是我们想要的是 中线对齐 -->
<hr>
用户留言：<textarea ></textarea>

图片，表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系。默认的图片会和文字基线对齐。

去除图片底册空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐，这样会造成一个问题，就是图片底部会有一个空白的缝隙。
解决的方法就是：
1.给img vertical-align:middle |top等。让图片不要和基线对齐。（top用的最多）
2.给img 添加display: block; 转换为块级元素就不会存在问题了。

3.溢出的文字隐藏

（1）word-break:自动换行

Normal 使用浏览器默认的换行规则
Break-all 允许在单词内换行
Keep-all 只能在半角空格或连字符处换行
主要处理英文单词

        div {
            width: 120px;
            height: 20px;
            border: 1px solid #f00;
            /* word-break: break-all; */
            /* 允许单词拆开 */
            word-break: keep-all;
            /* 不允许拆开单词显示 除非连字符 连字符：- z-index */

        }

    <div>
        my name is an-dy
    </div>

（2）white-space

White-space设置或检索对象内文本显示方式。通常我们适用于强制一行显示内容。
Normal: 默认处理方式
Nowrap: 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行.

（3）text-overflow 文字溢出

text-overflow: clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
Clip: 不显示省略标记（…）,而是简单的裁剪
Ellipsis: 当对象内文本溢出时显示省略标记（…）
注意一定要首先强制一行内显示，再次和overflow属性 搭配使用

4.resize 防止拖拽文本域

resize: none 这个单词可以防止火狐，谷歌等浏览器随意的拖动 文本域。
右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

<textarea style=”resize: none;”></textarea>

5.vertical-aligh 垂直对齐

块级元素居中对齐，margin: 0 auto;
文字居中对齐，text-aligh: center;
垂直居中：

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直方式。
vertical-align 不影响块级元素中的内容对齐。它只针对于 行内元素或者行内块元素，特别是行内块元素，通常用于控制图片/表单与文字的对齐。

 div{
            width: 200px;
            height: 100px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
            /* 作用自动 auto 盒子可水平居中对齐 */
            text-align: center;
            /* 文字水平居中 */
            /* vertical-align: middle; */
            /* 对于块级元素无效 */
        }
        /* 行内块 */
        img {
            /* 默认的基线对齐 */
            /* vertical-align: baseline; */
            /* 手动修改为中线对齐 */
            vertical-align: middle;
        }
        textarea {
            height: 300px;
            width: 300px;
            vertical-align: middle;
        }

 <div>文字居中</div>
    <hr/>
    <img src="./ANLI/images/images/tup_03.png" alt="">我好帅呀
    <!-- 图片和文字默认的是基线对齐，但是我们想要的是 中线对齐 -->
    <hr>
    用户留言：<textarea ></textarea>

图片，表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系。默认的图片会和文字基线对齐。

去除图片底册空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐，这样会造成一个问题，就是图片底部会有一个空白的缝隙。
解决的方法就是：
1.给img vertical-align:middle |top等。让图片不要和基线对齐。（top用的最多）
2.给img 添加display: block; 转换为块级元素就不会存在问题了。

6.溢出的文字隐藏

word-break:自动换行

Normal 使用浏览器默认的换行规则
Break-all 允许在单词内换行
Keep-all 只能在半角空格或连字符处换行
主要处理英文单词

 div {
            width: 120px;
            height: 20px;
            border: 1px solid #f00;
            /* word-break: break-all; */
            /* 允许单词拆开 */
            word-break: keep-all;
            /* 不允许拆开单词显示 除非连字符 连字符：- z-index */

        }

 <div>
        my name is an-dy
    </div>

十七，css精灵技术（sprite）小妖精 雪碧

1.精灵技术产生的背景

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展示给用户。
然而，一个页面中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求，这将大大降低速度。为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称CSS Sprites,CSS雪碧）

2.精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。他将一个页面涉及到的所有零星背景图像都集中到一张大图去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页的背景图片即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图称为精灵图（雪碧图）。

3.精灵技术的使用

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图不同位置的某个小图，要想精确定位到精灵图中某个小图，就需要使用CSS的background-image,background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

 div {
            width: 17px;
            height: 13px;
            background: url(./img/tup.webp) no-repeat;
            background-position: 0 -388px;
            margin: 100px auto;
            /* 因为背景图片往上移动，所有是负值 */
        }
        p {
            width: 56px;
            height: 49px;
            background: url(./img/tup.webp);
            background-position: 0 -438px;
        }

4.制作精灵图

css精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工。
我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

十八.字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还额外增加了很多额外的”http请求”，这都会大大降低网页的性能。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩放会失真。

1.字体图标优点

可以做出跟图片一样可以做的事件，改变透明度，旋转都等
但是本质其实是文字，可以随意的改变颜色，产生阴影，透明效果等
本身体积更小，但携带的信息并没有消减。
几乎支持所有的浏览器
移动端设备必备良药…

2.字体图标使用流程

总体来说，字体图标按照如下流程：

（1）设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在illustrator或Sketch这类矢量图形软件理创建icon图标。
之后保存为svg格式，然后给我们前端人员就好了。

（2）上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的时候各个浏览器的。
推荐网站：http://icomoon.io

icomoon字库
iconMoon成立于2011年，退出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使他们成一字型。内容种类繁多，非常全面，位于的遗憾是国外服务器，打开网速较慢。
推荐网站：http://www.iconfont.cn

阿里icon font字库
http://www.iconfont.cn/
这个是阿里的icon font 字体图标字库，包含了淘宝图标库和阿里巴巴图标库。可以使用AI制作图标上传生成。免费。

Fontello
http://fontello.com/
在线制作你自己的icon font 字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome
http://www.fontawesome.com.cn/
更新比较快

Glyphicon Halflings
http://glyphicons.com/
可以在Bootstrap下免费使用。自带了200多个图标。

Icons8
https://icons8.com/
提供PNG免费下载，像素大能到500px

具体使用方法：

第一步：在样式里面声明字体：告诉别人我们自己定义的字体
第二步：给盒子使用字体
第三步：盒子里面添加结构

        /* 电脑中没有的字体，我们需要声明 */
         @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?7kkyc2');
            src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
                url('fonts/icomoon.woff?7kkyc2') format('woff'),
                url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        /* 方法1 */
        span {
            font-family: "icomoon";
            /* 一定保证和上面的 font-family: 相同 */
            font-size: 100px;
            color: pink;
        }
        /* 方法2 */
        div::before {
            font-family: "icomoon";
            /* 一定保证和上面的 font-family: 相同 */
            font-size: 100px;
            color: hotpink;
            content: "\e907";
        }
        

    <!-- 方法1 -->
    <span></span>
    <!-- 方法2 -->
    <div></div>

（3）追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要把压缩包里面的selection.json重新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来的文件即可。

十九，滑动门

1.滑动门出现的背景

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

2.核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以边适应不同字数的导航栏。

   <li>
        <a href="#">
            <span>导航栏内容</span>
        </a>
    </li>

总结：
（1）a设置图片左侧，padding撑开合适宽度。
（2）span设置背景右侧，padding撑开合适宽度剩下的由文字继续撑开宽度。
（3）之所以a包含span就是因为整个导航都是可以点击的。

        * {
            margin: 0;
            padding: 0;
        }
        a {
            margin: 0;
            display: inline-block;
            height: 33px;
            /* 千万不能给宽度 写死宽度是不对称的，我们要推拉门，自由缩放 */
            background: url(./img/tup.webp) no-repeat;
            padding-left: 15px;
            color: #fff;
            text-decoration: none;
            line-height: 33px;
        }
        a span {
            display: inline-block;
            height: 33px;
            background: url(./img/tup.webp) no-repeat right;
            /* span 不能给宽度 利用padding挤开 要用右边圆角，所以右对齐 */
            padding-right: 15px;
        }

    <a href="#">
        <span>导航栏内容</span>
    </a>

二十，before和after伪元素（详解）

类选择器，伪类选折器就是选区对象。
伪类选折器 本质上是插入一个元素（标签，盒子）只不过是行内元素(span,a)

        div{
            width: 20px;
            height: 20px;
            margin: 100px auto;
            position: relative;
            background-color: black;
        }
        div:hover::before{
            /* 鼠标经过，增加边框 */
            content: "";
            width: 100%;
            height: 100%;
            border: 4px solid rgba(255, 255, 255, .3);
            /* 伪元素属于行内元素 要转换 */
            display: block;
            /* 要伪元素不占位，就要用绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            /* 把padding和border都算如with中 */
            box-sizing:border-box;
        }

    <div>
        <img src="./img/error.png" alt="">
    </div>

二一，过度（CSS3）

1.过度(CSS3)

我们可以在不使用flash动画或javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
语法格式：
transtion:要过度的属性 花费时间 运动曲线 何时开始；
如果有多组属性变化，还是用逗号隔开。

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

运动曲线示意图：

注意：

• transition 过渡的意思，这句话写在div里面而不是hover里面。
• 如果想要所有的属性都变换过度，写一个all就可以了，后面两个属性可以省略。

        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: width 0.6s ease 0s,height 0.3s ease-in 1s; 
        }
        div:hover{
            width: 600px;
            height: 300px;
        }

1.2D变形(CSS3)transform

transform是css中具有颠覆性的特征之一，可以实现元素的位移，旋转，倾斜，缩放

(1)平行移动-translate(x,y)

transform:translateX() ：只跟一个参数，就是X。
transform:translateX(50%)：
translate移动距离，如果是%，不是以父级宽度为准，而是以自己的宽度为准。

(2)定义的盒子居中对齐完美写法

/* 以前我们让定位的盒子居中对齐*/
position:absolute;
/* 以父级宽度为准*/
left:50%;
top:50%;
/* 需要计算不合适*/
/* margin-left:-100px */
transform:translate(-50%,-50%);

(3)缩放-scale(x,y)

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）。
scaleX(x)   元素仅水平方向缩放（X轴缩放）
scaleY(y)   元素仅垂直方向缩放（Y轴缩放）
如果只写一个参数，宽度和高度都缩放

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；当任何大于或等于1.01的值，作用是让元素放大。

section img{
    transition:all 0.2s;
    /*因为图片缩放了，实际图片做动画，所以过度要和 img 加，谁做动画，谁家过度*/
}
section:hover img{
    /*鼠标经过section的时候，里面的 img 缩放*/
    transform:scale(1.2)
}

(4)旋转-rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针：

transform:rotate(45deg)

(5)调整原点 transfor-origin

transfor-origin 可以调整元素转换变形的原点。

如果是4个角，可以用left top这些，如果想要精确的位置；也可以用px像素。

img{
    margin:200px;
    transition:all 0.6s;
    transform-origin:bottom left;
}
img hover{
    transform:rotate(360deg);
}

(6)倾斜-skew(deg,deg)

transform:skew(30deg,0deg)

• 该实例通过skew方法把元素水平方向上倾斜30度，垂直上不变。
• 可以使元素按一定的角度进行倾斜，可为负值。
• 第二个参数默认为0。

2.3D变形(CSS3)transform

左手法则：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方，这样我们就建立了左手坐标系，拇指，食指和中指分别代表X,Y和Z轴的正方向。

css3中的3D坐标系与上述的3D坐标系是由一定区别的，相当于其绕着x轴旋转了180度。

（1）rotateX()

就是绕着x立体旋转。

img{
    transition:all 0.5s ease 0s;
}
img:hover{
    transform:rotateX(180deg);
}

（2）ratateY()

沿着y轴进行旋转

（3）rotateZ()

沿着z轴进行旋转

（4）透视(prespective)

• 透视原理：近大远小。
• 浏览器透视：把近大远小的所有图像透视在屏幕上。
• perspective：视距，表示视点距离屏幕的长短，视点用于模拟透视效果时人眼的位置。
  perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素。

视距越大，效果越不明显；视距越小，透视效果越明显。

body {
    perspective:1000px;
    }

（5）translateX(x)

仅水平方向移动（x轴移动）

（6）translateY(y)

仅垂直方向移动（y轴移动）

（7）translateZ(z)

translateZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近），在这里参照物就是perspective属性。

比如设置了perspective为200px,那么transformZ的值越接近200，就是离的越近，看起来也就是越大，超过200就看不见了。
透视是眼睛到屏幕的距离，透视只是一种展示形式，是有3d效果的意思。
translateZ 是物体到屏幕的距离，z就是控制物体近大远小的具体情况。

translateZ越大，我们看到的物体越近，物体越大。

（8）translate3d

transform:translate3d(x,y,z)

x和y可以是px，也可以是%;
z只能是px。

（8）backface-visibility

属性定义当元素不面向屏幕时是否可见。
不可见：

backface-visibility:hidden;

例子：两面翻转的盒子

        div{
            width: 100px;
            height: 100px;
            margin: 100px auto;
            position: relative;
        }
        div img{
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
            transition: all 1s;
        }
        div img:first-child{
            z-index:1;
            backface-visibility: hidden;
        }
        div:hover img{
            transform: rotateY(180deg);

        }

    <div>
        <img src="./img/tup.webp" width="100px" height="100px" alt="">
        <img src="./img/pic.jpg" width="100px" height="100px" alt="">
    </div>

二二，动画(css3) animation

语法格式：

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向

属性	描述	css
@keyframes	所有动画属性的简写属性，除了animation-play-state属性	3
animation	规定@keyframes动画的名称	3
animation-name	规定动画完成一个周期所花费的秒或毫秒，默认是0	3
animation-duration	规定动画的速度曲线，默认是"ease"。	3
animation-timing-function	规定动画何时开始，默认是0。	3
animation-delay	规定动画被播放的次数，默认是1。	3
animation-iteration-count	规定动画是否在下一周期逆向的播放，默认是"normal"	3
animation-direction	规定动画是否正在运行或暂停，默认是“running”	3
animation-fill-mode	规定对象动画时间之外的状态	3

动画名称是自己定义的。

        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* animation: go 2s ease 0s infinite alternate; */
            /* inifinite 无限循环 */
            /* 一般情况下，我们就用前2个 animation: go 2s */
            animation: go 2s infinite;

        }

        /* @keyframes 动画名称 {} 定义动画 */
        /* @keyframes go {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(600px);
            }
        } */

        @keyframes go {
            0%{
                transform: translate3d(0,0,0,);
            }
            25%{
                transform: translate3d(800px,0,0);
            }
            50%{
                transform: translate3d(800px,400px,0);
            }
            75%{
                transform: translate3d(0,400px,0);
            }
            100%{
                transform: translate3d(0,0,0);
            }
        }

无限循环播放：
animation-iteration-count:infinite;
暂停动画：
animation-play-state:pause;

二三，伸缩布局（css3）

1.display: flex

        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /* 父级盒子添加flex */
            display: flex;
            /* 伸缩布局模式 */
            min-width: 500px;
        }
     
        section div {
            height: 100%;
        }
        section div:nth-child(1){
            background-color: pink;
            width: 100px;
        }
        section div:nth-child(2){
            margin: 0;
            background-color: purple;
            flex: 2;
        }
        section div:nth-child(3){
            background-color: pink;
            flex: 3;
        }

2.缩放比例（max/min-width）

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩比例分配。

min-width:最小值
max-width:最大值

例如：
缩放不大于1280px:

max-width:1280px;

3.flex-direction调整主轴方向（默认为水平方向-row）

更改为垂直方向：

flex-direction:column;

4.justify-content调整主轴对齐（水平对齐）

在父盒子添加。

值	描述
flex-start	默认值，项目位于容器的开头
flex_end	项目位于容器的结尾
center	项目位于容器的中心
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前，之间，之后都留有空白的容器内

5.align-items调整侧轴对值（单行垂直对齐）

在父盒子添加：

值	描述
stretch	默认值，项目被拉伸以适应容器（子元素不给高），相当于height=100%
center	项目位于容器的中心，垂直居中
flex-start	项目位于容器的开头，上对齐
flex-end	项目位于容器的结尾，下对齐

6.flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子
在父盒子添加：

值	描述
nowrap	默认值，规定灵活的项目不拆行，不拆列，则收缩（压缩）显示，强制一行内显示
wrap	规定灵活的项目在必要的时候拆行或拆列
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序

7.align-content 堆栈（多行垂直对齐）

必须对父元素设置自由盒属性：display:flex;并且设置排列方式为横向排列 flex-direction:row ,并且设置换行 flex-wrap:wrap ,可合并为 flex-flow:row wrap;这个属性设置才会起作用。

值	描述
stretch	默认值，项目被拉伸以适应容器
center	项目位于容器的中心
flex-start	项目位于容器的开头
flex-end	项目位于容器的结尾
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前，之间，之后都留有空白的容器内

8.flex-flow

是flex-direction,flex-wrap的简写形式。

flex-flow:flex-direction(排列方向) flex-wrap(换不换行)

9.order

控制子项目的排列顺序，数值越小，越往前排，可负。
默认都为0。
在它自己（不是父元素）中加：

order:-1;

或者

order:1;