盒模型的屬性/display顯示(重要)/浮動(重要)
阿新 • • 發佈：2018-09-20
一起 isp 對比 啊啊啊 order 都是 選中 child double 
一.關於上篇博客的總結
1.高級選擇器: (1).後代選擇器***** 選擇的是兒子,孫子,重孫子 div p{} (2).子代選擇器 選擇的是親兒子 div>p (3).組合選擇器 div,p,a,span{} (4).交集選擇器 div.active{} (5).屬性選擇器 input[type="text"]{} (6),偽類選擇器 愛恨準則 a:link{} a:visited{} a:hover{} a:active{} 對a來設置字體顏色,一定要選中a (7).偽元素選擇器 p::first-letter{} p:before{ content:"" } //與浮動有關系 p:after{ content:"" } 2.CSS的繼承性和層疊性 在CSS中,color, text-xxx, font-xxx, line-xxx這些屬性是可以被繼承下來 層疊性: 權重->誰的權重大就會顯示誰的屬性 權重大小的對比: 選擇器的個數: id class 標簽 ①權重比較: 行內 > id > class > 標簽 ②權重比較: 繼承來的屬性,它的權重為0,與選中的標簽沒有可比性 ③權重比較 都是繼承來的,他們權重都為0,就近原則 ④權重比較 都是繼承來的,他們權重都為0,描述的一樣近,再去數權重 ⑤權重比較 權重一樣大,後面的大於前面的屬性 3.盒模型 標準盒模型: width: 內容的寬度 height: 內容的高度 padding: 內邊距,內容到邊框的距離 border: 邊框 margin: 外邊框,一個盒子的邊到另一個盒子邊的距離 計算盒模型: 盒子的大小=width+2*padding+2*border 如果保證盒子大小不變,那麽加padding,,就要減內容的width或height 4.浮動 浮動是實現元素並排,只要盒子浮動,就脫離標準文檔流(不在文檔流上占位置)整理
二.盒模型的屬性(重要)
1.padding
(1).padding: 10px; 上下左右
(2).padding: 20px 30px; 上下 左右
(3).padding: 20px 30px 40px; 上 左右 下
(4).padding: 20px 30px 40px 50px; 順時針 上右下左
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding的使用</示例title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; background-color: red; /*上下左右*/ padding: 10px; /*上下 左右*/ padding: 20px 30px; /*上 左右 下*/ padding: 20px 30px 40px; /*順時針 上 右 下 左*/ padding: 20px 30px 40px 50px; } </style> </head> <body> <!-- padding是標準文檔流，父子之間調整位置 --> <div class="box">娃哈哈</div> </body> </html>
2.border
三要素:線性的寬度, 線性的樣式, 顏色
border: 1px solid red;
border-left: 1px solid red
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>border是的使用</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red; /*四個邊框均為5px*/ /*border: 5px solid blue;*/ /*上下邊框 藍色實線,左右邊框 黑色雙線*/ /*bored-width: 5px 10px; border-color: blue black; border-style: solid double;*/ /*左邊框黃色5px實線*/ /*border-left-style: solid; border-left-width: 5px; border-left-color: yellow;*/ /*左黑 右藍 上黃 下紫*/ border-left: 5px solid black; border-right: 2px solid blue; border-top: 5px solid yellow; border-bottom: 2px solid purple; } </style> </head> <body> <!-- padding是標準文檔流，父子之間調整位置 --> <div class="box">娃哈哈</div> </body> </html>示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>制作三角形</title> <style type="text/css"> div{ width: 0px; height: 0px; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } </style> </head> <body> <div></div> </body> </html>制作三角形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>制作圓</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: red; /*制作圓角*/ /*border-radius: 3px;*/ /*制作圓*/ /*border-radius: 100px;*/ border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>制作圓
3.margin
前提是必須是在標準文檔流下
margin的水平不會出現任何問題
垂直方向上margin會出現"塌陷問題"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin的應用</title> <style type="text/css"> .a1{ background-color: red; margin-right: 30px; } .a2{ background-color: rgb(0,123,0); margin-left: 30px; } </style> </head> <body> <span class="a1">娃哈哈</span><span class="a2">爽歪歪</span> </body> </html>View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .s1{ width: 200px; height: 200px; background-color: red; margin-bottom: 40px; } .s2{ width: 200px; height: 200px; background-color:rgb(0,128,0); margin-top: 100px; } </style> </head> <body> <!-- 塌陷,兩盒子之間的距離為100px --> <div class="s1"></div> <div class="s2"></div> </body> </html>塌陷(坑)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 300px; height: 300px; background-color: red; /*float: left;*/ } .child{ width: 100px; height: 100px; background-color: green; margin-left: 50px; margin-top: 50px; } </style> </head> <body> <!-- 子盒子向上推50px,結果帶著父盒子一起推了 --> <div class="box"> <div class="child"></div> </div> </body> </html>向上推盒子(坑)
三.display 顯示(重要)
前提是必須在標準文檔流下
1.屬性:
(1).block 塊級標簽
獨占一行
可以設置寬高,如果不設置寬,默認父盒子寬度為100%
(2).inline 行內標簽
在一行內顯示
不可以設置寬高,根據內容來顯示寬高
(3).inline-block 行內塊
在一行內顯示
可以設置寬高
(4)none 不顯示,隱藏,不在文檔上占位置
(5)visibility:hidden; 隱藏,在文檔上占位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>display的應用</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: red; border: 1px solid blue; display: inline; } div a{ display: block; width: 300px; height: 300px; } span{ display: inline-block; width: 300px; height: 200px; background-color: black; } </style> </head> <body> <div class="box">哇哈哈哈哈哈哈哈哈哈哈哈哈哈</div> <div class="box">呵呵呵</div> <div> <a href="#"> <img src="img/1.jpg" alt="" width="300px" height="200px" /> </a> </div> <input type="text" /> <span>啊啊啊啊啊</span> <span>啊啊啊啊啊</span> </body> </html>示例
四.浮動(重要)
浮動是css裏面布局最多的一個屬性，也是很重要的一個屬性
float：表示浮動的意思。它有四個值
none: 表示不浮動,默認
left: 表示左浮動
right: 表示右浮動
1111
盒模型的屬性/display顯示(重要)/浮動(重要)