在CSS中,"box model"這一術語是用來設計和佈局時使用,而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。css
盒模型有兩種:標準模型和IE模型。咱們在這裏重點講標準模型。html
width:內容的寬度前端
height: 內容的高度python
padding:內邊距,邊框到內容的距離linux
border: 邊框,就是指的盒子的寬度web
margin:外邊距,盒子邊框到附近最近盒子的距離瀏覽器
若是讓你作一個寬高402*402的盒子,您如何來設計呢?佈局
答案有上萬種,甚至上一種。學習
若是一個盒子設置了padding,border,width,height,margin(我們先不要設置margin,margin有坑,後面課程會講解)spa
盒子的真實寬度=width+2*padding+2*border
盒子的真實寬度=height+2*padding+2*border
那麼在這裏要注意看了。標準盒模型,width不等於盒子真實的寬度。
另外若是要保持盒子真實的寬度,那麼加padding就必定要減width,減padding就必定要加width。真實高度同樣設置。
**************************************************************************************************************************
padding:就是內邊距的意思,它是邊框到內容之間的距離
另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域
padding有四個方向,分別描述4個方向的padding。
描述的方法有兩種
一、寫小屬性,分別設置不一樣方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
二、寫綜合屬性,用空格隔開
/*上 右 下 左*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px;
好比ul標籤,有默認的padding-left值。
那麼咱們通常在作站的時候,是要清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。
咱們如今初學可使用通配符選擇器
*{ padding:0; margin:0; }
But,這種方法效率不高。
因此咱們要使用並集選擇器來選中頁面中應有的標籤(不一樣背,由於有人已經給我們寫好了這些清除默認的樣式表,reset.css)
https://meyerweb.com/eric/tools/css/reset/
*************************************************************************************************************************
border(邊框)
border:邊框的意思,描述盒子的邊框
邊框有三個要素: 粗細 線性樣式 顏色
border: solid
若是顏色不寫,默認是黑色。若是粗細不寫,不顯示邊框。若是隻寫線性樣式,默認的有上下左右 3px的寬度,實體樣式,而且黑色的邊框。
border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow;
border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid;
上面12條語句,至關於 bordr: 10px solid red;
另外還能夠這樣
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red;
border:none;
border:0;
表示border沒有設置樣式。
/*小三角 箭頭指向下方*/ div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; }
margin:外邊距的意思。表示邊框到最近盒子的距離.
/*表示四個方向的外邊距離爲20px*/ margin: 20px; /*表示盒子向下移動了30px*/ margin-top: 30px; /*表示盒子向右移動了50px*/ margin-left: 50px; margin-bottom: 100px;
**********************************************************************************************
標準文檔流
宏觀的將,咱們的web頁面和ps等設計軟件有本質的區別,web 網頁的製做,是個「流」,從上而下 ,像 「織毛衣」。而設計軟件 ,想往哪裏畫東西,就去哪裏畫
標準文檔流下 有哪些微觀現象?
多個空格會被合併成一個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張圖片之間有間隙,若是在一行內寫img標籤,就解決了這個問題,可是咱們不會這樣去寫咱們的html結構。這種現象稱爲空白摺疊現象。
文字還有圖片大小不一,都會讓咱們頁面的元素出現高矮不齊的現象,可是在瀏覽器查看咱們的頁面總會發現底邊對齊
若是在一行內寫文字,文字過多,那麼瀏覽器會自動換行去顯示咱們的文字。
**************************************************************************************************************************
塊級元素和行內元素
學習的初期,咱們就要知道,標準文檔流等級森嚴。標籤分爲兩種等級:
好比h1標籤和span,同時設置寬高,來看瀏覽器效果,那麼你會發現:
行內元素和塊級元素的區別:(很是重要)
行內元素:
塊級元素:
塊級元素和行內元素的分類:
在之前的HTML知識中,咱們已經將標籤分過類,當時分爲了:文本級、容器級。
從HTML的角度來說,標籤分爲:
PS:爲甚麼說p是文本級標籤呢?由於p裏面只能放文字&圖片&表單元素,p裏面不能放h和ul,p裏面也不能放p。
如今,從CSS的角度講,CSS的分類和上面的很像,就p不同:
行內元素:除了p以外,全部的文本級標籤,都是行內元素。p是個文本級,可是是個塊級元素。
塊級元素:全部的容器級標籤都是塊級元素,還有p標籤。
咱們能夠經過display
屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。
一旦,給一個塊級元素(好比div)設置:
display: inline;
那麼,這個標籤將當即變爲行內元素,此時它和一個span無異。inline就是「行內」。也就是說:
一樣的道理,一旦給一個行內元素(好比span)設置:
display: block;
那麼,這個標籤將當即變爲塊級元素,此時它和一個div無異。block」是「塊」的意思。也就是說:
標準流裏面的限制很是多,致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高,那該怎麼辦呢?辦法是:移民!脫離標準流!
css中一共有三種手段,使一個元素脫離標準文檔流:
**************************************************************************************************************************
浮動是css裏面佈局最多的一個屬性,也是很重要的一個屬性。
float:表示浮動的意思。它有四個值。
看一個例子
html結構:
<div class="box1"></div> <div class="box2"></div> <span>路飛學城</span>
css樣式:
.box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; }
咱們會發現,三個元素並排顯示,.box1和span由於是左浮動,緊挨在一塊兒,這種現象貼邊。.box2盒子由於右浮動,因此緊靠着右邊。
那麼浮動若是你們想學好,必定要知道它的四大特性
1.浮動的元素脫標
2.浮動的元素互相貼靠
3.浮動的元素由"子圍"效果
4.收縮的效果
脫標:就是脫離了標準文檔流
看例子
<div class="box1">小紅</div> <div class="box2">小黃</div> <span>小馬哥</span> <span>小馬哥</span>
.box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; }
效果:紅色盒子壓蓋住了黃色的盒子,一個行內的span標籤居然可以設置寬高了。
緣由1:小紅設置了浮動,小黃沒有設置浮動,小紅脫離了標準文檔流,其實就是它不在頁面中佔位置了,此時瀏覽器認爲小黃是標準文檔流中的第一個盒子。因此就渲染到了頁面中的第一個位置上。這種現象,也有一種叫法,浮動元素「飄起來了」,但我不建議你們這樣叫。
緣由2:全部的標籤一旦設置浮動,就可以並排,而且都不區分行內、塊狀元素,都可以設置寬高
看例子
html結構
<div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div>
css樣式
.box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; }
效果發現:
若是父元素有足夠的空間,那麼3哥緊靠着2哥,2哥緊靠着1哥,1哥靠着邊。
若是沒有足夠的空間,那麼就會靠着1哥,若是再沒有足夠的空間靠着1哥,本身往邊靠
html結構:
<div> <img src="./images/企業1.png" alt=""> </div> <p> 這裏面放超多東西 </p>
css樣式:
*{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; }
效果發現:所謂字圍效果,當div浮動,p不浮動,div遮蓋住了p,div的層級提升,可是p中的文字不會被遮蓋,此時就造成了字圍效果。
收縮:一個浮動元素。若是沒有設置width,那麼就自動收縮爲文字的寬度(這點跟行內元素很像)
html結構:
<div> alex </div>
css樣式:
div{ float: left; background-color: red; }
你們必定要謹記:關於浮動,咱們初期必定要遵循一個原則,永遠不是一個盒子單獨浮動,要浮動就要一塊兒浮動。另外,有浮動,必定要清除浮動,
在頁面佈局的時候,每一個結構中的父元素的高度,咱們通常不會設置。(爲何?)
你們想,若是我初版的頁面的寫完了,感受很是爽,忽然隔了一個月,老闆說頁面某一塊的區域,我要加點內容,或者我以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白,確定是去每一個地方加內容,改圖片,而後修改父盒子的高度。那問題來了,這樣不影響開發效率嗎?答案是確定的。
看一個效果:
html效果:
<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div>
css樣式:
*{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮動 父盒子通常不設置高度*/ /*出現這種問題,咱們要清除浮動帶來影響*/ /*height: 300px;*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; float: left; height: 100px; background-color: blue; } .father2{ width: 1126px; height: 600px; background-color: purple; }
效果發現:若是不給父盒子一個高度,那麼浮動子元素是不會填充父盒子的高度,那麼此時.father2的盒子就會跑到第一個位置上,影響頁面佈局。
那麼咱們知道,浮動元素確實能實現咱們頁面元素並排的效果,這是它的好處,同時它還帶來了頁面佈局極大的錯亂!!!因此咱們要清除浮動
還好還好。咱們有多種清除浮動的方法,在這裏給你們介紹四種:
這個方法給你們上個代碼介紹,它的使用不靈活,通常會經常使用頁面中固定高度的,而且子元素並排顯示的佈局。好比:導航欄
clear:意思就是清除的意思。
有三個值:
left:當前元素左邊不容許有浮動元素
right:當前元素右邊不容許有浮動元素
both:當前元素左右兩邊不容許有浮動元素
給浮動元素的後面加一個空的div,而且該元素不浮動,而後設置clear:both。
html結構:
<div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ,而後設置clear:both 清除別人對個人浮動影響--> <!-- 內牆法 --> <!-- 平白無故加了div元素 結構冗餘 --> <div class="clear"></div> </ul> </div> <div class="box"> </div>
css樣式
*{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; }
給浮動子元素的父盒子,也就是不浮動元素,添加一個clearfix的類,而後設置
.clearfix:after{ /*必需要寫這三句話*/ content: '.'; clear: both; display: block; }
新浪首頁推薦僞元素清除法的寫法
/*新浪首頁清除浮動僞元素方法*/ content: "."; display: block; height: 0; clear: both; visibility: hidden
overflow屬性規定當內容溢出元素框時發生的事情。
說明:
這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll,不管是否須要,用戶代理都會提供一種滾動機制。所以,有可能即便元素框中能夠放下全部內容也會出現滾動條。
有五個值:
值 | 描述 |
---|---|
visible | 默認值。內容不會被修剪,會呈如今元素框以外。 |
hidden | 內容會被修剪,而且其他內容是不可見的。 |
scroll | 內容會被修剪,可是瀏覽器會顯示滾動條以便查看其他的內容。 |
auto | 若是內容被修剪,則瀏覽器會顯示滾動條以便查看其他的內容。 |
inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
逐漸演變成overflow:hidden清除法。
其實它是一個BFC區域: http://www.javashuo.com/article/p-ezyacvwn-v.html
到此爲止。關於浮動的實現並排、清除浮動的四個用法已經介紹完畢,你們必定要熟記於心。
當時說到了盒模型,盒模型包含着margin,爲何要在這裏說margin呢?由於元素和元素在垂直方向上margin裏面有坑。
咱們來看一個例子:
html結構:
<div class="father"> <div class="box1"></div> <div class="box2"></div> </div>
css樣式:
*{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid gray; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px;} .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; }
當給兩個標準流下兄弟盒子 設置垂直方向上的margin時,那麼以較大的爲準,那麼咱們稱這種現象叫塌陷。無法解決,咱們稱爲這種技巧叫「奇淫技巧」。記住這種現象,在佈局垂直方向盒子的時候主要margin的用法。
當咱們給兩個標準流下的兄弟盒子設置浮動以後,就不會出現margin塌陷的問題。
div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0px auto; /*水平居中文字*/ text-align: center; }
當一個div元素設置margin:0 auto;時就會居中盒子,那咱們知道margin:0 auto;表示上下外邊距離爲0,左右爲auto的距離,那麼auto是什麼意思呢?
設置margin-left:auto;咱們發現盒子儘量大的右邊有很大的距離,沒有什麼意義。當設置margin-right:auto;咱們發現盒子儘量大的左邊有很大的距離。當兩條語句並存的時候,咱們發現盒子儘量大的左右兩邊有很大的距離。此時咱們就發現盒子居中了。
另外如何給盒子設置浮動,那麼margin:0 auto失效。
使用margin:0 auto;注意點:
1.使用margin: 0 auto;水平居中盒子必須有width,要有明確width,文字水平居中使用text-align: center;
2.只有標準流下的盒子 才能使用margin:0 auto;
當一個盒子浮動了,固定定位,絕對定位(後面會講),margin:0 auto; 不能用了
3.margin:0 auto;居中盒子。而不是居中文本,文字水平居中使用text-align: center;
另外你們必定要知道margin屬性是描述兄弟盒子的關係,而padding描述的是父子盒子的關係
若是讓你們實現如圖的效果,應該有很多的同窗作不出來。
那麼咱們來看看這個案例,它的坑在哪裏?
下面這個代碼應該是你們都會去寫的代碼。
*{ padding: 0; margin: 0; } .father{ width: 300px; height: 300px; background-color: blue; } .xiongda{ width: 100px; height: 100px; background-color: orange; margin-top: 30px; }
由於父親沒有border,那麼兒子margin-top實際上踹的是「流」 踹的是行,因此父親掉下來了,一旦給父親一個border發現就行了。
那麼問題來了,咱們不可能在頁面中平白無故的去給盒子加一個border,因此此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。