html笔记（5）

命名规范：

名字由数字、字母、下划线组成，不能数字开头
使用驼峰命名
使用对应内容英文作为名字
给大盒子用id名，盒子里面用类名

元素分类

常规分类：
块级元素：可以设置宽高，独占一整行
行级元素：不可以设置宽高，有多宽占多宽
行内块元素：可以设置宽高，有多宽占居多宽

元素嵌套的规则

行级元素包涵行级元素
块级元素可以包裹行级和块级元素
a可以包裹块级元素
p标签里面不能有块级元素

置换元素

浏览器根据元素的标签和属性决定显示的内容
非置换元素：除去置换之外的元素，就是非置换

元素类型的转换

display:block | inline-block | inline ｜ none
block：块
inline：行
inline-block：行内块

图片三像素

vertical-align：top ｜ middle
应用场景：
1.解决图片的3px问题
2.实现表格内容垂直对齐的方式这是

鼠标悬停

鼠标悬停在e身上
e：hover{}

定位

概念：将一个元素放在指定的位置上
语法：position：定位方式
坐标：left:*px | right:*px | top:*px | bottom:*px

定位方式

1.static静态定位：将元素的默认定位方式
2.fixed固定定位：基于浏览器窗口进行定位
3.relative相对定位：基于元素原来的位置进行移动
4.absolute相对定位：基于被设置非静态定位的最近上级元素进行定位，如果都没有，基于浏览器的第一屏进行定位

盒子完全居中未知大小的盒子

posiiton:fixed
  top:50%
  margin-top:-盒子高度的一半
  left:50%
  margin-left:-盒子宽度的一半；
  2.
position:fixed
top:0;left:0;bottom:0;right:0;
margin:auto

锚点

<div id='id名'>要跳转的区域</div>
<a href='#id名'>链接的文字</a>

透明度

opacity:数字（0-1）全部透明
Reba:(0,0,0,5)数字不会透明
兼容低版本：
filter:alpha(opacity=数值);0-100    0为透明