盒子模型（CSS重點）

2021-09-27 09:37:03 字數 3150 閱讀 1253

大致了解盒子模型：把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都是由：元素的內容、內邊距（padding)、邊框（border）和外邊距（margin）組成

2.1盒子邊框（border）
語法：border : border-width || border-style || border-color

1、border-width：邊框粗細

2、border-style：邊框樣式

3、border-color：邊框顏色

注意：三者基本同時出現，可以簡寫：border：width style color

2.1.1 border-width：邊框粗細

2.1.2 border-style：邊框樣式 >

border-style : none | dashed | solid

none: 無邊框

dashed：虛線邊框

solid：實線邊框

dotted：點虛線

2.1.3 border-color：邊框顏色

2.2 **的細線邊框

語法：border-collapse: collapse;#相鄰邊框合併在一起效果：使得原本較粗的邊框變細

2.3圓角邊框（css3）
語法：border-radius:50%#讓乙個正方形變成圓


50%這裡也可以寫成其他以px單位的數值，可以是角變弧


還可以寫成：border-radius:px px px px 代表四個角 和邊框的上下左右類似


2.4 內邊距（padding） 


padding屬性用於設定內邊距（邊框與內容之間的距離）用途：當盒子裡的內容和盒子邊框太近時，用padding設定兩邊寬度即可。


> 計算內邊距：


1、當乙個盒子同時設定width 和 height時，再設定padding 會導致整個盒子撐開，變大。


2、為了使盒子不變大，只能在設定padding之後，計算width 和 height的值，這樣就可以保證整個盒子的大小。


3、調節的是大盒子的內邊距


4、注意，border的值也會影響盒子的大小，因此大盒子的寬高要也應減掉border的值*2；


盒子的最終寬度 = border-left + border-right + padding - right + padding-left + width


盒子的高度 = border-top + border-botton + padding - top + padding-bottont + height




注意：border 和padding的值要是設定兩次 則以後一次的為準，如果第二次的設定，只是某部分更改，那只更改修改部分，其他保持不變。


例題： 


2.5 外邊距（margin） 


設定和內邊距相同


清除內外邊距：


*


2.6 盒子陰影（css3） 


想要設定的盒子慢慢出來：transition: all 1s;


css的定位機制有3種：普通流（標準流）、浮動、定位


3.1 普通流（normal float） 


又稱標準流（常用的稱呼）


定義：正常的排列順序，如行內元素，當設定多個行內元素時 其擺放順序是自左向右。


3.2浮動（float） 


作用：讓多個div盒子在同一行顯示（雖然可以轉換型別，但是會存在縫隙，而浮動沒有）


浮動脫離標準流，簡稱脫標，意思就是不在原來的位置，而是飄起來，而影響其他盒子的位置。為了解決這個問題可以加乙個父盒子來存放這些浮動起來的盒子。


1、浮動的內容不佔padding


2、若不浮動的元素（div元素）獨佔一行，下面其他元素浮動在其下一行。所以要想浮動顯示在同一行，需要全部一起浮動才可以實現。


3、浮動可以讓元素預設轉換為行內元素，其寬度為內容的長度 記憶方法：


記憶方法：


浮：加了浮動的元素盒子是浮起來的，漂浮在其他盒子上面


漏：加了浮動的盒子，不佔位置，它原本的位置會被標準流的盒子占用。


特：特別注意，首先浮動的盒子需要和標準流的付清搭配使用，其次特別注意，浮動可以使元素顯示模式體現為行內元塊特性
				
盒子模型（CSS重點）
其實，css就三個大模組 盒子模型 浮動 定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。所謂盒子模型就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成。border...

				
CSS 盒子模型（重點）
屬性 border width border style border color 簡寫 border 1px solid red 注意 邊框在盒子外部，會影響盒子的大小 合併相鄰邊框 border collapse collapse 內容 可以放文字，也可以放盒子 內邊距 邊框與內容的距離 屬性 ...

				
css盒子模型 CSS  盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...