CSS3學習筆記-元素定位
內邊距 邊框 外邊距
margin padding 簡寫順序:順時針方向。未聲明的一邊會應用對邊的值
border三個屬性
border-wdith 默認值medium
border-style 默認值none
border-color 默認值 black
寫代碼時最好先聲明*{margin:0px;padding:0px}
在設置兩個元素間的垂直外邊距時,同一個外邊距只會采用margin較大的那個值,不會疊加。而水平外邊距會疊加。
文本元素的邊距通常上下邊距使用em,左右邊距使用px
CSS盒模型
(1)沒有設置寬度的元素始終會拓展到和其父元素寬度相同為止
(2)有設置寬度的元素設置內邊距,邊框,外邊距都會增加元素的寬度
border-box 默認是content-box ,設置為box-sizing可以實現content-box的效果
浮動
浮動元素會脫離文檔流,實現的效果就是盡可能的向左上角或者右上角遷移
浮動非圖片元素時必須設置寬度,圖片有自身的默認寬度因而不用設置
有父元素的控制方式:
(1)設置overflow:hidden,可靠的使父元素包含浮動的子元素
(2)設置父元素也浮動,同時設置父元素的兄弟元素clear:left,這樣父元素的兄弟元素不會與父元素並排在同一行
(3)在父元素的最後添加一個非浮動的子元素,clear:left。或者應用.clearfix規則
.clearfix:after{ content:‘.‘, display:block, visibility:hidden, clear:both, height:0 }
註:句點是最小的內容。可以使用clear:both來設置,同時包含了left和right的情況
在沒有父元素的情況下,使用clearfix規則,最合適。
定位position
默認值static
相對定位relative:相對的是原來它在文檔流中的位置
絕對定位absolute:相對body元素進行定位。在未設置父元素的position屬性時,設置父元素的postion之後,子元素會相對於父元素進行定位
固定定位fixed:相對上下問的視口定位
顯示屬性display
塊級元素變內聯元素:display:inline 反之:display:block
inline元素的寬度隨內容變化,無法設置width和height,也無法設置除了左右之外的邊距
inline-block 相當於將block元素inline展示,可以設置寬高及上下邊距
背景
border-color的顏色在未設置的情況下會等於color
background-image:url(path/filename) 修改平鋪方式background-repeat 修改平鋪起點background-position
background-repeat: repeat-x repeat-y no-repeat round 通過調整圖片大小來適應背景區域 space通過在圖片間添加空白來適應背景區域
通過設置
background-positon:50% 50%; background-repeat:no-repeat;
實現背景圖片的居中效果,表示圖片50% 50%的位置和元素50% 50%的位置對齊
在設置background-position最好使用百分比
background-size用來調整背景圖片的大小 cover拉大圖片 contain縮放圖片
background-attachment 表示背景圖片是否隨著元素的滾動而移動
background簡寫
background: url() position color repeat size attachment
添加多張背景圖片
background: url(images/turq_spiral.png) 30px -10px no-repeat, url(images/pink_spiral.png) 145px 0px no-repeat, url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
先列處的圖片顯示在上方
漸變
linear-gradient線性漸變 radial-gradient 放射性漸變
CSS3學習筆記-元素定位