頁面制作-筆記5.css

CSS（四盒模

《前端開發(fā)工程師學(xué)習(xí)

CSSwidthheight 結(jié)構(gòu)1從上圖中可以得出盒子模型的屬性如下1盒子模型4屬屬 說 盒模型--寬度(width)和高度 。盒模型div{padding:20px10px15px}div{padding:10pxCSS內(nèi)邊距屬性CSS內(nèi)邊距屬性屬描padding-padding-padding-padding-盒模型--邊框如下面代碼為div來設(shè)置邊框粗細為2pxborder:2pxsolid} （虛線）|dotted（點線）|solid（實線）border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：thin|medium|thick（但不是CSS邊框?qū)傩訡SS邊框?qū)傩詫倜鑒order-border-border-4border-border-bottom-border-bottom-border-bottom-border-border-left-border-left-border-left-border-border-right-border-right-border-right-border-border-top-border-top-border-top-盒模型margin-margin-margin-margin-div{margin:20px10px15pxCSS外邊距合 簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。高高度等于兩個發(fā)生合并的外邊距的高度中的較大者參考資料margin合并（塌陷）， /kb/006/Border-radius---出了常用的CSS3邊框?qū)傩裕簩?說屬 說 語法：border-radius:長度值說明：長度值可以是px、百分比、emBorder- 屬性設(shè)置長度值順序：“左上角、右上角、右下角和左下角實心半圓分為：實心上半圓、實心下半圓、實心左半圓、實心右半圓。只要掌握0border:1pxsolidred;border-radius:100px100px0border:1pxsolidred;（border:1pxsolidred;邊框陰影box- 可以放在開頭位置。影outset與內(nèi)陰影值有2種：CSS輪廓 CSSoutline2outline-2outline-2outline-2Overflowoverflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情值描overflowBox-sizingbox-sizing:content-box|border-加上元素內(nèi)容寬度或高度（contentwidth/height），也就是elementwidth/height=border+padding+contentwidth/height重新定義CSS2.1IE（IE6下版本和IE6-7），也就是說元素的寬度或高度等于元素內(nèi)容的寬度其中最為關(guān)鍵的是box-sizing其中最為關(guān)鍵的是box-sizing中content-box和border-box參考資料box-sizing理解： CSS（五背background值11313311background11、背景顏ackground-在CSS中，使用background-color屬性來控制元素的背景顏默認值 ，即背景是透明的2、背景圖像-background-屬屬 說 background-repeatbackground-repeat屬屬 說

background- background-語法background-repeat：<repeat-style>[,<repeat-style><repeat-style>=repeat-x|repeat-y|[repeat|no-repeat|space|默認值屬性屬性 說 設(shè)置或檢索對象的背景圖像如何鋪排填充。必須先指定<'background-image'>屬性repeat-xrepeatno-repeat，repeat-yno-repeatrepeat，即其實repeat-xrepeat-y2個參數(shù)值.background-position語法background-position：<position>[,<position><position>=[left|center|right|top|bottom|<percentage>|<length>]|[|center|right|<percentage>|<length>][top|center|bottom|<percentage><length>]|[center|[left|right][<percentage>|<length>]?]&&[center|[|bottom][<percentage>|<length>]?默認值：0%0%，效果等同于left設(shè)置設(shè)置 說 background-position:80pxbackground-position:80px 屬性屬性 說top toptop left topleft center rightright bottom bottombottom bottom background- 屬語法background-attaent：<attaent>[,<attaent><attaent>=fixed|scroll|默認值background-size在不同的環(huán)境中重復(fù)使用背景。語法：background-size:auto|<長度值>|<百分比>|cover| 對于背景，不是可以使用width和height屬性來設(shè)置嗎？為什么還要增加一background-size屬性呢記住，背景不同于img的，對于img的，可以使用width和height屬性來設(shè)置，但是這兩個屬性不能用于設(shè)置背景的大小。因此，在CSS3中，引入了background-size屬性來設(shè)置背景的大小。這里大家要清楚一點，背景 background-origin語法：background-originborder-box|padding-box|content- 總結(jié)：background-origin屬性往往都是配合background-position屬性來使用，其中background-origin屬性規(guī)定background-position屬性相對于什么位置來定位。瀏覽器默background-clip語法：background-clipborder-box|padding-box|content-box|no-屬性屬性 說 不裁切，和參數(shù)border-box顯示同樣的效background-clip屬性指定了背景在哪些區(qū)域可以顯示，但與背景開始繪制的位置（即于背景被不顯示背景的區(qū)域裁剪了一部分一樣。clipsizebackground的多次疊加，縮寫時為用逗號隔開的每組值； background：[background-color]|[background-image]|[background-background-size]|[background-repeat]|[background-attaent]|clip]|[background-background-repeat:backround-position:background-size:ent:background-clip:background-origin:background-color:background如果size，需position開如如果有多個背 ，而其他屬性只有一個（例如background-repeat只有一個表表明所有背 應(yīng)用該屬性值background-color只能設(shè)置一個。CSS3漸變共有2種：（1）線性漸變（linear-gradient）；（2）徑向漸（radial-gradient）1、線性漸變-linear-background:background:linear-gradient(direction,color-stop1,color-stop2,語法屬性屬性 說to toto to toto totop tototop也可以定義多種顏色的線性漸變效果，如background-image:linear-gradient(tobackground-image:linear-gradient(toleft,red, 效果圖2、徑向漸變-radial-徑向漸變，是一種從起點到終點顏色從內(nèi)到行圓形漸變（從中間向外拉，像一樣）。 徑向漸變是圓形或橢圓形漸變，顏色不再沿著一條直線漸變，而是從個起點向所有方向漸語法：background:radial-gradient(position size,start-color,…,stop-說明標；如果只提供一個，第二值默認為50%，即center. size都是可選參數(shù)，如果省略，則表示該項參數(shù)采用默認值有2種情況：（1）長度值，如px、em或百分比等；（2）關(guān)鍵字。屬性 說屬性 說 toptop top toptop left bottomrightcenterbottom bottombottom 定義形狀屬性屬性 說 定義大小屬性屬性 說 #div2{background:-webkit-radial-gradient(red5%,green30%,blue案例（圖一radial-gradient(circle,#f00,#ff0,radial-gradient(circleatcenter,#f00,#ff0,radial-gradient(circleat50%,#f00,#ff0,radial-gradient(circlefarthest-corner,#f00,#ff0, ><size>錯誤代碼：radial-gradient(circle50px50px,#f00,#ff0,circle<size>錯誤代碼：radial-gradient(circle50%,#f00,#ff0,#080);circle不接受<size>的值是<percentage>。不通過<sh >來表示圓和橢圓的方法：以下2行代碼都可以表示一個圓：radial-gradient(100px,#f00,#ff0,#080);/*1*/radial-gradient(100px100px,#f00,#ff0,#080);/*2*/radial-gradient(50px100px,#f00,#ff0,#080);/*3*/3、漸變重復(fù)：repeating-*-repeating-linear-repeating-linear-gradient(#f00,#ff010%,#f00repeating-linear-gradient(tobottom,#f00,#ff010%,#f00repeating-linear-gradient(180deg,#f00,#ff010%,#f00repeating-linear-gradient(totop,#f00,#ff010%,#f00linear-gradient()repeating-linear-gradient()40%,#f0045%,#ff055%,#f0060%,#ff070%,#f0075%,#ff085%,#f0090%,利用background-size實現(xiàn)上述（圖一）的效果：background:linear-gradient(#f00,#ff067%,#f00);background-size:100%15%;background-sizebackground-repeatrepeating-radial-repeating-radial-gradient(circleclosest-side,#f00,#ff010%,#f00CSS（六布內(nèi)容包括Display:設(shè)置元素的顯示方語法display：none|inline|block|list-item|inline-block|table|inline-|table-caption|table-cell|table-row|table-row-group|table-column|table-column-group|table-footer-group|table-header-group|run-in|box|inline-box|flexbox|inline-flexbox|flex|inline-flex取值inline：block：list-item：inline-block：指定對象為內(nèi)聯(lián)塊元素。run-in：根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。box：將對象作為彈性伸縮盒顯示。（伸縮盒最老版本inline-box：（伸縮盒最老版本flexbox：（伸縮盒過渡版本inline-flexbox：（伸縮盒過渡版本flex：將對象作為彈性伸縮盒顯示。（伸縮盒版本inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒版本 Block（塊級元素 inline（行內(nèi)元素 inline-block（行內(nèi)元素Display:display:none或隱藏一個元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中。Display相關(guān)布局塊級元素水平居居中導(dǎo)元素分、<img>、元素分類--塊級元塊級元素特點元素分類--內(nèi)聯(lián)元html<span>、<a>、<label<strong>em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使div元素具有內(nèi)聯(lián)元素特點。div{display:inline;}內(nèi)聯(lián)元素特點解決內(nèi)聯(lián)元素（行內(nèi)元素）間隙bug 解決方法div{font->>>>元素分類--內(nèi)聯(lián)塊狀元 display:inline- display:inline-inline-block如何實現(xiàn)瀏覽器兼容版的inline-block然后觸發(fā)hasLayout，以此來獲得和inline-block類似的效果；你可以這樣：div{display:inline-*display:*zoom:}定位CSS定位(Positioning)框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（LineBox），行框的高度總是足以容框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（LineBox），行框的高度總是足以容CSS定位屬CSS定位機(X)HTML中CSS定位屬性允許你對元素進行定位 屬描vertical-z-CSSCSSposition屬性通過使用position屬性 可以選擇4種不同類型的定位，這會影響元素框生成的方式 positionabsolute 如下代碼實現(xiàn)相對于以前位置向下移動50px，向右移動100px;border:2pxredsolid;}<div絕對絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置對于最初的包含塊position:absolute(表示絕對定位)，這條語句的作用的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。對對于定位的主要問題是要記住每種定位的意義。相對定位是“相對于”元素在文檔中的初始位是位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”向下移動border:2pxredsolid;}<divPosition:absolute-應(yīng)用：輪播頭 fixed：absolute（屏幕內(nèi)的網(wǎng)頁窗口）border:2pxredsolid;}1.Z-index-設(shè)置元素在z軸上的排 indexindex屬性設(shè)置元素的堆疊順序。z-indexZ-index僅能在定位元素上奏效（值描z-indexZ-index語法float：none|left|Float浮動基本特征對元素，脫離文檔流；對內(nèi)容，在文檔Clear-清除浮動語法clear：none|left|right|使用方式增加空白元代碼 Float應(yīng)用-兩列布FlexTerms-基本概Flex項目（flexitem）容器默認存在兩根軸：水平的主軸（mainaxis）和垂直的交叉軸（crossaxis）。主軸的置叫做crossstart，結(jié)束位置叫做crossend。crosssize。flexcontainerFlexitems（flex項目彈性布局特性與方向有flex-Flex-Flex-與彈性有Flex-Flex-Flex-與對齊有Flex-決定主軸的方向（即項目的排列方向Flex-direction:row|row-reverse|column|column-Flex-Flex-wrap:nowrap|wrap|wrap-Flex-Flex-flow:：<'flex-direction'>||<'flex-wrap'>Flex-根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。flex-basis:<length>|auto;/*defaultautoFlex-Flex-4.計算方法：flex-basisflow-grow/sum(flow-grow)*示例：b,c1:3比率分配剩余空間HTMLCode：<ulCSS.flexli:nth-.flexli:nth-child(2){flex-.flexli:nth-child(3){flex-b:50+(300/4*1)=125pxa:50+(300/4*3)=275pxFlex-Flex-的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。計算方法：flex-basisflow-shrink/sum(flow-shrink)*示例：a,b,c1:1:3的比率來收縮空間HTMLCode：<ulCSS.flex.flexli:nth-child(3){flex-5a1，b1，c31:1:3200px。那么這么超出的200pxa,b,c消化于是可以計算a,b,c將被移除的溢出量是多少：Flex:[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>Initial:01該屬性有兩個快捷值：auto(11auto