大家可以關注一下我的博客 我的博客所有隨筆都是我從基礎開始學習java的所有知識點
容器盒子
Box-size:設置盒子模型，CSS3標准，
content-box:正常默認模式，起源於谷歌，元素的整體大小會被內邊距和邊框撐開
border-box：怪異模式，起源於IE，元素的整體大小不會被內邊距和邊框撐開
Width:寬度
Height:高度
注意：width,height會根據box-size盒子模型的不同來決定是內容的寬度和高度，還是整個元素大小的寬度和高度。
Padding:內邊距
Padding-left,padding-right,padding-top,padding-bottom
Padding:上 右 下 左;
Padding:上 右 下；左邊距等於右邊距
Padding:上 右；下跟上邊一樣，左跟右一樣
Margin:外邊距
外邊距跟內邊距一致。但是兩個元素的外邊距會重疊。
Border:邊框
語法：border: 邊框寬度 邊框樣式 顏色;
可以分開設置，例如
| border-width: 30px; border-style: dashed; border-color: purple; |
分別設置上下左右邊框，例如
| border-bottom:50px dotted green; |
Box-shadow:盒子陰影
| box-shadow: 陰影的水平偏移值 陰影的垂直偏移值 陰影的模糊度 陰影的顏色; |
Display:設置盒子是塊級元素還是行級元素還是彈性元素
Block:塊級元素，會占據一整行，有寬高，div,h1,p,li,ul...
Line-block:行塊元素，不會占據一整行，有寬高,img...
Line:行元素，不會占據一整行，也沒有寬高,a,span...
Border-radius:邊框的圓角
Background:設置元素的背景，背景圖片，背景顏色
Background:是一個綜合性的屬性，可以分出背景顏色，背景圖片，背景是否重復，背景圖片的位置，背景圖片的大小
Background-position:設置背景圖片的位置，left,right,top,bottom,center,百分比一般可以設置2值，第一個值是設置水平位置，第二個值設置垂直位置
Background-size:設置背景圖片的大小，注意：有時候不知道圖片的確切比例的時候，只需要設置一個寬度或者高度，另外一個值設置為auto即可。
background-image: url();插入背景圖片
background-repeat: no-repeat;背景圖片不可重復
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{/*Block:塊級元素，會占據一整行，有寬高，div,h1,p,li,ul...*/ width: 1500px; height: 1500px; background: blue; } #d1{ box-sizing: content-box;/*此為默認容器盒子類型，可省略不寫*/ width: 500px;/*寬度*/ height: 300px;/*高度*/ background: palegoldenrod;/*容器盒子底層顏色*/ padding: 30px;/*內邊距：Padding-left,padding-right,padding-top,padding-bottom*/ border: 20px solid black;/*邊框：語法：border: 邊框寬度 邊框樣式 顏色;可以分開設置，例如border-width: 30px;border-style: dashed;border-color: purple;*/ margin: 100px;/*外邊距：外邊距跟內邊距一致。但是兩個元素的外邊距會重疊。*/ } #d2{ /*盒子模型*/ box-sizing: border-box; width: 1000px; height: 600px; background: palegreen; padding: 30px 20px 10px 5px;/*順時針方法 上-左-下 -右*/ border: 20px solid blue; /*邊框大小 ，顏色*/ border-width: 30px; border-style: dashed;/*邊框類型*/ border-color: purple;/*邊框顏色*/ border-bottom:50px dotted green; /*下邊框大小，類型，顏色*/ } #d3{/*用邊框畫三角形*/ /*設置盒子陰影*/ width: 0; height: 0; border-bottom: 1000px solid rgba(0,0,0,0); border-top: 1000px solid transparent; border-left: 1000px solid transparent; border-right: 1000px solid green; transition: all 1s;/*設置抬起來時間*/ } /*盒子陰影（hover：抬起來才有陰影）*/ #d3:hover{/*陰影的水平偏移值 陰影的垂直偏移值 陰影的模糊度 陰影的顏色;*/ box-shadow: 0 100px 150px red; } #d4{/*畫圓型*/ width: 200px; height: 200px; background: red; border-radius: 400px;/*邊框的圓角*/ } </style> </head> <body> <div id="d1">helloworld</div> <div id="d2">helloworld</div> <div id="d3"></div> <div id="d4"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1 { margin: 0 auto; width: 2500px; height: 2400px; background: gold; /*設置背景圖片，可以放置多張背景圖片，中間用逗號隔開，越寫在前面，層級越高。*/ background-image: url(img/聯圖二維碼.png),url(img/u=2129560155,3163871690&fm=26&gp=0.jpg); /*背景圖片不重復*/ background-repeat: no-repeat; /*設置背景圖片的位置，left,right,top,bottom,center,百分比一般可以設置2值，第一個值是設置水平位置，第二個值設置垂直位置*/ background-position: 10% 10%,right center; /*設置背景圖片的大小，注意：有時候不知道圖片的確切比例的時候，只需要設置一個寬度或者高度，另外一個值設置為auto即可。*/ background-size: 1000px auto,500px 400px; border: 1px solid #000000; } </style> </head> <body> <div id="d1">1</div> </body> </html>
浮動
浮動元素會尋找父元素的邊緣或者是同樣浮動元素的邊緣，緊緊的靠攏在一起。
優點
1、可以讓文字包圍圖片。
2、可以去掉莫名其妙的間距
3、可以讓內容向左和向右排布
大問題
父元素高度塌陷
原因：使用了浮動的元素，會脫離正常的文檔流，使其父元素找不到子元素，從而認為自己內部沒有元素，所以沒有高度。
解決方案：
1、給父元素設置高度
2、萬能的解決方案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .d1{ width: 200px; height: 200px; background: skyblue; /*行塊元素，不會占據一整行，有寬高,img...*/ display: inline-block; /*浮動：內容向左，去掉莫名其妙的間距*/ float: left; } .d2{ width: 200px; height: 200px; background: skyblue; /*行塊元素，不會占據一整行，有寬高,img...*/ display: inline-block; /*浮動：內容向左，去掉莫名其妙的間距*/ float:right; } /* 解決方案：清除浮動 1、在父元素的最后面加上一個div 2、設置這個div的樣式為:clear:both; <div style="clear: both;"></div> 缺點：多了1個div,結構比較混亂 * */ /* 完美升級方案： 1、使用偽元素創建一個假的元素，：after在元素的最后面創建一個假的子元素 2、設置這個假的元素為塊級元素 3、清除左右浮動clear:both * */ .clear:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div class="d">1</div> <img src="img/u=2129560155,3163871690&fm=26&gp=0.jpg"/> 嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪 <div class="d">2</div> <!--只有class才可以同時放置多個class，中間用空格隔開--> <div class="d d1">3</div> <div class="d d2">4</div> </body> </html>
定位Position
相對定位relative
語法：postion:relative;
特點：相對於自身進行位移，只是樣子進行了移動，其實還是會牢牢占據原來的位置，不會影響到整個布局的變化
絕對定位absolute
語法：postion:absolute
特點：脫離正常的文檔流，不會占據原來的位置。相對於設置了定位的父元素或者是祖先元素。
固定定位fixed
語法：position:fixed
特點：脫離正常的文檔流，不會占據原來的位置。相對於瀏覽器進行定位
層：z-index
語法：Z-index：數字；
解析：z-index可以設置統一級別下，使用了定位的層級關系。z-index值越大，層越在上面。默認情況下，所有元素的z-index值為0。沒有使用定位的元素，不可用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; margin: 20px; background: skyblue; } .d1{ /*z-index可以設置統一級別下，使用了定位的層級關系。z-index值越大，層越在上面。默認情況下，所有元素的z-index值為0。沒有使用定位的元素，不可用。*/ z-index: 1; } .d2{/*設置相對定位:特點：相對於自身進行位移，只是樣子進行了移動，其實還是會牢牢占據原來的位置，不會影響到整個布局的變化*/ position: relative; /*配合left,top,bottom,right*/ /*left:100px;*/ left: 100px;/*在原本的位置基礎上向右移了100px*/ /*z-index可以設置統一級別下，使用了定位的層級關系。z-index值越大，層越在上面。默認情況下，所有元素的z-index值為0。沒有使用定位的元素，不可用。*/ z-index: 1; } .d3{/*設置絕對定位:脫離正常的文檔流，不會占據原來的位置。相對於設置了定位的父元素或者是祖先元素。*/ position: absolute; /*配合left,top,bottom,right*/ top: 100px; left: 100px;/*完全不遵守原有基礎，以整個父元素（有定位才能做父元素）基礎定位（先找body，再找html）*/ background:black; } .i{ width: 300px; height: 400px; background: yellow; /*設置固定定位：特點：脫離正常的文檔流，不會占據原來的位置。相對於瀏覽器進行定位*/ position: fixed; right:100px; top: 100px; text-align: center; } .i img{ width: 200px; height: 200px; } </style> </head> <body> <div class="d"> <h1>正常頁面</h1> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> </div> <div class="i"> <img src="img/u=2129560155,3163871690&fm=26&gp=0.jpg"/> <hr /> <a href="http://www.baidu.com"">百度一下</a> </div> </body> </html>