盒模型
1 盒子中的地區
<1>盒子的主要屬性:
width 寬度,css中width指的是內容的寬度,而不是盒子的寬度。 height高度 ,css中Height指的是內容的高度,而不是盒子的高度。 padding 內邊距 border 邊框 margin 外邊距
<2>下面兩個盒子,真實佔有寬高,完全相同,都是302*302:
.box1{ width:100px; height:100px; padding:100px; border:1px solid red;}計算如下:1+100+100+100+1=302px.box2{ width:250px; height:250px; padding:25px; border:1px solid red;}計算如下:1+25+250+25+1=302px上面代碼中盒子的真實佔有寬度計算公式:真實佔有寬度=左border+左padding+width+右padding+右border
<3>如果想保持一個盒子的真實佔有寬度不變,那麼加width就要減padding,加padding就要減width.
2.認識padding
<1>padding的地區有背景顏色,在css2.1中背景顏色一定和內容地區的相同。
<2>padding是4個方向的,所以我們能夠分別描述4個方向的padding.
第一種:小屬性,也就是複合屬性。
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
第二種:綜合屬性。
空格隔開,上右下左。
padding:30px 20px 40px 100px;
<3>可以用小屬性層疊大屬性(不能把小屬性寫在大屬性前面):
padding:20px;padding-left:30px;
題目一:
p{ width:200px; height:200px; padding-left:10px; padding-right:20px; padding:40px 50px 60px; padding-bottom:30px; border:1px solid #000;}
答:padding-left:10px;和 padding-right:20px;沒用,因為後面的padding大屬性,層疊掉了他們。
<4>一些標籤預設帶有padding.比如ul.所以說,我們做站的時候,會清除這個預設的padding.
3.border 邊框
<1>邊框三要素:粗細、線型、顏色。
<2>所有的線型:
none 定義無邊框。 hidden 與 “none” 相同。不過應用於表時除外,對於表,hidden 用於解決邊框衝突。 dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線。 dashed 定義虛線。在大多數瀏覽器中呈現為實線。 solid 定義實線。 double 定義雙線。雙線的寬度等於 border-width 的值。 groove 定義 3D 凹槽邊框。其效果取決於 border-color 的值。 ridge 定義 3D 壟狀邊框。其效果取決於 border-color 的值。 inset 定義 3D inset 邊框。其效果取決於 border-color 的值。 outset 定義 3D outset 邊框。其效果取決於 border-color 的值。 inherit 規定應該從父元素繼承邊框樣式。 常用的有:solid 、dashed、 dotted
<3>border屬效能夠被拆開,有兩大種拆開的方式:
第一種:按要素
border-width:10px; 邊框寬度border-style:solid; 線型border-color:red; 顏色等價於:border:10px solid red;
如果某一個小要素後面是空格隔開的多個值,那麼就是上右下左的順序:
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
第二種:按方向
第一種拆法:
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等價於:border:10px solid red
第二種拆法:就是把每個方向的,每個要素拆開:
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等價於:border:10px solid red;
<4>可以用邊框做三角形。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三角形</title> <style type="text/css"> p{ width: 0px; height: 0px; border: 30px solid white; border-top-color: pink; transition:all 1s ease 0s; } p:hover{ transform: rotate(180deg); } </style> </head> <body> <p> </p> </body> </html>
4.標準文檔流
4.1區塊層級元素和行內元素
<1>從宏觀上講,web頁面和Ps等設計軟體有本質的趨避:
web頁面的製作,從上往下。而設計軟體,想往哪裡畫東西,都可以畫。
<2>標準流的微觀性質:
(1)空白摺疊現象。
(2)高矮不齊,底邊對齊。
(3)自動換行,一行寫不完,換行寫。
<3>區塊層級元素和行內元素
(1)標籤分為兩種等級:區塊層級元素和行內元素。
(2)區塊層級元素:
霸佔一行,不能與其他任何元素並列。能接受寬高。如果不設定寬度,那麼寬度將預設變為父親的100%。
(3)行內元素:
可以與其他行內元素並排。不能設定寬高。預設的寬度,就是文字的寬度。
(4)標籤分為:文本級、容器級。
文本級:p、span、a、b、i、u、em容器級:p 、h系列 、li 、dt 、dd
基本上所有的文本級標籤,都是行內元素。除了p,是區塊層級元素。
所有的容器級標籤,都是區塊層級元素。
4.2區塊層級元素和行內元素的相互轉換
<1>區塊層級元素可以設定為行內元素。行內元素可以設定為區塊層級元素。
<2>display用來改變元素的行內、塊級性質。
display:inline; 這個標籤將會變為行內元素。display:block; 這個標籤將會變為區塊層級元素。
<3>css中一共有三種手段,使一個元素脫離標準文檔流。
(1)浮動
(2)絕對位置
(3)固定定位
5.浮動:是CSS裡面布局用的最多的屬性。
5.1浮動的元素脫標
5.2浮動的元素互相貼靠
<1>如果有足夠的空間,會靠著二哥。如果沒有足夠的空間,會靠著一哥。如果沒有足夠的空間靠著一哥,自己去貼左牆。
<2>float:left/right;
5.3浮動的元素有“字圍”效果