android多解析度適配框架
html5前端開發實戰系列教程
走出思維困境，踏上精進之路——android開發高階精華錄
在html中，利用定位(position)可較為精確地定義元素顯示的位置，這個位置可以是相對於其本身出現的位置，也可以是相對於其上級元素的位置，還可以是相對於其他元素的位置，亦可為相對於瀏覽器視窗左上角的位置。
position:relative | absolute | static | fixed ;
top | right | bottom | left：mpx ;
現在分別介紹四種常用的定位(position)型別。
position:static是css中預設的定位型別，在該型別下元素以標準流的顯示方式，其位置不受top、bottom、left、right的影響。
請看如下示例：
lang
="en"
>
>
charset
="utf-8"
>
>
static定位title
>
type
="text/css"
>
*div
style
>
head
>
>
>
div>
body
>
html
>
的位置沒有發生改變。
相對定位position:relative用於設定元素位置，即相對於元素本身原來的位置進行調整。
相對定位特性：
我們先來看乙個不設定定位的例子：
>
>
charset
="utf-8"
>
>
無定位title
>
>
.fatherdiv
.bluesondiv
.greenyellowsondiv
style
>
head
>
>
class
="fatherdiv"
>
class
="bluesondiv"
>
div>
class
="greenyellowsondiv"
>
div>
div>
body
>
html
>
>
>
charset
="utf-8"
>
>
相對定位title
>
>
.fatherdiv
.bluesondiv
.greenyellowsondiv
style
>
head
>
>
class
="fatherdiv"
>
class
="bluesondiv"
>
div>
class
="greenyellowsondiv"
>
div>
div>
body
>
html
>
絕對定位特性：
絕對定位示例1
子元素採用絕對定位而父元素無定位。
>
>
charset
="utf-8"
>
>
絕對定位title
>
>
/* 父元素無定位 */
.fatherdiv
.bluesondiv
.greenyellowsondiv
style
>
head
>
>
class
="fatherdiv"
>
class
="bluesondiv"
>
div>
class
="greenyellowsondiv"
>
div>
div>
body
>
html
>
從結果中我們可以看到：
絕對定位示例2
子元素採用絕對定位而父元素採用相對定位(子絕父相)
>
>
charset
="utf-8"
>
>
絕對定位title
>
>
/* 父元素使用相對定位 */
.fatherdiv
.bluesondiv
.greenyellowsondiv
style
>
head
>
>
class
="fatherdiv"
>
class
="bluesondiv"
>
div>
class
="greenyellowsondiv"
>
div>
div>
body
>
html
>
position:fixed表示固定定位，即相對瀏覽器視窗定位。採用該定位後，不論頁面如何滾動，該盒子顯示的位置不變並完全脫離標準流。
請看如下示例：
lang
="en"
>
>
charset
="utf-8"
>
>
fixed定位title
有時使用float和position來實現某種效果，但是這很可能導致某些元素脫離標準流(脫標)；所以，應盡可能地避免脫標，可遵守以下原則：
講給後台程式設計師看的前端系列教程 21 偽元素
android多解析度適配框架 html5前端開發實戰系列教程 走出思維困境，踏上精進之路 android開發高階精華錄 在css中，偽元素用於將特殊的效果新增到某些選擇器。在此介紹幾個css中常用的偽元素。first letter用於向文字中的第乙個字設定特殊樣式，請看如下示例 lang en c...
好程式設計師前端教程css對齊方案總結
好程式設計師前端教程css對齊方案總結 垂直居中 通用布局方式 內斂元素和塊狀元素都適用 利用flex 核心 container 利用transformx 50 核心 container child 內斂元素的垂直居中 單行內斂元素 設定內斂元素的高度和行高相等 核心 container 塊狀元素 ...
好程式設計師web前端教程分享Date物件
好程式設計師web前端教程分享date物件，什麼是date物件乙個內建物件date 型別使用自 utc coordinated universal time，國際協調時間 1970 年 1 月 1 日午夜 零時 開始經過的毫秒數來儲存日期。date 型別儲存的日期能夠精確到 1970 年 1 月 1...