1.盒子模型也叫框模型,頁面上的一切元素,都可以看作是盒子
2.盒子是元素的容器,也是元素的載體,說人話就是,盒子是元素的家
二、盒子的種類與功能:
1.元素有二種:區塊層級元素和行內元素,所以他們對應的家:盒子,當然也有二種:塊級盒子,行內盒子
2.塊級盒子通常當作其它元素的容器,行內盒子中總是放內容,通常行內盒子放在塊級盒子中
三、盒子的相片順序:
1.盒子是頁面上的排列順序,由總調度師:文檔流說了算,除非盒子離家出走,脫離了文檔流
2.文檔流既是元素排列的方式,又是排列的動作,所以既是名詞也是動詞
四、盒子模型的組成部分:
1.因為盒子大多做元素容器使用,所以我們主要以塊級盒子為例進行介紹
2.盒子的四大組成部分:content(內容),padding(內邊距),border(邊框),margin(外邊距)
五、我們用四大美女來快速記憶盒子模型:
1.content內容: 我們自己的老婆或者女朋友,這是看得見,摸得著的東西
2.padding內邊距:它是透明的,就像你老婆的閨蜜,時刻影響著你和老婆的關係
3.border邊框:它是可見的,它變化多端,風情萬種,最撩人最風騷,就像你的紅顏知己,夢中情人或小情人
4.margin外邊距:和padding內邊距一樣也是透明的,就像老大的女人,哥們的老婆,永遠活在你的想像中
六、content內容:
1.支援寬度width和高度height設定
2.內部可以是塊元素,也可以是行內元素
3.支援背景設定
七、padding內邊距:
1.支援四個方向設定大小,按順時針排列:上、右、下、左
2.也可以單獨設定
padding-top: 上邊距
padding-right: 右邊距
padding-bottom: 下邊距
padding-left: 左邊距
3.支援簡寫:
padding: 10px 5px 10px 5px; 上10px,右5px,下10px,下5px
padding: 10px 20px 30px; 上10px,左右20px,下30px
padding: 10px 20px; 上下10px, 左右20px
padding: 10px; 上,右,下,左全部為10px
八、margin外邊距:
1.支援四個方向設定大小,按順時針排列:上、右、下、左
2.也可以單獨設定
margin-top: 上邊距
margin-right: 右邊距
margin-bottom: 下邊距
margin-left: 左邊距
3.支援簡寫:
margin: 10px 5px 10px 5px; 上10px,右5px,下10px,下5px
margin: 10px 20px 30px; 上10px,左右20px,下30px
margin: 10px 20px; 上下10px, 左右20px
margin: 10px; 上,右,下,左全部為10px
九、border邊框:
1.內外邊距是透明不可見的,所以只有寬度可以設定
2.邊框是可見的,所以他有三個子屬性可以設定: 寬度,樣式,顏色
3.設定順序: 上、右、下、左
設定上邊框:
border-top-width: 5px; //設定寬度
border-top-style: solid; //設定樣式
border-top-color: #f60; //設定前景色彩/顏色
border-top: 5px solid #f60; //簡寫
設定右邊框:
border-right-width: 10px;
border-right-style: dashed;
border-right-color: #888;
border-right: 10px dashed #888;
設定下邊框:
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #555;
border-bottom: 10px solid #555;
設定左邊框:
border-left-width: 8px;
border-left-style: dotted;
border-left-color: #333;
border-left: 8px dotted #333;
所有邊框使用統一設定:
border-width: 10px; //四條邊框統一設定寬度
border-style: solid; //四條邊框統一設定樣式
border-color: gray; //四條邊框統一設定顏色
border: 10px solid gray; //四條邊框統一設定的簡寫
十、圓角盒子的設定技巧:
1:設定圓角:之前都是通過圖片方式來實現,現在通過代碼就可以
2:邊框有四個頂點,可以針對每個頂點進行設定
2.1:左上方 border-top-left-radius:20px;
2.2:右上方 border-top-right-radius:20px;
2.1:右下角 border-bottom-right-radius:20px;
2.1:左下角 border-bottom-left-radius:20px;
注意:老外與我們思維不一樣,屬性中是把上top下bottom寫在左右之前
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>1.盒子模型</title> <style> .box1 { /*在父級盒子.box已經設定過了*/ /*width: 200px;*/ /*height:200px;*/ /*background-color: #f89;*/ border: 2px solid #363636; /*通過計算,設定內邊距40px,可實現圖片置中*/ padding:40px; /*結果並未實現置中,這是為什麼呢?因為內邊距會撐開盒子,這與我們生活中的盒子是不一樣的*/ /*解決方案有二個:1.修改盒子大小,寬高減去padding值,2.為該盒子套一個父級盒子,單獨設定寬高*/ /*第一種方案:修改當前盒子大小*/ /*width: 120px;*/ /*思考:為什麼要減去80px?因為邊距是成對的,40px的2倍就是80px*/ /*height:120px;*/ } /*.box是.box1的父級盒子,在這裡設定了寬高,子盒子就不必設定了*/ /*我這裡忽略了邊框寬度的影響*/ .box { width: 200px; height:200px; } .box2{ width: 200px; height:200px; background-color: lightskyblue; borer: 2px solid #333; margin-bottom: 20px; } .box3{ width: 200px; height:200px; background-color: lightgreen; borer: 2px solid #333; /*margin-top: 20px;*/ /*上下外邊距的二個特徵:*/ /*1.如果上下外邊距相等,並不會相加,而是相互疊加在了一起;*/ /*2.如果上下外邊距不相待,則會產生塌陷,最終數值大的外邊距勝出,以它為準*/ margin-top: 30px; /*注意:左右外邊距不會產生疊加和塌陷,仍是各自相加為最終結果*/ } /*邊框設定*/ .box4 { width: 200px; height:200px; background-color: lightskyblue; /*設定上邊框:*/ /*設定寬度*/ /*border-top-width: 5px;*/ /*設定樣式*/ /*border-top-style: solid;*/ /*設定前景色彩/顏色*/ /*border-top-color: #f60;*/ /*簡寫*/ /*border-top: 5px solid #f60;*/ /*設定右邊框:*/ /*border-right-width: 10px;*/ /*border-right-style: dashed;*/ /*border-right-color: #888;*/ /*border-right: 10px dashed #888;*/ /*設定下邊框:*/ /*border-bottom-width: 10px;*/ /*border-bottom-style: solid;*/ /*border-bottom-color: #555;*/ /*border-bottom: 10px solid #555;*/ /*設定左邊框:*/ /*border-left-width: 8px;*/ /*border-left-style: dotted;*/ /*border-left-color: #333;*/ /*border-left: 8px dotted #333;*/ /*所有邊框使用統一設定:*/ /*統一設定寬度*/ /*border-width: 10px;*/ /*統一設定樣式*/ /*border-style: solid;*/ /*統一設定顏色*/ /*border-color: gray;*/ /*統一設定的簡寫*/ /*border: 10px solid gray;*/ } /*圓角盒子設定技巧*/ .box5 { width: 200px; height:200px; background-color: #f89; border-top-left-radius: 20px; border-top-right-radius: 40px; border-bottom-right-radius: 60px; border-bottom-left-radius: 80px; /*如果每個角的圓度是一樣的,可以簡化*/ border-radius: 20px; /*如果原盒子是一個正方形的話,只需要把角度設定為寬度的一半即可得到一個正圓*/ border-radius: 100px; /*為了適應外部盒子變化,建議設定為百分比,例如:50%,效果完全一樣*/ /*border-radius: 50%;*/ } /*建立有陰影盒子的技巧*/ .box6 { width: 200px; height:200px; background-color: lightskyblue; /*設定圓角*/ border-radius:50%; /*設定內邊距並重新調整盒子大小*/ padding: 10px; width: 180px; height: 180px; /*設定盒子的陰影*/ /*box-shadow: X軸位移 Y軸位移 陰影大小 陰影擴充 陰影顏色 ;*/ /*外光暈:模糊8px,陰影到邊框為3px*/ box-shadow:0 0 8px 3px #888; /*內發光:模糊8px,陰影到邊框為3px*/ box-shadow:0 0 8px 3px #888 inset; /*向右下投影*/ box-shadow:8px 8px 8px 3px #888; /*向左上投影*/ box-shadow:-8px -8px 8px 3px #888 ; } </style></head><body>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
