HTML——CSS的基礎文法2

標籤：裁剪   init   image   模糊   shadow   relative   html   不顯示   lin   

一、盒模型1-1、什麼是盒模型？HTML5盒模型包括：內容(content)、填充(padding、也叫做內邊距)、邊框(border)、邊界(margin，也叫做外邊距)。這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。（來自百度百科，本人稍做修改，）1-2、margin 外邊距

1、唯寫一個值:表示四周的外邊距均為指定的值；
2、寫兩個值：第一個數為上下外邊距 第二個數為左右外邊距；
3、寫三個值：分別表示上、右、下三個方向，左邊預設等於右邊；
4、寫四個值：表示上、右、下、左四條邊順時針方向；
 5、margin：0 auto;設定區塊層級元素，在父容器中水平局中！

1-3、padding 內邊距

設定方式：與margin完全相同

注意：設定padding將會導致div地區被撐大！使用時必須注意div實際的寬高為多少。

1-4、border 邊框

1、設定邊框需要三個屬性：寬度 樣式 顏色
原則上三個元素缺一不可，順序可以隨便更改；
2、可以使用top、right、bottem、left分別設定四個邊

如：

#div{
　　width: 200px;
　　height: 200px;
　　background-color: red;

　　margin: 0 auto;

　　border: 10px dotted #0000FF;
}

div網頁局中顯示、藍色虛線邊框：

[border-radius 圓角]

1、border-radius可以接受8個屬性值，分別表示：
 X軸（左上、右上、右下、左下）/Y軸（左上、右上、右下、左下）

如：

border-radius:10px 20px 30px 40px/10px 20px 30px 40px;

2、縮寫形式：
唯寫X軸，Y軸預設等於X軸
 四個角寫不全，預設對角相等
唯寫一個值，預設8個數均等

如：

boeder-radius:50px 20px;

或者

border-radius:50px 20px 50px 20px;

或者

border-radius:50px 20px 50px 20px/50px 20px 50px 20px;

 3、當圓角弧度>=正方形長一半，將會顯示為圓形。

[border-image 圖片邊框]

1、bordre-image:一共可以放10個屬性值：
①圖片的路徑：url();
 ②圖片的切片寬度：4個值，分別代表上、右、下、左四條邊；
 通過4條切線分割，可以將圖片分為9宮格。9宮格四個角分別對應邊框的四個角（不會進行任何展開），
 9宮格四個邊分別對應四條邊框（會根據設定進行展開/鋪完/重複等動作）
注意：寫的時候必須不能帶px單位！！！！！！
③邊框的寬度：4個只分別代表上右下左四條邊框的寬度
注意：寫的時候，必須帶px單位，與切片寬度用/分割！！！
④邊框的重複方式：stretch（展開）、round（鋪滿）、repeat（重複）

[round和repeat的區別]
round：會對4條邊進行適當的展開壓縮，確保四條邊可以重複整數次；
rapeat：會保持每條變的長度比例不變，可能導致四角處，無法顯示一條完整的邊；

2、屬性值的寫法： border-image：① ②/③px ④

如：

-webkit-border-image: url(img/border.png) 27/27px repeat;

3、border-image在webkit核心的瀏覽器後中，把你需帶-webkit-首碼 。

*小問題*

當父盒子包裹子盒子，給子盒子添加margin-top時，子盒子與父盒子的上邊線並不能分開，而是會導致，兩個盒子同時下來。
【解決辦法】
1、給父盒子添加一點padding-top； 不推薦使用，會導致父盒子結構多餘1px的padding；
2、給父盒子添加1px的border-top； 不推薦使用，同樣會導致1px的多餘空間；
3、給父盒子或者子盒子添加浮動； 可能會由於浮動，一定程度的影響頁面的布局；
4、給父盒子添加overflow屬性；推薦使用的方式。

[box-shadow 盒子陰影]

1、6個屬性值，用空格分隔：
①X軸陰影距離（必選）：可正可負，左負右正；
 ②Y軸陰影距離（必選）：可正可負，上負下正；
③陰影模糊半徑（可選）：只能為正數，預設為0.數值越大，陰影越模糊
 ④陰影擴充半徑（可選）:可正可負，預設為0.數值增大，陰影擴大，數值減小，陰影減小。
 ⑤陰影顏色（可選）：預設為黑色
 ⑥內外陰影（可選）：預設為外陰影。 inset表示內陰影

 

outline 外圍線

顯示在border外面，並且不會佔據空間。 可能會覆蓋四周的內容

  [盒子模型分類]

1、標準盒子（w3c盒子）：我們設定的寬度和高度，僅僅包含content部分；再添加padding或border，會導致盒子變大
2、IE盒子（怪異盒子）：我們設定的寬度和高度，包含content+padding+border；
再添加padding或border，會壓縮content地區，但盒子總大小不變；

[手動設定盒子類型]

box-sizing: border-box; 怪異盒子；
 box-sizing: content-box; 標準盒子； 預設效果。

 

二、CSS浮動

1、標準流中的塊級盒子，寬度將會自動伸展為100%
　  而浮動的塊級盒子，寬度不會自動伸展，而是由內容撐開；

2、當一個盒子浮動，標準流中未浮動的其他盒子，將視浮動盒子不存在而佔據浮動盒子的位置。（浮動盒子，會蓋在這個盒子上面）
　  但是，未浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。（未浮動盒子中的內容，不會被浮動盒子蓋住）

3、由於第二條的原因，可以給受影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響

clear可選值：

left——清除左浮動影響

right——清除右浮動影響

both——同時清楚左右浮動影響（常選）

4、父盒子沒有指定高度。如果子盒子 沒有浮動，則父盒子的高度可以被子盒子撐開

 如果，父盒子中的所有子盒子都浮動，則父盒子高度將變為0；

 [解決所有子盒子浮動，父盒子高度塌陷的問題]
 ①給父盒子也添加浮動
 ②給父盒子也添加overflow屬性； 推薦使用！！！overflow: hidden;
 ③在父盒子最後添加一個高度為0的空div，給這個div添加clear：both;屬性，清除掉浮動效果
 ④可以將第三條的div，用偽對象選取器::after實現：

　　#div4::after{        display：block；        content："";        height: 0px;        clear: both;    }

三、CSS定位3-1、相對定位realative

1、使用position：relative； 設定元素為相對定位元素；
2、使用top、right、bottom、left調整元素位置；
當left和right同時存在時，left生效；當top和bottom同時存在時，top生效。
3、定位機制:
①相對定位是相對於自己原來的位置定位，當top等屬性不指定時，元素位置不會發生改變；
②相對定位不會釋放掉元素在原有文檔中流中的位置。不會影響其他文檔流元素的位置；
4、關於元素Z軸重疊
①定位元素，預設的Z軸高於普通文檔流元素。
②同為定位元素，後“來者居上”。後面的蓋住前面的。
③可以使用z-index手動調節定位元素的上下層Z軸元素。
　　z-index預設為0，而且只能作用於定位元素。

3-2、絕對位置  absolute

1、使用position：absolute; 設定元素為絕對位置；
2、定位機制：
①相對於第一個非static定位（已經定位）的祖先元素進行定位。
（即，相對於使用了relative、absolute、fixed定位的祖先元素進行定位。）
 ②如果所有的祖先元素都未定位，則相對於瀏覽器左上方進行定位。
 ③使用absolute的元素會從文檔流中完全刪除。原有空間會被釋放。

3-3、固定定位  fixed

1、使用position：fixed； 設定固定定位；
 固定定位，是一種特殊的絕對位置！！！只是祖先元素無法使用定位鎖住
2、定位機制：
 永遠相對於瀏覽器的左上方進行定位，而且不隨捲軸的滾動而滾動。

3-4、z-index 屬性

1、作用:根據z-index屬性設定的數值，決定元素在Z軸方向上的層疊次序
2、使用要求：
①z-index 只能給定位元素調整層疊次序。
relative、absolute、fixed
②元素的z-index屬性，要考慮父容器z-index的約束；
>>>如果父容器設定了z-index屬性，則子容器的所有元素，將不能脫離父容器的層次的約束。
（即，父容器設定了z-index，則子容器只能以父容器的數值為準，再給子容器設定z-index，只能調整子容器在父容器層次之內的層次次序）
>>>如果父容器沒有設定z-index，或者設定為z-index：auto；則子容器調整z-index將不受父容器的約束。
3、z-index：auto; & z-index: 0; 異同
①z-index：auto; 是預設值，與z-index：0；處於同一平方面；
②z-index：0； 會約束子項目必須與父容器在同一平面；
z-index：auto；不會約束子項目的層次。

 

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #div1-1{                width: 200px;                height: 200px;                background-color: red;                  position: relative;                top: 100px;                left: 100px;                right: 200px;                z-index: -1;            }                        #div1-2{                width: 200px;                height: 200px;                background-color: yellow;                /*position: relative;*/                /*z-index: 10;*/            }                        #div1-3{                width: 200px;                height: 200px;                background-color: green;                position: relative;                bottom: 200px;                left: 200px;                z-index: -2;            }    </style>    </head>        <body>                <div id="div1-1">            這是一個div        </div>                <div id="div1-2">            這是一個div        </div>                <div id="div1-3">            這是一個div        </div>        </body></html>    

四、CSS負邊距的使用4-1、實現區塊層級元素在父容器中水平垂直置中

設定子容器為定位元素；
left：50%； margin-left： -width/2;
top：50%; margin-top: -height/2;

4-2、使用負邊距增大元素的寬度

①子容器的寬度不指定；只指定高度，或者由內容撐開高度
②margin：0px -50px; 可以使左右兩邊，均超出父容器50px；

五、CSS新增屬性

[display 屬性[非常常用]
可以設定元素以何種屬性狀態顯示，可選值：
 none：隱藏元素
block：顯示為區塊層級元素
 inline：顯示為行級元素
 inline-block：顯示為內聯區塊層級元素。本身將是一個行級元素，但是擁有區塊層級元素的所有屬性，比如寬度，高度，margin，padding等。

 [常見的inline-block層級標籤？]
<img /> <input /> <textarea>< /textarea> <td>< /td>

 [隱藏一個元素的方式]
1、寬度獲高度設為0px； 配合overflow：hidden； 屬性
 2、display：none； 顯示display：block；
 3、opacity: 0; 設為全透明。 但是元素空間會佔據。
4、visibility：hidden；隱藏元素，但是元素所在空間依然會被佔據。 與opacity： 0；很像；
顯示visibility隱藏的元素，visibility： visible；

 

【CSS3新增的屬性首碼】
1、-webkit-：chrome、safari瀏覽器
2、-moz-：Firefox瀏覽器
3、-ms-：IE瀏覽器
4、-o-：opera 歐朋瀏覽器

【CSS長度單位】
1、px：像素，長度是固定的，表示佔分辨率的幾個像素點；
2、% ：表示相對於預設值的百分比
3、em：長度與元素的字型大小掛鈎。表示幾倍的字型大小
4、rem：與根項目的字型大小掛鈎，即，與<html>標籤的fongt-size掛鈎，如果不設定則預設字型大小為16px
[em與rem區別]
①em是與當前元素自身的font-size掛鈎，如果當前元素沒有設定，則向上尋找最近的祖先元素字型大小，直到根字型大小
②rem與當前元素字型大小無關，直接與根項目字型大小掛鈎

【CSS3背景屬性】
1、background-clip：設定背景圖或背景色的裁剪顯示地區。
>>>border-box從邊框外緣開始顯示。
>>>padding-box從邊框內緣開始顯示。
>>>content-box從文字內容地區開始顯示
>>>如果不在顯示地區的背景圖或背景色，會被裁切掉不顯示

2、background-origin設定背景圖從哪開始定位。
>>>border-box：背景圖左上方從邊框外緣開始
>>>padding-box：背景圖左上方從邊框內緣開始
>>>content-box：背景圖左上方從文字內容地區開始


3、background-origin不會改變的背景圖顯示地區的大小，只是決定背景圖的左上方從哪裡開始定位
background-clip只負責裁切出顯示地區，但是並不關心背景圖定位在哪

4、background-attachment：背景圖的附著方式
>>>scroll:背景圖跟隨地區滾動，預設效果
>>>fixed：背景圖充滿整個地區，並且背景圖是固定的，不隨捲軸個滾動

5、baccground 縮寫形式：
background：background-color background-image background-reapeat background-atachment background-position;

[transition: 過度屬性，接受四個屬性值]

①設定哪個CSS屬性，參與過度；可以直接指定all/none
②過度多少時間完成，通常.3s .5s
③過度的樣式效果。通常選ease
④過度延時幾秒後再開始。可以省略不寫

 transition屬性可以同時定義多個過渡效果，用逗號隔開

 

【transform 定義變換屬性】
1、常用的變換函數
>>>translate（）， 平移，第二個不寫預設為0
>>>scale（）， 縮放，第二個不寫，預設等於第一個
>>>rotate（），旋轉，預設繞Z軸轉，可以使用ratateX（）等
>>>skew（），扭曲，水平、垂直方向扭曲多少度

2、變換transform可以實現多種變換，用空格分隔
transform: skew(20deg) scale(1.5) translate(100px);

3、transform-origin：定義變換起點，常用於旋轉變換。
可選值：left/center/right bottom/center/top
也可以直接指定X、Y軸 座標點，第一個數為X軸

[CSS3動畫的使用]
1、聲明一個主要畫面格（動畫）

@keyframes name{　　from{}　　 to{}}

 

階段的寫法：
①可以直接使用from-to的寫法
②可以設定0%-100%的寫法，但開頭和結尾必須是0%和100%；

2、在CSS選取器中，使用animation來調用聲明好的動畫：

【animation的縮寫形式】（都可單獨拿出來寫）
Animation-name:動畫名稱，就是我們聲明的主要畫面格name；
Animation-duration：動畫期間
Animation-timing-function：動畫速度曲線，常選ease
Animation-delay：動畫開始的時間，延遲時間
Animation-iteration-count：動畫播放次數，預設為1. 無限次表示：infinite
Animation-direction：動畫在下一個是否逆向播放，預設為normal(表示不進行逆向播放)，alternate表示下一次將逆向播放(100%-0%)
Animation-fill-mode：規定對象動畫時間之外的狀態。表示動畫結束後，停留在何種狀態，要使用這個屬性，動畫的執行次數必須是有限次。
(forwards：表示動畫停留在結束狀態，backwards：表示動畫停留在初始狀態，預設效果)

>>>Animation-name和Animation-duration必須要設定，其他的選填
>>>animation可以同時設定多個動畫，多個動畫動畫之間用逗號分隔
　　animation：frame1 1s，frame2 2s……

 

HTML——CSS的基礎文法2