關於定位前面我有一篇比較詳細的部落格css 中 position屬性和z_index
通過定位可以將頁面中的元素,擺放到頁面的任意位置
通過position來設定元素的定位
可選值① static 預設值 元素沒有開啟定位
② relative 開啟元素相對定位 相對自己
③ absolute 開啟元素絕對定位 相對父元素
④ fixed 開啟元素的固定定位 相對瀏覽器
相對定位 relative
① 開啟元素的相對定位後,如果不設定偏移量元素不會發生任何變化
② 相對定位元素相對於其自身在文件流中的位置來定位
③ 相對定位的元素不會脫離文件流
④ 相對定位不會改變元素的性值,塊元素還是塊元素,內聯元素還是內聯元素
⑤ 相對定位的元素會提公升乙個層級
絕對定位 absolute
① 開啟元素的絕對定位後,如果不設定偏移量元素不會發生任何變化
② 絕對定位的元素是相對於距離他最近的開啟了定位的祖先元素進行定位,如果所有的祖先元素都沒有開啟定位,則相對於瀏覽器視窗進行定位
③ 絕對定位的元素會完全脫離文件流
④ 絕對定位會改變元素的性值.內聯變塊,快的高度和寬度都會被內容撐開,並且不獨佔一行
⑤ 絕對定位的元素會提公升乙個層級
固定定位 fixed
① 固定定位是一種特殊的絕對定位,它的特點大部分和絕對定位一樣
② 不同的是,固定定位的元素永遠都是相對於瀏覽器視窗進行定位的,並且不會隨滾動條滾動
偏移量① 當元素開啟定位以後,可以通過偏移量來設定元素的位置
② left 元素距離定位位置的左側距離
③ top 元素距離定位位置的上邊距離
④ right 元素距離定位位置的右側距離
⑤ bottom 元素距離定位位置的底部距離
⑥ 一般情況下,只是用兩個值即可定義乙個元素的位置
層級① 定位元素 > 浮動元素 > 文件流中的元素
② 當元素開啟定位以後,可以通過z-index來設定元素的層級
③ z-index值越高,元素越優先顯示
④ 如果z-index值一樣,或者都沒有z-index則優先顯示下邊的元素
⑤ 父元素永遠不會蓋住子元素
border-radius 屬性是乙個最多可指定四個 border -*- radius 屬性的復合屬性
當border-radius為50%的時候,正方形變為圓形.
語法:
border-radius
: 1-4 length|% / 1-4 length|%;
rgba 紅 綠 藍 透明度
opacity 設定透明度
repeat 預設值 背景會平鋪顯示
no-repeat 背景不重複
repeat-x 背景沿水平方向重複
repeat-y 背景沿垂直方向重複
設定方式一 : 直接通過幾個位置的關鍵字來設定位置
top、left、right、bottom、center
可以通過以上關鍵字任意兩兩組合形式,將背景設定到元素任意位置
如果僅僅指定乙個值,則第二個值預設為center
設定方式二 : 可以直接指定兩個值,來設定背景的偏移量
例如 : background-position : x軸偏移量 y軸偏移量
x軸偏移量,用來指定水平位置,＋向右移動,－向左移動
y軸偏移量,用來指定垂直位置,＋向下移動,－向上移動
使用方式 : background-size : length | percentage | cover | contain
cover : 放大,多餘隱藏
contain : 放大至邊角
預設值 背景會隨介面一起滾動
background-attachment : fixed
背景不隨頁面滾動,會固定在頁面指定位置
設定該屬性的背景,背景會永遠相對於瀏覽器視窗進行定位,一般這種背景設定給body
注意:上面四句的效果和下面一句的效果是一樣的,只需要把設定往background後面新增就可以,編譯器會自動調整對應屬性.
HTML 頁面布局
2.10頁面布局概述 頁面布局概述 1 table布局 通過table元素將頁面空間劃分成若干個單元格，將文字或等元素放入單元格中，隱藏 的邊框，從而實現布局。這種布局方式也叫傳統布局，目前主要使用在edm 廣告郵件中的頁面 中，主流的布局方式不用這種。2 html css布局 div css 主要...
html頁面布局
display 元素的顯示方式 black 塊元素 inline block 行內塊元素 內聯塊元素 none 無 隱藏 不單單是視覺上的，頁面布局中也徹底消失，不佔位置 塊元素 獨佔一行，可以設定寬高以及內外邊距。行元素 只佔內容大小的區域，不可以設定寬高和內外邊距。塊元素具備盒模型的屬性。行元素...
HTML 頁面布局
一 盒子模型 整體的寬 margin left right padding left right border content 整體的高 margin top bottom padding top bottom border content 二 頁面布局 1 標準流 按照原先格式排版塊兒元素等一些格...