透明度、定位、锚点、继承性、宽高自适应

元素的类型
1.块级元素block
 　   　　div,h1--h6,p,ul,ol,li,dl,dt,dd,hr,form,table,tr,td
　　　　独占一行,能设置宽高
　　　　p标签不能嵌套任何块
2.行内元素,也叫内联元素inline
　　　　a,span,b,strong,i,em,u,s,del,sup,sub,br,input,img
　　　　不自动换行
　　　　input和img是可以设置宽高,其余的不能设置宽高
　　　　margin和padding对行内元素(a,span)垂直方向没有实际作用
3.额外了解：置换元素
　　　　input根据不同的属性会呈现不同的样式
###元素类型转换
　　　　显示类型display
　　　　block块/inline行内/inline-block行内块/none无/
　　　　list-item列表/table-cell单元格
　　　　1.display:block;将元素转化为块级元素
　　　　可以解决img标签存在3px间距问题
　　　　2.display:inline-block;行内块(img)
　　　　特点：能设置宽高,元素不自动换行
　　　　隐藏知识点：行内元素一旦浮动,就能设置宽高
　　　　3.display:inline;
　　　　a,span的特点
　　　　4.display:none;
　　　　元素消失不可见,不再占据文档空间
　　　　5.display:table-cell;
　　　　将元素转化成单元格td--利用单元格有垂直居中特点

###透明度
1.rgba(45,78,120,0-1)
　　　　透明度值越小越透明--没有继承性
　　　　只能让纯色变透明
2.opacity:0-1
　　　　透明度值越小越透明--有继承性
　　　　还能让图片img变透明
　　　　IE9以下透明度的设置方法
　　　　filter:alpha(opacity=value);取值范围 0-100
　　　　IETester--IE专用的
　###元素的消失与可见
　　　　给父元素添加hover使子元素可见/不可见--模拟效果
　　　　###锚点
　　　　点击的位置<a href="#id名"></a>
　　　　跳转到的位置<div id="id名"></div>
　　　　<a name=""></a>
　　　　返回页面顶部
　　　　<a href="#">返回页面顶部</a>
###定位position
　　　　static静态定位(默认)
　　　　***relative相对定位
　　　　***absolute绝对定位
　　　　fixed固定定位
　　　　sticky粘性定位
1.position:relative相对定位
　　　　参考物元素本身---元素不脱离文档流，保留元素的原本位置
　　　　偏移属性:
　　　　top相对于自己顶部偏移
　　　　top:100px向下移动100px--向着中心点方向设置的都是正值
　　　　bottom相对于自己底部偏移
　　　　left相对于自己左侧偏移
　　　　right相对于自己右侧偏移
2.position:absolute;绝对定位--脱离文档流
　　　　参考物:外层具有position属性(默认除外)的元素
　　　　先找父元素--没找到就继续向上查找--最终未找到--参考body定位
　　　　偏移属性:
　　　　top相对于父元素的顶部
　　　　bottom相对于父元素的底部
              left相对于父元素的左侧
　　　　right相对于父元素的右侧
3.position:fixed;固定定位--脱离文档流
　　　　参考物是浏览器文档
4.position:sticky;粘性定位

###定位实现元素的水平垂直都居中
/****************************************************************/
##元素类型
块级元素div,p,h1--h6,ul,ol,li,dl,dt,dd,table,tr,td,hr,form
独占一行,能设置宽高
行内元素a,span,b,strong,i,em,u,s,del,input,img
不自动换行
##元素类型转换display
none无--元素消失，不占据空间
block块--具有块级元素特点
inline行内--不能设置宽高
inline-block行内块--元素不换行，还能设置宽高
list-item列表--li
table-cell单元格
元素垂直居中：
div{
display:table-cell;
vertical-align:middle;单元格和行内块
}
##透明度
background:rgba(255,255,255,0-1)--没有继承性
background:#fff;
opacity:0-1;--继承性
有继承性的属性：text-,line-,font-,color,opacity
##锚点
点击的位置<a href="#id名"></a>
链接到的锚点位置<div id="id名"></div>
<a name="id名"></a>
返回顶部的空链接<a href="#"></a>
##定位position
static默认--静态定位
relative相对定位
不脱离文档流
元素的微调
与绝对定位配合使用
参考物是元素本身
偏移top/left/right/bottom
absolute绝对定位
参考物
脱离文档流
fixed固定定位
脱离文档流
参考物是浏览器的可视窗口
sticky粘性定位

z-index调整元素的层叠顺序
想用z-index该元素必须有position属性,否则不生效
在前的元素z-index值只要比后面的大就行
兄弟元素(同级元素)之间比较是生效的

##伪元素选择器
:before在元素前添加内容
:after在元素后添加内容--清除浮动
:first-letter给第一个文字添加样式
:first-line给第一行添加样式
##display:none和visibility:hidden的区别
display:none--消失不占文档空间
visibility:hidden--消失但占文档空间
##***宽高自适应
1.最大宽度max-width
最小宽度min-width
最大高度max-height
最小高度min-height
height属性在IE6里就类似min-height作用
2.元素高度自适应窗口高度
html,body{height:100%}
3.浮动元素撑开父元素而不需要给父元素设置高度--维护性高
解决父元素高度塌陷
1)浮动元素的父元素设置overflow:hidden;
overflow:hidden;本意是溢出隐藏,在这里是触发了BFC
(块级上下文格式),浮动的子元素高度参与了计算,所以能
撑开父元素
缺点：会隐藏内部的元素,例如下拉菜单
2)清除浮动clear:both;
添加在最后一个浮动元素的后边的元素上
3)通过伪元素选择器:after添加