前端实践

# day06

1 定位

1.1 相对定位

1.2 绝对定位

1.4 固定定位

position: fixed;
left/top/right/bottom: 长度单位；

• 根据屏幕进行定位
• 脱离文档流 （宽度默认变成内容撑开）
• 元素设置为固定定位或绝对定位之后，会变为块状元素

1.5 元素的层级位置

z-index: number;   只能用于被定位的元素

2 布局知识点总结

元素垂直左右居中

position: absolute;
left: 50%;
top: 50%;
marign-top: -高的一半
margin-left: -宽的一半

元素水平居中

margin-left:auto;
margin-right: auto;

margin:0 auto;

text-align

• 让文字水平居中
• 内联元素(inline 和 inline-block)

line-height

• 让一行文字垂直居中。 line-height的值等于元素的高
• 内联元素(inline inline-block)

布局

1. CSS重置

• reset.css

  去掉所有元素的默认样式
  也可以保证浏览器效果相同
  

• normalize.css

  重新设计了所有元素的默认样式
  保证所有浏览器效果相同
  
  优点：
  添加了H5新元素的样式重置
  没有简单粗暴
  

2. 布局的H5新增标签(了解)

header
footer
main
aside
article
section
dialog

双标签，没有任何默认样式，跟div一样。 有语义

3 .字体图标

http://fontawesome.dashgame.com/