前端实践

# 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/