前端实践
# 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一样。 有语义
