成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

CSS學(xué)習(xí)筆記之定位

Lavender / 709人閱讀

摘要：的盒子及相關(guān)盒子基礎(chǔ)，，版式邊框?？梢栽O(shè)置盒子內(nèi)容區(qū)與邊框的間距。將其設(shè)為則其空間可以被復(fù)用。把圖片調(diào)整到像素寬，像素高。拉大圖片，使其完全填滿(mǎn)背景區(qū)保持寬高比。簡(jiǎn)寫(xiě)簡(jiǎn)寫(xiě)后可以添加多張背景圖片，用，隔開(kāi)，最先添加的在上層

CSS的盒子及相關(guān) 盒子基礎(chǔ)

postion，float，display——版式
? 邊框（border）?？梢栽O(shè)置邊框的寬窄、樣式和顏色。
? 內(nèi)邊距（padding）?？梢栽O(shè)置盒子內(nèi)容區(qū)與邊框的間距。
? 外邊距（margin）?？梢栽O(shè)置盒子與相鄰元素的間距。

簡(jiǎn)寫(xiě)——上右下左，缺省取對(duì)邊值

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

沒(méi)有設(shè)置width，其width為父元素width

盒子的width是其內(nèi)容區(qū)的寬度，增加邊距使整個(gè)盒子變得更大

浮動(dòng)和清除

為父元素添加overflow：hidden屬性強(qiáng)制包圍浮動(dòng)元素，該屬性真正左右是防止包含元素被內(nèi)容撐大

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






It"s fun to float.






 Here is the footer element…

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

- 對(duì)于子元素通過(guò)上面的clearfix處理也可以，在上例中就是給p加標(biāo)記

####定位
- position：static，relative，absolute，fixed
- fixed與absolute的區(qū)別在于fixed時(shí)不隨屏幕滾動(dòng)而改變，換句話(huà)說(shuō)，它是對(duì)當(dāng)前屏幕定位，而absolute是對(duì)于整個(gè)頁(yè)面定位
- 只有當(dāng)position不為static時(shí)，top，bottom，left，right屬性才發(fā)揮作用
####顯示屬性
塊級(jí)元素（段落，標(biāo)題等）堆疊顯示，行內(nèi)元素（a，img，span）則并排顯示，直到這一行沒(méi)有空間才顯示到下一行，通過(guò)改display為inline，block可以調(diào)整。將其設(shè)為none則其空間可以被復(fù)用。
####背景

![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（簡(jiǎn)寫(xiě)屬性）
-  比元素小的背景圖片會(huì)在水平和垂直方向上重復(fù)出現(xiàn)，直至填滿(mǎn)整個(gè)背景空間，使用background-repeat可以調(diào)整，有repeat，repeat-x，repeat-y，no-repeat，round（調(diào)整圖片大?。瑂pace（空白填充）
- background-position 屬性同時(shí)設(shè)定元素和圖片的原點(diǎn)，默認(rèn)top，left，可用百分比設(shè)置，默認(rèn)順序?yàn)樗剑怪薄?- back-ground-size：
? 50%：縮放圖片，使其填充背景區(qū)的一半。
? 100px 50px：把圖片調(diào)整到 100 像素寬，50 像素高。
? cover：拉大圖片，使其完全填滿(mǎn)背景區(qū)；保持寬高比。
? contain：縮放圖片，使其恰好適合背景區(qū)；保持寬高比。
- 簡(jiǎn)寫(xiě)
```CSS
body {
    background-image:url(images/watermark.png);
    background-position:center;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size:contain;
    background-attachment:fixed;
}

簡(jiǎn)寫(xiě)后

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110972.html

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之absolute

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記絕對(duì)定位的特性絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。利用絕對(duì)定位元素脫離文檔流的特性，使用動(dòng)畫(huà)可以避免大范圍的回流和重繪。絕對(duì)定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。 《張?chǎng)涡竦腃SS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記 絕對(duì)定位的特性 絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。浮動(dòng)的一些應(yīng)用場(chǎng)景中也可用絕對(duì)定位替代 絕對(duì)定位的行為表現(xiàn) 無(wú)依賴(lài)絕對(duì)...

    Anleb 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之relative

    摘要：張?chǎng)涡竦纳钊肜斫庵畬?duì)絕對(duì)定位元素的限制限制定位限制層次限制，原本對(duì)絕對(duì)定位元素?zé)o效，容器設(shè)置的情況下生效的定位特性相對(duì)于自身無(wú)侵入，不會(huì)對(duì)其他元素的布局產(chǎn)生影響與與同時(shí)存在時(shí)，忽視的層疊特性可以提高層疊上下文為具體數(shù)值時(shí)，限制內(nèi)部絕對(duì)定位 張?chǎng)涡竦腃SS深入理解之relative relative對(duì)絕對(duì)定位元素的限制 限制定位 限制層次 限制overflow，overflow原本對(duì)絕...

    nanfeiyan 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之z-index

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來(lái)居上和誰(shuí)大誰(shuí)上的層疊原則。 張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

    Steven 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之border

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。可以利用該特性實(shí)現(xiàn)圖標(biāo)變色的效果與定位不計(jì)算區(qū)域，只限于以?xún)?nèi)的盒子。 張?chǎng)涡竦腃SS深入理解之border學(xué)習(xí)筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。因此從語(yǔ)義上來(lái)說(shuō)，...

    he_xd 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之overflow

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時(shí)，等同于當(dāng)與值不相同時(shí)，其中一個(gè)值被賦予時(shí)，若另一個(gè)值為，那這個(gè)會(huì)被重置為作用前提元素非對(duì)應(yīng)方位的尺寸限制拉伸對(duì)于單元格等需要為狀態(tài)才可以與滾動(dòng)條頁(yè)面默認(rèn)滾動(dòng)條來(lái)自與無(wú) 《張?chǎng)涡竦腃SS深入理解之overflow》學(xué)習(xí)筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認(rèn))|hidd...

    Ali_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<