第一、二 html/css总结
html:
html:语义化的标签
div:块级 页面进行分割
span:行内标签
img:
ul ol dl
它的孩子只能是li
a:
href:链接地址 路径==》 相对路径： ../imgs/a.png
table
form
input
文本级的标签：p、a、span、i、em 只能放文本、图片、表单元素
排版标签：div、ul、ol、li、
行内标签：文本级标签中除了p，其它标签都是行内标签（行内块）
块级标签：所有的排版标签都是块级标签，再加上p、
css:
**************display、浮动、定位、z-index*************
行内标签：display：inline;
（1）在一行内显示
（2）不能设置宽高
（3）它的宽和高是内容的宽高
块级标签：display:block;
（1）独占一行
（2）可以设置宽高
（3）它的宽是父盒子的宽度100%；
行内块标签：img input display:inline-block;
（1）在一行内显示
（2）可以设置宽高
通过display属性对标签进行转化 none|inline-block|block
css选择器：
基础选择器和高级选择器
基础选择器：
标签选择器：选择的标签的‘共性’，而不是特性
div{}、ul{}、ol{}、form{}
类选择器：.box{}
id选择器：#box{} 只能选择器的特性，主要是为了js
*通配符选择器：重置样式
高级选择器：
后代选择器(儿子、孙子、。。。。。)
div p{}
子代选择器（儿子）
div>p{}
组合选择器：
div,ul,dl,form{}
交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器
//012
form input.active{
width:200px;
}
//002
form input{
}
伪类选择器： “爱恨准则”
a:hover{
}
伪元素选择器：
p:first-letter{
}
p::after{
}
/*解决浮动带来的问题*/
content:'';
clear:both;
display: block;
visibility: hidden;
height: 0;
}
权重问题：
数数的问题
行内的样式>内接样式>外接
权重问题比较
100>010>001
id>类>标签
（1）css的继承性：
继承来的属性权重为0，如果权重都为0，谁描述的近谁优先
#tt{}
.active{}
继承和权重
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
（2） 盒模型：
（3） 标准文档流
margin:调整兄弟之间的距离
padding:调整父子标签之间的位置，注意盒模型的计算
坑1：
margin垂直方向塌陷问题：
当设置第一个盒子为margin-bottom:50px;
第二个盒子为margin-top:100px;那么小的margin会掉到大的magin中，这就是margin塌陷
解决办法：float浮动就不会再出现塌陷
水平方向上不会出现塌陷问题。
‘奇技淫巧’
（4）浮动的现象
（1）脱标：脱标的元素不在标准文档流下占位置
浏览器认为第一个盒子不是标准文档流的盒子，认为第二个盒子为标准文档流下的盒子
（2）浮动的元素互相贴靠
（3）浮动元素有字围效果
第一个元素浮动，第二个元素不浮动，那么第二个元素的文字会围绕着第一个浮动元素显示
（4）凡是脱标（浮动、绝对定位、固定定位）的元素，不区分行内标签还是块标签，宽高可以任意设置
浮动永远不是一个盒子在浮动，要浮动一起浮动
（5）浮动带来的好处：
1.实现元素并排
2.可以按照自己的规则走（设置盒模型的宽和高）
（6）浮动带来的问题
父盒子撑不起来了
（7）浮动解决：
（1）给父盒子设置固定高度 百年不变导航栏
（2）内墙法：
给最后一个浮动的元素添加一个块级标签，并且该标签设置属性 clear：both;
（3）伪元素清除法：********
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
（4）overflow:hidden
（8）overflow:本意是隐藏
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
数据驱动视图
（9）浮动元素margin的问题
标准流下的标签,兄弟之间使用margin调整位置，父子之间使用padding调整子标签的位置（小心盒模型的计算）
脱标的元素，margin和padding可以任意使用
浮动的盒子： margin: 0 auto;不起任何作用
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
（10）css单位选择:
px: 绝对单位 固定不变的
em: 相对字体 根据父盒子的字体大小来设置的单位
%：
rem: 只根据html的font-size来调整页面所有标签的盒模型的大小
（11）line-height
(1)针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
(2)针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
（12）background: 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等
background-image:url(./1.jpg)
background-repeat: repeat|no-repeat|repeat-x|repeat-y
background-position: x y;
x和y如果是正值，意味着调整当前图片的位置信息，相对于原来的位置进行调整
x和y如果是负值，切背景图，注意：一定要有明确的width和height "精灵图技术"
雪碧图技术：
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分
CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？
其实就是 截取 大图一部分显示，而这部分就是一个小图标。
使用雪碧图的好处：
1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
不足：
1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印
要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
（13）iconfont
iconfont图标只能从这个 http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3 去获取
（14）定位：
(1)相对定位
如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、
只有一个作用：父相子绝
不要使用相对定位来做压盖现象
微调元素位置
二种现象：
1.不脱标
2.形影分离老家留坑（恶心）
(2)绝对定位
现象：
1.设置绝对定位的盒子，脱离标准流
参考点：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。（爱立信）
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
(3)固定定位
特性:
1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
（15）：z-index
这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。
-
-
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
-
