前端实践

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

原文地址:https://www.cnblogs.com/luck-L/p/9409481.html