border:1px solid red;
寬度 像素 顏色
background-image:url('~~~'); /*背景圖片*/
background-repeat:no-repeat;不重複
background-repeat:repeat-x;水平重複
background-repeat:repeat-y;垂直重複
background-position:0px 0px; x y 位移
background-size: 對圖片進行拉伸 寬高 ；
body 背景圖片
background-attachment:scroll;/fixed 固定 scroll 跟着滾動
background組合
background：color + img + repeat position
margin 水平居中 0px auto 外補白
margin 左邊有一個空白 可以當做參考值
span 不受寬高屬性的控制
默認的寬度是0 高度是1
padding 上下左右都可以起作用
madding 上下不起作用 只有左右起作用
可以在同一行 稱爲 行內元素
div 寬高受限制 默認自己獨佔一行
默認的寬度是100% 高度爲0 會把內容撐開
稱爲 塊級元素
定位position
相對的目標是自己
position:relative;
top right left bottom
z-index 相對的前後 相當於把二維空間轉換成三維
box-shadow x y 模糊度 外延 顏色
1.定位屬性
position 有四個取值
: static 靜態定位 默認值
: relative 相對定位
1)參考點 元素自身
2)只給relative,元素沒有變化,常在父元素中使用
: absolute 絕對定位
1)參考點 距離元素最近的具有"定位屬性"的長輩元素
2)具有"定位屬性",意思是,position的值爲 relative 或 absolute 或 fixed.
3)如果長輩元素中都沒有"定位屬性",那麼就把html標籤視爲參考點
4)元素將脫離文檔流,不再獨佔一行,後面的內容上移且被覆蓋
5)行級元素被轉化爲塊級元素,可以設定寬高了
6)常在子元素中使用
: fixed 固定定位
1)參考點 瀏覽器窗口
注意:
當position的值爲 relative、absolute、fixed 時,元素會具有下面的偏移屬性
left 距離'參考點'左邊的值 可以是具體值,也可以是百分比
top 距離'參考點'上邊的值 可以是具體值,也可以是百分比
right 距離'參考點'右邊的值 可以是具體值,也可以是百分比
bottom 距離'參考點'下邊的值 可以是具體值,也可以是百分比
z-index "z軸"的層疊順序 取值越大,元素越靠上層,取值越小,元素越靠下層
2.頁面中定位的常見用法
1)父元素相對定位 position:relative;
子元素絕對定位(依據父元素定位) position:absolute;
2)屏幕居中顯示,前提是,div元素寬度已知
a)設置固定定位 position:fixed;
b)設置偏移爲50% left:50%; top:50%;
c)設置負的外邊距 margin-left:-(寬的一半);
margin-top:-(高的一半);
3)屏幕右下角小廣告
a)設置固定定位 position:fixed;
b)設置偏移量 right:0px; bottom:0px;
::before{
content:'';
display:block;
}
display:inline-block:/*行級塊元素 並排在一行，且可以設置寬高*/
外層的高度一般不給
1.浮動屬性
左浮動 float: left;
右浮動 float: right;
2.浮動的作用: 使塊級元素並排顯示
3.浮動的副作用:
元素脫離文檔流,塊級元素不再獨佔一行,後續元素被覆蓋,父元素變成一條線,
行級元素變成塊級元素.
4.清除浮動(不讓後面元素受前面元素浮動的影響)
<div class='c0'>
<div class='c1'></div>
<div class='c2'></div>
<div class='c3'></div>
</div>
<div class='c4'></div>
情況1: 只對c2浮動, c3受影響
解決: 在c2和c3之間 插入 <div style='clear:both;'></div>
情況2: 對c1,c2,c3浮動 c0,c4都受影響
解決: 在c3之後 插入 <div style='clear:both;'></div>
1. display 顯示屬性 的取值
:inline 把元素當做 行級元素來顯示
:block 把元素當做 塊級元素來顯示
:inline-block 把元素當做 "行級塊"元素來顯示 並排顯示,且可以設置寬高
:none 隱藏元素, 且不佔屏幕位置
2. display:inline-block; 實現塊級元素並排顯示
存在問題:
1)元素並排顯示後,有空白間隙
解決: 讓元素標籤之間不要有空格
<div>1111</div>
<div>2222</div>
<div>3333</div>
改成
<div>1111</div><div
2222</div><div
3333</div>
或改成
<div>1111</div><div>2222</div><div>3333</div>
2)元素並排顯示後,與父元素之間有空白
解決: 元素中有內容就可以,只要非空就行
3)在ul li 結構中,li做爲一級菜單,出現二級菜單時,整體下拉
解決: vertical-align:top;
