前端實踐

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