HTML——CSS的基础语法2
一、盒模型
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實現：
三、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-：火狐瀏覽器
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、聲明一個關鍵幀（動畫）
?
階段的寫法：
①可以直接使用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……
?
轉載于:https://www.cnblogs.com/realsdg/p/7401247.html
總結
以上是生活随笔為你收集整理的HTML——CSS的基础语法2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 24-hadoop-hiveserver
- 下一篇： Java 输出流中的flush方法