半个月学习的it内容

1  基本头部标签：

1 head:

HEAD里面主要放一些有关网页设置的相关语句-->
2编码格式：

设置网页的字符集编码格式；GB2312，简体中文的编码格式

GBK：扩展的国标码，比国标码多了更多的编码格式。
UTF-8：万国码。可以兼容绝大数国家的语言。
HTNL4之前，声明字符集编码的格式
<meta http-equiv="Content-type" content="text/html

3 title:标题 TITLE是网页的标题也就是网页选项卡上的文字

4 DOCTYPE文档类型声明：

DOCTYPE文档类型声明让浏览器按照HTM5的标准对代码进行解释与执行。
文档类型声明必不可少，而且，必须要放在文档最上方。
如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明BUG。

2 基本块级标签：首先讲的是块级标签跟行级标签的区别：

功能上从HTML标签分为快级标签和行级标签
块级标签和行级标签的区别
（1）块级标签自动换行，前后隔一行；
行级标签不会自动换行，从左到右依次显示；
（2）块级标签的宽度是默认百分之百，行级标签的宽度由文字内容撑开；
（3）块级标签能设置宽度高度边距等属性，行级标签不能设置上述属性
2 从写法上HTML标签分为"成对标签"和"自闭和标签"（空标签）
成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。
例如<h1></h1><p></p><title></title>
自闭和标签/空标签：只有一个标签，用/表示标签的自动闭合（/可以省略）。例如<hr/> <link/> <meta/>

然后学习到最常用的块级标签： 标题标签h， h1最大 h6最小 2.HR标签我们称为水平线标签 3.<pre>预格式标签</pre> 4有序列表：li 5 无序列表UL 6 定义列表dl（

dt表示的是定义列表的标题，标题顶格显示，一般一个定义列表只有一个标题）
（dd定义列表的描述项，相对于标题向后缩进显示，一个定义列表可以有多个描述项）

7                                                                                                    8div分区标签用于配合css使用，将网页划分为区块包裹，可以包裹各种标签。

组合标签figure
包含两部分：
1.img 一张图片
2，figcaption：图片的标题，在图片正下方显示。

以上就是我们学习的常用块级标签

三.行级标签：常用的行级标签以及作用：

1.span标签：用于包裹行内的文字，常配合CSS使用修改文字样式

2.                                                                                有什么区别呢、

1.em/i都能倾斜 strong/b 都能加粗，但是em/strong多了一层强调的含义。
（强调的作用：可以让搜索引擎快速抓取网页的重点部分。实现代码的语义化。）
2.em/strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。

<em>em标签 倾斜+强调</em>
<strong>strong标签 加粗+强调</strong>
<i>i标签 倾斜</i>
<b>b标签 加粗</b>

3.常见的引用标签： 区别在哪里呢：

blockquote，q,cite,他们的区别：
1.显示效果上：blockquote整段缩进，q加引号，cite倾斜
2.从功能上：blockquote用于引用一段内容，是块级标签，q用于引用一句话，是行级标签，cite常用于引用作品名，书画名。

4 .第四个讲的是img标签，灰常重要的标签了：

[img]图片标签
1.src属性：表示图片所在的路径。
【路径的表示方式】
1网络图片地址，并不介意使用
2可以使用图片的绝对路径，但是，严禁使用绝对路径，因为，绝对路径用file://协议，网页使用http://打开
无法访问file://协议打开
实例<img src="file:///C:/sunyang.jpg" />
3使用相对路径，推荐使用的唯一方式，
a 图片在当前文件的下一层，我们的写法是“文件夹名/图片名”
实例<img src="img/img/sunyang,jpg" />
b图片与当前文件在同一层，直接写“图片名”
C图片在当前文件的上一层，我们是写法是“../图片名”
<img src="../sunyang.jpg" />

注意：图片必须包含在项目里面，不能退出项目根目录
2. width height 宽度，高度属性
3. title：鼠标指上时显示的文字
4. alt：图片无法加载时，显示的文字。省略alt,将默认显示title内容
5 align：图片周围的文字相对于图片的排列方式。top文字居上，center文字居中 bottom文字居底

我们老师讲解的很详细呢。。还有举栗子。。。

5 讲解的是超链接a标签，这个更重要了：

1. href属性：超链接跳转的地址，可以是网络链接，也可以是本地HTML文件的相对途径。
2.traget属性：超链接新页面打开定位位置。_slef在当前页面打开(默许) _blank在新页面打开
3.title属性： 鼠标指在超链接上显示的文字。
【功能性超链接】
1.mailto:给指定邮箱发送邮件
<a href="matilo://jianghao@jerei.com">点击给帅哥发邮件</a>
2.tencent:与指定QQ聊天
<a herf="tencent://message/?uin=求求号">与帅哥聊天</a>
3.锚链接：点击超链接，可以跳转到页面的指定位置（锚点）
1.在页面的指定位置定义一个锚点<a name="center"></a>
2.将超链接的href属性改为"#锚点名称"
<a href="#center">跳到div上方</a>
3跳转到其他页面锚点的方式：
<a href="其他页面地址.html1#center">哈哈哈</a>

讲解属性加上例子，很详细的。

6.

w3c倡导的web
1。内容与表现分离。html与css分离
2。内容与行为分离。html与javaScript分离
3。html代码，必须要实现语义化

【w3c的规范】
1标签名和属性名称必须小写
2HTML标签必须关闭
3属性值必须用引号括起来
4标签必须正确镶嵌
1镶嵌的标签，不能发生交叉；
2块级标签可以包裹行级，行级标签不能包裹块级；p标签不能包裹p标签等。。。

这个了解就好了

四。就是表格了

1首先，我们知道表格用table表示。。

表格table中一行中tr表示，一行中的每个单元格用td表示；

首行的表头中每个单元格，用th表示，th默认文字会加粗，居中。

2表格的常用属性真的好多：

【表格中的各种属性】
1.border:给表格的每个td加整个table加边框，如果border的值大于1.则只有最外层的边框加粗，td上的边框不变。
2 cellspacing:设置单元格与单元格之间的间距，cellspacing="0"可以设置边框之间间距为0，但是相邻的边框不会合并。而是显示两条线的宽度。
【设置表格边框合并】
可以使用CSS设置:style="border-collapse: collapse;"合并
设边框置合并以后，cellspacing属性将会失效。
3 cellpadding:单元格内边距，单元格中文字与边框之间的距离
4 width/height 表格的宽，高
5 align 设置表格在浏览器中居左居中居右
6 bgcolor背景色 bordercolor边框颜色 background表格背景图 背景图跟背景色同时存在时。背景图生效。

【表格的行列属性】
作用于tr或者td上面的属性:
1 width height 宽度 高度
2 bgcolor：背景色。
当表格的属性与行列的属性发生冲突时，优先级采用"近者优先"的原则 table<tr<td
3 align属性设置单元格中的文字,水平对其方式 :left center right 
valign 设置单元格中的文字，垂直对其方式：top center bottom
【表格的跨行与跨列】
1.跨列： colspan="n"如果某个单元格夸n列，则该单元格右侧n-1个td就不需要了；
跨行： rowspan="n" 如果某个单元格夸n行，则该单元格下方n-1个td就不需要了；

3表格的结构化：

表格的结构化
完整的表格结构，包括：
caption:表格的标题，无论<caption>标签放在表格第几行，表格标题永远放在表格最上方居中。
thead：表格的表头部分，永远放在表格最上部。
tbody：表格的身体部分，在thead之下，tfoot之上。
tfoot：表格的尾部，永远在表格最下部。

表格的直列化：
表格有几列，就可以在表格最上方写几个<col />标签，每个<col />标签对应第几列，可以对<col/>标签修改样式
添加name等属性，表示这一列的所有td同步修改：
如果，需要对多列需改共同样式，可以使用<colgroup></colgroup>标签包裹多个<col/>。

五。表单;

1

form表单
1.form表单有两个重要的属性 
action：表示将表单提供给哪个服务器地址：
method:表单提交数据的方式，可选择值有get和post两种。
【get和post区别】
1.get使用url传递数据，所有内容在地址栏可见，不安全。
post的数据无法在地址栏看到，比较安全。
2.get传递的数据量有限，而且只能传递纯文字内容；
而post可以传递大量数据，而且可以传递图片。视频等文件。
3.get的传输速度要比post快。
【get传递url的格式】
http://原来的地址.html?name1=value1&name2=value2
比如：http://127.0.0.1:0020/0595.html?usename=123
所以input使用时，name属性必不可少，缺少name，将导致该输入框的数据不想后台传递。

2【input的常用属性】
1.type表示当前输入框是何种类型的输入框
2.name给输入框起别名，向后台传递时，使用name=value的形式传递
3.value：当前input的默认值
4.placeholder:输入框的提示内容，当输入框有value时，显示内容消失。
5.隐藏当前输入框，可写成hidden=hidden，也可以省略属性值只写<input type="text“ hidden />
隐藏的输入框内容依然可以向后台传递数据。
6 disabled禁用当前输入框，可以显示，不能使用。被禁用的输入框内容，不能像后台传递数据
7.checked="checked"设置单选按钮/多选按钮，默认选中
3【input的type类型】 
1.text:普同的文本框
2.password:密码框，输入的内容为小黑点
3.radio 单选按钮。单选按钮的value不能省略，这个value需要传到后台：
单选按钮凭借name是否相同，区分按钮是否为同一组，同一组按钮只能选中一个，name必须相同。
checked=“checked”设置单选按钮，默认被选中 
4.checkbox:多选按钮，其他与单选按钮相同 
5 . file:文件上传框
accept属性可以限制只能上传何种类型的文件。"*"表示可以接受所有文件，"image/*"表示只能接受图片。
multiple="multiple" 设置可以上传多个文件。
6. sumbit:表单提交按钮。
7. reset:表单重置按钮，点击将表单恢复为初始状态。
8.image： 叫做图形提交按钮，src属性导入图片，与 submit都具有提交表单的作用。
9. button： 显示为按钮形状，但是没有任何作用。
10：隐藏的输入框，与普通的输入框+hideen="hidden"的作用相同。
4
select下拉选择区块
① select 里面的每一项，用<option></option>标签表式
② name 属性需要写在select标签上。
③ option如果有value属性，则像后台传递的事value的值，如果没有value属性，则传递的是<option></option>标签之间的文字。
④ option添加属性selected="selected"属性
⑤ selected添加属性multiple="multiple"设置下拉控件可以多选
⑥ option添加属性title,表示鼠标指上后显示的文字
⑦ select可以使用<optgroup></optgroup>，标签对选项进行分类，用label属性显示分组名。
5
textarea：
①文本域大小控制，
可以使用文本域属性colspan="20"(宽度多少字符) rows="10"（高度多少行）
可以使用css样式style="width:100px height:100px;"
②设置文本域大小不能拖动：
style="resize:none;"
③ 设置文本域为只读模式，不能修改
<textarea readonly="readonly"></textarea>
④ 文字超出区域处理，使用overflow可以设置文字超出区域的显示的方式；
>>> overflow:hidden;超出区域的文字隐藏不显示；
>>> overflow:scroll：无论文字多少，都会显示水平垂直滚动条
>>> overflow:auto 自动，默认效果，文字多，显示滚动条，文字少，不显示滚动条。
>>>可以使用overflow-x ,overflow-y单独修改两个方向的滚动条
overflow-y:scroll; overflow-x:hidden;

2 【HTML5】智能表单：

【HTML5智能表单】
1.H5给我们提供了将form外的input与表单关联的方式，只需要给form表单起一个id。然后给表单外面的input添加form属性
，指向这个id，就可以实现表单与input的绑定。
<form id="ff"></form>
<input form="ff"/>
2.H5给我们新增了input的新的type类型，
range color date email url

3.H5新增的input属性：
① form属性：关联指定表单的id
② placeholder:输入框的提示内容
③ required="required" 必填
④ Autofocus="Autofocus"指定输入框，自动获得焦点
⑤ autocomplete:是否开启自动提示完成功能。默认为开启状态，设置为off表示关闭，设置为on表示打开

六：CSS

1css的 常用选择器，写法，以及注意事项等：

1首先陈述一下CSS的修改页面的属性

css修改页面的所有标签，必须借助选择器选中。*选择器中可以写多对css属性，用{}包裹
 每个属性名与属性值之间用：分割多对属性之间，必须用;分割。

2

标签选择器
*写法：HTML标签名{}
 作用：可以选中页面中，所有与选择器同名的html标签。

3

类选择器（class选择器）
 写法：.class
 调用：在需要调用的选择器样式的标签上，使用class="class"名调用选择器 
 优先级：>标签选择器

4

d选择器
 写法：#ID名{}
 调用：需要调用的样式的标签；起一个id名="id名"
优先级id>class选择器
注意：一个页面中不能出现同名id

5id选择器与class选择器的区别：

id选择器与class选择器的区别
1：写法不同：class选择器用.声明。id选择器用#声明
 2.优先级不用：ID选择器>class选择器
*3.作用范围不同：class选择器可以多次调用，ID选择器只能使用一次。

6

*选择器
 写法 *{}
 作用：可以选中页面中所有的HTML标签。* 优先级：最低！！！

7

【并集选择器】
 1写法：选择器1，选择器2，.....选择器n
 生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效

8

【交集选择器】
写法：选择去1选择器2。。。。选择器N，所有选择器紧挨着，没有分割
 生效规则：多个选择器去交集，必须满足所有选择器要求，才能生效

9

后代选择器】
 写法：选择器1 选择器2 选择器n{}
 选择器之间空格分割，
 生效规则：只要满足，后一个选择器是前一个选择器的后代，即可生效。
 （后代包括子代，孙代，重孙代。。。）* 
 通俗的讲，只要后代一个选择器，在前一个选择器里面即可

10

【子代选择器】
写法：选择器1>选择器2>选择器n{}
 选择器之间用>分割
 生效规则：必须满足。后一代选择器是前一个选择器的直接子代，才能生效。
 （中间不能间隔任何标签）

11选择器 的命名规范：

选择器的命名规范】
1.只能纯字母，数字。下划线。减号组成、。
2.开头不能是数字，也不能是只有一个减号。
 3.一般，起名要求有语义，使用英文单词与数字的组合。

七，css的背景属性

【css背景属性常用】
 1 background-color：背景色
 2. background-image：背景图：使用url（）选择背景图，背景图和背景色同时存在。背景图覆盖背景色
3.background-repeat：背景图的平铺方式
4.background-size：背景图的大小
指定宽度高度的写法
>>>宽度高度的指定，可以写px，也可以写%。（父容器宽度的百分比）
>>>当写两个属性时：分别表示宽度，高度；
>>>当写一个属性时，表示宽度，高度将会等比缩放：

其他属性：

enter,bottom
当，只写一个时候，另一个默认居中
>>>指定坐标：两个属性分别表示水平位移，垂直位移>>>contain：图片等比缩放，知道宽或高中较大的一边缩放到百分之百为止，
（可能导致较短的一边小于百分之百，图片无法盖住全部区域） 
>>>cover:图片等比缩放，知道宽或高中较小的一边缩放到100%为止。
（可能导致较大的一边>100%，图片超出区域显示不全） 

background-position ： 背景图偏移量
>>>指定位置：left,center,right, top,c
①坐标的值可以是PX单位，也可以是百分数
②当写像素单位时：水平方向，正数右移，负数左移，正数下移，负数上移（左负右正，上负下正）
③ 当写百分数时，一般只能是正数。表示的是去掉图片的宽高剩余部分的比列
eg：background-position:30%;水平方向去掉图片宽度，剩余部分3比7分。

list-style:修改列表小黑点的样式：
none:去掉小黑点；
url()：可以使用url导入一个小图片，作为列表的标识符

举个平移的列子：

#div
{
width:200px;
height:200px;

background-image:url(img/QQ图片20170726153653.gif);
background-repeat:no-repeat;/*repeat repeat-x repeat-y*/
/*background-size:20px 20px;/*contain,cover*/
/*background-position:50px 50px;*/

#div2 {
width:20px;
height:25px;

background-image:url(img/QQ图片20170728104306.gif);
background-position:-130px 0px ; 
white-space:nowrap;
line-height:25px;
text-indent:25px; 

}
#div3{

background-image:url(img/QQ图片20170728104306.gif);
width:25px;
height:30px;
background-position:0px -165px;
line-height:30px;
text-indent:25px;
white-space:nowrap
}
#div4{

background-image:url(img/QQ图片20170728104306.gif);
width:45px;
height:25px;
background-position:0px -27px;
font-size:12px;
line-height:25px;
text-align:center;
}

</style>

</head>
<body>

<!--<div id="div">
这是一个div文字

</div>-->

<div id="div2">
购物车
<div id="div3">

救助中心
</div>
</div>

<div id="div4">
登录
</div>

八：css常用文本属性：

CSS颜色表示方式
1.直接使用颜色的单词表示，red,green,blue.

②使用颜色的十六进制数表示，#ffffff，
 六位数两两分组，分别表示红，绿，蓝的配比
 ③ 用rgb表示：(0-255,0-255,0-255);三位数分别表示红，绿，蓝的配比
 rgba第四位数，表示透明度

css常用文本属性
①字体字号类：
font-weight：表示的是字体粗细 bold:加粗 normal：正常，lighter：细体
也可以使用100-900数值，400表示normal，700是bold
 ② font-style：字体样式。italic-倾斜，normal-正常
 ③ font-size: 字体大小,可以写像素单位，也可以写百分号，例如百分之200，表示浏览器默认大小(16px)的两倍=32px
 ④ font-family:字体系列（字体族）。可以直接写字体名，也可以写字体系列名，常用字体系列名
* >>>常用的字体系列：serif-衬线体，sans-serif非衬线体
* font-family可以接受多个值，用逗号分离，表示优先使用第一个，如果没有这个字体，，依次向后使用，通常，
* 最后一个值放字体系列名；
* eg： font-family：“黑体”，“微软雅黑”，sans-serif;
*⑤ font缩写形式：
* >>>顺序必须是font-weight,font-style,font-size,/line-height font-family
* >>>不同属性之间用空格分割，font-size/line-height必须一组，用斜线分割，
* >>>font-family多个字体之间，用逗号分隔。
* 例如：font: bold italic 32px/50px “微软雅黑”，serif;
* 
*2 字体颜色
* ①color：字体颜色，可以是单词，十六进制。RGB等
* ②opacity透明度，可选值0-1，
* [opacity和rgba的区别
* ①RGBA本身可以设置颜色，而opacity必须配合其他颜色属性来用，
* >>>RGBA仅仅是让当前元素设置 的颜色透明；
* 而opacity，会让当前元素里面的所有文字,背景,子元素都透明；]
* 
* 3【行距,对齐类,其他类】
* 1 line-height:行高。可以写px单位，可以直接写数字（表示默认行距的几倍）可以写%（表示默认行距的百分比）
* >>>行高重要作用：让单行文字在div中垂直居中。
* 设置行高等于div的高度，即可让单行文字垂直居中。
* 2 text-align设置区域内的行级元素水平对齐方式
* 3 letter-spacing:字符间距，字与字之间的距离
* 4 text-decoration:文本修饰：
* under-line 下划线 over-line上划线 line-through 穿过 none删除线
* 5 overflow设置超出区域的显示方式(上面有)
* 6 text-overflow:设置多余文字的显示方式，
* clip多余文字裁剪掉 ellipsis多余文字省略号显示
* >>>显示省略号，需要配合white-space:nowrap，使用
* >>>重点，，设置行末显示省略号（三行代码，缺一不可）
+++++++++* over-flow:hidden
* white-space:nowrap
* text-overflow:ellipsis

 7 white-space：nowrap;设置文字行末，不断行显示。
 ⑧ text-indent：首行缩进
 ⑨-webkit-text-stroke:0.5px blue;文字描边。
 -webkit-表示的只有webkit内核的浏览器生效，常见的有chrome,safari
 ⑩text-shadow:文字阴影有四个属性值，空格分割：
>>> 水平阴影距离，正数表示阴影右移，负数左移
 >>>阴影距离垂直；正数表示阴影下移，负数表示上移
 >>>阴影模糊距离：0表示阴影一点不模糊；
 阴影的颜色：
 eg:text-shadow:20px 20px 2px blue;

九：导入方式跟优先级：

【优先级的权重问题】
* 1.css生效的第一原则是”近者优先“！即；那个选择器作用于最里层标签，那个选择器生效：
* 2.当选择器作用于同一层时，可以根据优先级权重，进行累加计算；
* id选择器是100，class选择器是10，标签选择器是1，
* 注意：并集选择器相当于多个选择器拆开写，所以，并集选择器的优先级不能累加。
* 3.当选择器作用于同一层，且优先级权重相等时，则写在最后的选择器生效。
*/
/*【引入css的三种方式】
* 1. 行内样式表：直接在HTML标签中，使用style=""的方式引用：
*<div style="height:100px;"></div>
* 优点：使用灵活，优先级权重最高。
* 缺点：不符合w3c关于“内容与表现分离”的要求，不利于样式复用；
* 2.内部样式表：在<head></head>标签中使用<style>标签包裹css代码，
* 特点：一定程度实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面共用样式。
3.将css单独写入CSS文件中，并与HTML文件关联
优点：彻底实现HTML与CSS的分离，符合w3c规范，有利于多页面复用统一样式
* 
*/

/* 【导入css的两种方式】

* 1.在<head>标签中，使用link链接：
* <link rel="stylesheet" type="text/css"
* href="css/02-CSS.css" />
* ②。在<style>标签中使用@import导入：
* @import url("css/02-CSS.css");
* 
* 【两种导入方式的区别】
* ①：link属于标准的html标签，@import不是标准的标签
* ②：link可以兼容所有低版本浏览器，而@import只在css2之后能用
* ③：link是将两个文件连接起来，起桥梁作用，而@import相当如将css文件复制到HTML文件中；
* ④：link会在HTML文件边加载的过程中，边链接css文件，而@import会在HTML文件全部加载完以后在加载css文件；
* 综上所述我们使用link链接的方式，加载css文件。
* 
* */
@import url("css/02-CSS.CSS”)

十

【伪类选择器】
1写法：伪类选择器，在选择器后面，用；分割，紧接伪类状态；
eg：.a:link
2.超链接的伪类状态：
：link未访问状态 :visited已访问状态
:hover鼠标指上状态 :active激活选定状态（鼠标点上未松开）
注意：当超链接多种伪类选择器同时存在时，必须按照link-visited-hover-active的顺序，否则
会导致部分选择器不生效。
3.【input的伪类状态】
input的伪类状态
：hover鼠标指上状态
：focus：获得焦点状态
：active激活选定状态
注意：当超链接多种伪类状态同时存在时，必须按照上面的顺序；
4 其他标签：基本只用:hover事件

* */

.a:link{
color:blue;
text-decoration:none;
}
.a:visited{
color:red;
text-decoration:overline;
}
.a:hover{
color:yellow;
text-decoration:underline;
}
.a:active{
color:green;
text-decoration:line-through;
}
input:hover{
color:red;
}
input:focus{color:blue;

}
input:active{
color:green;
}

</style>

</head>
<body>
<a href="http://www.baidu.com" class="a">
这是一个超链接
</a>
<input type="text" value="111">

栗子非常详细

十一

margin 外边距
1.只写一个值：表示四周的外边距均为指定的值；
2。只写两个值：第一个数为上下外边距，第二个数为左右外边距
* 3 写三个值：分别表示上右下三个方向，左边默认等于右边
* 4.写四个值表示上右下左四条边顺时针方向
* 5. margin:0 auto； 设计块级元素在父容器中；水平居中！！！！！
* 
* */

/*
* padding：设置方式与margin完全相同，(内边距)
* 注意：设置padding：将会导致div区域完全被撑大！！！使用必须注意div实际宽度为多少！！！
*/

/*边框border
1.设置边框需要三个属性，宽度，样式，颜色，原则上三个属性缺一不可，顺序可以随便修改；
2可以使用top.right.bottom.left分别设置四个边

复盒子包裹子盒子时，给盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，而是会导致，两个盒子同时下不来。
* 【解决方法】
* 1.给父盒子添加一点点padding-top；不推荐使用，会导致父盒子结构多余1px padding；
* 2.给父盒子添加1px的border-top；同时会导致1px的多余空间；不推荐使用。
* 3.给父盒子或者子盒子添加浮动；可能会由盒子浮动；程度一定的影响页面的布局；
* 4，给父盒子添加overflow属性，推荐使用；

border-radius圆角
* 1 border-radius可以接受8个属性值，分别表示：
* x轴（左上、右上、右下、左下、）/y轴（左上、右上、右下、左下、、）

{border-image图片边框}
1.border-image一共可以放十个属性值：
* ①图片的路径：url（）
* ②图片的切片宽度：4个值，分别代表上右下左四个边：通过四条切线切割后，可以将图片分为9宫格
* 9宫格四个角分别对应边框的四个角（不会进行任何拉伸），9宫格四个边分别对应四条边框（会根据设置进行拉伸/铺完/重复等操作）
* 注意写的时候不能带px单位！！！！
* ③边框的宽度：四个值分别代表上右下左四条边框的宽度
* 注意：写的时候，必须带PX单位，与切片宽度用/分割！！！
* ④边框的重复方式：stretch（拉伸）、round(铺满) 、repeat(重复)
* 【round和repeat的区别】
* round:会对四条边进行适当的拉伸，确保四条边可以重复整数
* repeat:会保持每条边的长度比列不变，可能会导致四角处无法显示一条完整的边；
* 
* 2属性值的写法： border-image ① ②/③px ④；
* border-image在webkit浏览器中，必须带-webkit-前缀。
* 
* */

{box-shadow 盒子阴影]
1. 6个属性值用空格分割
* ①。x轴阴影距离（必选）：可正可负，正一右移，负--左移；
* ②y轴的阴影距离（必选）：可正可负，正--下移 负--左移；
* ③：阴影的模糊半径（必选）：只能为正；默认为0，数值越大，阴影越模糊；
* ④阴影的扩展半径（可选），可正可负，默认为0数值越大，阴影扩大；数值减小；阴影缩小；
* ⑤阴影的颜色（可选）：默认为黑色
* ⑥内外阴影（可选）：默认为外阴影，inset为内阴影；
* 
* */
box-shadow:10px 10px 10px 3px red inset;
outline:20px solid red;
/*outline 外围线：显示在border外面，并且不会占据空间，可能会覆盖四周的内容。

2缩写形式将会：
只写x轴，y轴默认等于x轴；
四个角写不全，默认对角相等；
只写一个值默认八个数均等；
eg:border-radius:50px 20px;
=border-radius:50px 20px 50px 20px;
*=border-radius:50px 20px 50px 20px;/50px 20px 50px 20px;
* 
* 3.当圆角弧度>=正方形的边长的一半，将会显示为圆形。
* */

十二

1标准流中的块级盒子，宽度将会是自动伸展为100%；
* 而浮动的块级盒子。宽度不会自动伸展，而是由内容撑开；
2当一个盒子浮动，标准流中未浮动的其他盒子，将视为浮动盒子不存在而占据浮动盒子原来的位置。
（浮动盒子，会盖在这个盒子的上方） * 
* 但是。未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响（未浮动盒子中的内容，不会被这个盒子盖上）
*

父盒子没有指定高度，如果父盒子没有浮动，则父盒子的高度可以被盒子撑开。
* 如果，父盒子中的所有盒子都浮动，则父盒子高度将会变为0
* 
* {解决所有子盒子浮动，父盒子高度塌陷的问题}
* ①给父盒子也添加浮动
* ②给父盒子添加overflow：hidden属性：推荐使用！！！
③在父盒子最后添加一个高度为0的div。给这个div加clear：both属性，清除掉浮动效果。
④可以将第三条的div用伪对象选择器::after

盒子模型的分类}

* 标准盒子或者w3c盒子，我们设置的盒子宽度和高度仅仅包含content部分，再添加padding或border，会导致盒子变大
* 2 ie盒子（怪异盒子）：我们设置的宽度和高度 会压缩在content区域，但盒子总大小不变；
* 
* {手动盒子的分类}
* box-sizing:border;怪异盒子
* box-sizing:content-box标准盒子，默认效果。

十三

/*相对定位relative
1.使用position：relative，设置元素为相对定位元素；
2使用top\right\bottom\left调整元素位置。当left和 right同时存在时,left生效，
top和bottom同时存在时，top生效。
3定位机制：
①相对定位是相对于自己原来的位置定位，当top等属性不指定时，元素位置不会发生改变。
②相对定位不会释放掉在原有文档流中的位置，不会影响其他文档流的位置。
4关于元素z轴重叠
① 定位元素，默认的z轴高于普通的文档流元素。
② 同为定位元素，“后来者居上”。后面的盖住前面的
③可是使用z-index手动调节定位元素的上下层关系z轴顺序；
④z-index默认为0，而且只能用于定位元素

1 使用position:absolute；设置元素为绝对定位；
* 2 定位机制；
* ①相对于第一个非static定位的祖先元素进行定位。
* （即，相当于使用了 relative. absolute.fixed定位的祖先元素进行定位)
* ②如果所有的祖先元素都为定位，则相对于浏览器左上角进行定位；
* ③使用absolute的元素，会从文档流中完全删除，所有空间会被释放。
* 
* 
* 
* 
* 【固定定位 fixed】
* 1。使用position:fixed设置固定定位。固定定位是一种特殊的绝对定位，只是祖先元素无法使用定位锁住
2 定位机制:永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动进行滚动。

1作用：根据z-index属性设置的数值，决定元素在z轴方向上的层叠次序；
*②使用要求：z-index只能给定位元素调整层叠次序。
* relative.absolute.fixed.
2.元素的z-index属性要考虑父容器z-index的约束，
>>>如果父容器设置了z-index属性，则子容器所有属性，不能脱离父容器的层次约束，（
即，父容器设置了z-index，则子容器只能以父容器的数值为准，再给子容器
设置z-index，只能调整子容器在父容器层次之内的层叠次序）
>>>如果父容器没有设置z-index，或者设置为z-index:auto：则子容器调整z-index将不受父容器层次约束)

* 3 z-index：auto z-index:0; 异同：
* ① z-index：auto是默认值，与z-index：0；处于同一平面；
* ③ z-index：0； 会约束子元素必须与父容器在同一平面；
* z-index：auto：不会约束子元素的层次；
*

{clip 属性}
* 1.作用：clip属性用于裁切图片标签，显示图片的指定区域，
* 2.使用要求：clip属性，只能作用于有absolute活fixed定位的图片标签上
3clip属性，接受一个rect()函数，函数传入四个值，分别表示上右下左四条切线的位置；
注意：与其它属性不同的是，rect中的四个值，上下两个值的距离都是从上边框量取，左右两个值从左右 量取，，
*

十三

1实现块级元素在父容器水平垂直居中】
* ①设置子容器为定位元素：
* ②left:50% margin-left:-width/2
top:50% margin-top:-height/2

2使用元素增大负边距的高度]
1①子容器的宽度，不指定，只指定高度，或者由内容撑开高度；
② margin： 0px -50px，可以使左右两边均超出父容器50px；
* 
* */
/*

* 
* 负边距的第二个应用：解决多个div的边距问题*/

十四

display 属性
* 可以设置元素以何种形式显示，可选值：
* 
none:隐藏元素；
* block：显示为块级元素
* inline:显示为行级元素;
inline-block:显示为内联块级元素；本身将是一个行级元素，但是。拥有块级元素的所有属性。比如：宽度。高度。margin 。padding等。。
【常见的inline-block级别的标签】
<img> <input> <textarea></textarea> <td></td>

【隐藏一个元素的方式】
1 。宽度或者高度设为0px 配合overflow:hidden；属性
* 2.display：none 显示display:block;
* 3.opacity:0 设置为全透明，但是元素的空间会占据。
* 4.visibility:hidden 隐藏元素，但是元素所在的空间依然会占据，与opacity：0效果很像；
* 显示visibility隐藏的元素：visibility visible,

【css3新增的属性前缀】
-webkit- :chorme/safari浏览器
2-moz- : 火狐浏览器；
3-ms-：IE浏览器
4 -o-： Opera 欧朋浏览器
* 
* 
* 
* 【css 长度单位】
* 1.px 表示像素。长度是固定的，表示占分辨率的几个像素点；
* 2. % 表示相对于默认值的百分比。
* 3.em ：长度与元素的字号挂钩。
* 4.rem: 与根元素的字号挂钩。即：与HTML标签的font-size挂钩，如果不设置字号，则默认字号为16px；
* [em与rem的区别]
* em是与自身元素的font-size挂钩，如果当前元素没有设置，则向上查找祖先元素的字号，直到根字号；
* rem与当前元素字号无关，直接与根元素字号挂钩。
* */
html{

/*font-size用于元素的16px的值，改变rem的值。:48px*/;}

css3背景属性】
* 1. background-clip:设置背景图的裁切区域。
* >>>border-box从边框外缘开始显示；
* >>>padding-box从边框内缘开始显示;
* >>>content-box从文字内容区域开始显示;
* >>>如果不在现实区域的背景图背景色会被裁切掉不显示;
>>>background-origin:设置背景图从哪里定位；
>>> border-box：背景图左上角从边框外缘开始；
>>>padding-box：背景图左上角从边框内缘开始；
>>>content-box：背景图从文字内容区域开始；

>>> background-origin:不会改变背景图的区域大小，只是决定背景图的左上角从哪里开始定位；
>>>background-clip:只负责裁切显示的区域，但是并不关心背景定位哪里。 

4 background-attachment:背景图的跟随区域滚动。默认效果。
>>> scoll：背景图跟随区域滚动。默认效果；
>>> fixed: 背景图充满整个区域，背景图是固定的，不随滚动条滚动；

5.background缩写形式： background-color background-image background-repeat backround-attachment background-position
* */

*transition:过度属性 接受四个属性值

* ① 设置那个css属性参与过度； 可以直接指定all/none
* ② 设置过度多少时间完成，通常 .3s .5s
* ③ 过度的样式效果，通常选择ease；
* ④ 多度延时几秒后在开始，可以省略不写；
* 
* transition可以同时定义多个过度效果，用,隔开。
* eg:transition: width .5s ease,height 1.5s ease;
*

transform定义变换属性】

* 1.常用的变换函数
* >>>translate(10px;10px)平移，第二个不写默认为0
* >>>>scale(1.1)缩放，第二个不写 默认等于第一个
* >>>rotate(900deg) 旋转 默认绕z轴转，可以使用rotateX(或者y轴)等
* >>>>skew(20deg ,30deg) 扭曲 水平、垂直方向扭曲多少度；
* 
* 
* 2 transform可以同时实现多种变换。用空格分离
* eg: transform:skew(20deg) scale(1.3) transform(100px);
* 
* 
* 
* 3 transform-origin 定义变换起点，常用于旋转变换。
* 可选值 left/center/right bottom/center/top
* 也可以直接定义x .y轴坐标点。第一个数为x轴。
* 例如： transfrom: rotate(90deg);
* transform-origin:right bottom;
* 表示：绕右下角旋转90度
*

css动画的使用]
1声明一个关键针（动画）：
@keyframe name{
form{}
to{}

}
阶段写法：
① 可以字节使用from-to的写法；
② 可以是0%-100%的写法，但开头必须和结尾必须是0%和100%；

* 2. 在CSS选择器中使用animation调用声明好的动画
*【animation的缩写形式】
* Animation-name:动画名称 ，就是我们声明的关键帧name；
* 
Animation-duration：动画持续时间

Animation-timing-function：动画速度曲线

Animation-delay：动画开始的时间，延迟

Animation-iteration-count：动画播放次数，默认为1.

Animation-direction：动画在下一个是否逆向播放，默认为normal 表示不进行逆向播放。 alternate表示下一次将逆向播放（100%-0%）

Animation-fill-mode：规定对象动画时间之外的状态。表示动画停留在何种状态。要使用这个属性，动画的执行次数必须是有限次

（forwards)：表示动画停留在结束状态， backwarks 表示动画停留在初始状态，默认效果。）

* >>>Animation-name和Animation-duration必须要设置，其他的选填，
* >>>animation可以同时设置多个动画。多个动画之间用逗号分辨
* animation:frame1 1s , fame2 2s.....