CSS學習筆記之定位

Lavender 發布于2019-08-28 18:02 / 700人閱讀

摘要：的盒子及相關盒子基礎，，版式邊框。可以設置盒子內容區與邊框的間距。將其設為則其空間可以被復用。把圖片調整到像素寬，像素高。拉大圖片，使其完全填滿背景區保持寬高比。簡寫簡寫后可以添加多張背景圖片，用，隔開，最先添加的在上層

CSS的盒子及相關 盒子基礎

postion，float，display——版式
? 邊框（border）。可以設置邊框的寬窄、樣式和顏色。
? 內邊距（padding）。可以設置盒子內容區與邊框的間距。
? 外邊距（margin）。可以設置盒子與相鄰元素的間距。

簡寫——上右下左，缺省取對邊值

較寬的外邊距決定了元素間的距離

沒有設置width，其width為父元素width

盒子的width是其內容區的寬度，增加邊距使整個盒子變得更大

浮動和清除

為父元素添加overflow：hidden屬性強制包圍浮動元素，該屬性真正左右是防止包含元素被內容撐大

在父元素中添加非浮動元素，或者通過clearfix添加，例子如下，content必須要有





It"s fun to float.



 Here is the footer element…

```CSS
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

- 對于子元素通過上面的clearfix處理也可以，在上例中就是給p加標記

####定位
- position：static，relative，absolute，fixed
- fixed與absolute的區別在于fixed時不隨屏幕滾動而改變，換句話說，它是對當前屏幕定位，而absolute是對于整個頁面定位
- 只有當position不為static時，top，bottom，left，right屬性才發揮作用
####顯示屬性
塊級元素（段落，標題等）堆疊顯示，行內元素（a，img，span）則并排顯示，直到這一行沒有空間才顯示到下一行，通過改display為inline，block可以調整。將其設為none則其空間可以被復用。
####背景

![1.jpg](http://upload-images.jianshu.io/upload_images/80283-5baf1fb4ebd2d37f.jpg)

? background-color
? background-image
? background-repeat
? background-position
? background-size
? background-attachment
? background（簡寫屬性）
-  比元素小的背景圖片會在水平和垂直方向上重復出現，直至填滿整個背景空間，使用background-repeat可以調整，有repeat，repeat-x，repeat-y，no-repeat，round（調整圖片大小），space（空白填充）
- background-position 屬性同時設定元素和圖片的原點，默認top，left，可用百分比設置，默認順序為水平，垂直。
- back-ground-size：
? 50%：縮放圖片，使其填充背景區的一半。
? 100px 50px：把圖片調整到 100 像素寬，50 像素高。
? cover：拉大圖片，使其完全填滿背景區；保持寬高比。
? contain：縮放圖片，使其恰好適合背景區；保持寬高比。
- 簡寫
```CSS
body {
    background-image:url(images/watermark.png);
    background-position:center;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size:contain;
    background-attachment:fixed;
}

簡寫后

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

可以添加多張背景圖片，用，隔開，最先添加的在上層

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110972.html

【學習筆記】CSS深入理解之absolute

摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。《張鑫旭的CSS深入理解之absolute》學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代絕對定位的行為表現無依賴絕對...

Anleb 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之relative

摘要：張鑫旭的深入理解之對絕對定位元素的限制限制定位限制層次限制，原本對絕對定位元素無效，容器設置的情況下生效的定位特性相對于自身無侵入，不會對其他元素的布局產生影響與與同時存在時，忽視的層疊特性可以提高層疊上下文為具體數值時，限制內部絕對定位張鑫旭的CSS深入理解之relative relative對絕對定位元素的限制限制定位限制層次限制overflow，overflow原本對絕...

nanfeiyan 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之z-index

摘要：張鑫旭的深入理解之學習筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。張鑫旭的CSS深入理解之z-index學習筆記層疊上下文什么是層疊上下文？在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。如何產生層疊上下文？根元素具有根層疊上下文 z-index不為auto的定位元素一個 z-index 值不為 ...

Steven 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之border

摘要：張鑫旭的深入理解之學習筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變。可以利用該特性實現圖標變色的效果與定位不計算區域，只限于以內的盒子。張鑫旭的CSS深入理解之border學習筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變。因此從語義上來說，...

he_xd 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之overflow

摘要：張鑫旭的深入理解之學習筆記基本屬性屬性介紹默認當與值相同時，等同于當與值不相同時，其中一個值被賦予時，若另一個值為，那這個會被重置為作用前提元素非對應方位的尺寸限制拉伸對于單元格等需要為狀態才可以與滾動條頁面默認滾動條來自與無《張鑫旭的CSS深入理解之overflow》學習筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認)|hidd...

Ali_ 2019-08-30 15:54 評論0 收藏0