前端愛好者的小白學習之路 4-1 CSS學習筆記-盒子模型基礎知識-有解無憂

經過前面一個階段對HTML CSS基礎語法的學習之后我們已經可以寫出來一個簡單的網頁了
HTML基礎知識總結
CSS基礎語法總結
但這些想要做好網頁布局只有那些基礎知識肯定是不夠的誒
（學會了這些基礎知識我們只能對網頁中單一的一塊內容進行設計
或者是凌亂地對一整片網頁進行布局太不系統啦！）
所以我們引入了“盒子模型”這個概念，
不理解盒子模型是不能清晰明了地寫出來一個網頁的~
在這里插入圖片描述

我們看到的網頁中一個個分塊顯示的內容，其實就是一個個的盒子
作為一名初入前端領域的小白
肯定是要從盒子模型開始像搭積木一樣慢慢把網頁搭出來鴨
所以我們一起來鞏固一下盒子模型的知識點吧~

進行網頁布局的時候我們應該這么想

（其實這里放一個網頁模仿案例的整體構思程序感覺是最好的
但是奈何俺懶得一批暫時還沒有把完整的流程筆記總結出來
總結出來以后馬上會寫到博客里再增強一下理解的~）
網頁案例構思及實戰演練~（待完成）
【1】看看網頁中都有什么東西
【2】將這些內容大致做一個分塊（一般是豎直地分成幾塊兒）
【3】依次完成每個分塊中的內容
在構思的程序中，我們要：

把所有html標簽都看作是一個盒子
之后呢，在通過CSS浮動定位讓每個盒子排列成為網頁~

這里浮動和定位是基礎且無比重要的布局方法我會在接下來的博客中總結出來~
CSS浮動（待完成）
CSS定位（待完成）

CSS盒子模型(Box Model)

了解網頁布局前
先來好好康康這幾個概念吧~
我們的網頁中各個元素不可能貼在一起
那怎么讓它們之間有一定距離呢？
答案就是使用這幾個概念

margin 外邊距

border 邊框

padding 填充

content 內容

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素

盒子模型包括-

外邊距Margin–清除邊框外的區域，外邊距是透明的是本盒子與其他盒子的距離，

邊框Border–圍繞在內邊距和內容外的邊框

填充Padding–清除內容周圍的區域，內邊距是透明的

實際內容-Content–盒子的內容，顯示文本和影像

CSS box-model

盒子模型允許我們在其他元素和周圍元素邊框之間的空間放置元素

當指定一個 CSS 元素的寬度和高度屬性時，實際上是在設定內容區域的寬度和高度，

這個內容區域相當于一個小內容外面罩著的小盒子~

以淘寶網的一個版塊為例~
在這里插入圖片描述

我們看到的藍色框框里的內容
就是這個盒子的“內容區域”
而我們看到啊這部分的內容非常的復雜肯定不只有寬度和高度
所以：
為了完成一個完整的盒子模型你還必須添加內邊距（padding），邊框（border）和邊距（margin），
這里再舉一個簡單的例子：
這樣一段對盒子進行修飾的CSS代碼
這里我們可以嘗試打開在線編譯器看看效果~
菜鳥教程在線編譯器~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<style>
.big {
	width:680px;
	height:500px;
}
	
.small {
    background-color: lightgrey;
	width:400px;
    height:100px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

	<div class="big">
		<div class="small">這里是盒子內的實際內容，有 25px 內間距，25px 外間距、25px 綠色邊框，</div>

	</div>


</body>
</html>

在這里插入圖片描述
.big類選擇器對應的是最外層的大盒子

此例子中由于給小盒子定了寬度高度所以套著小盒子的大盒子并不影響小盒子里面內容有多寬~

.small類選擇器對應的是小盒子
在這里插入圖片描述

可以看到灰色框框中用紅筆畫出來的區域為——內容 content
灰色部分與紅筆畫出來的區域之間的距離即為——內邊距 padding
綠色框框則是——邊框 border

另外我們注意到取消小盒子寬度的時候效果如下：
在這里插入圖片描述
可以看到小盒子的寬度被撐開了~
小盒子的寬度=大盒子寬度-內邊距padding~

CSS邊框屬性（border）

邊框樣式

border-style 用來定義邊框的樣式
p.none {border-style:none;}-無邊框
p.dotted {border-style:dotted;}-虛線邊框
p.dashed {border-style:dashed;}-虛線邊框
p.solid {border-style:solid;}-實作邊框
p.double {border-style:double;}-雙邊框
p.groove {border-style:groove;}-凹槽邊框
p.ridge {border-style:ridge;}-壟狀邊框
p.inset {border-style:inset;}-嵌入邊框
p.outset {border-style:outset;}-外凸邊框
p.hidden {border-style:hidden;}-隱藏邊框

邊框寬度

border-width:xxpx
p.one
{
    border-style:solid;-樣式
    border-width:5px;-寬度
}
p.two
{
    border-style:solid;
    border-width:medium;
}

邊框顏色

/*"border-color" 屬性 如果單獨使用則不起作用. 要先使用 "border-style" 屬性來設定邊框，*/
border-style:solid;
border-color:pink;

邊框-對框子的四個邊進行單獨的設定

p.one{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}
<p class='one'>內容的左右為實線 上線為虛線</p>

在css中凡是帶有四個方位的屬性都是默認的“上右下左”順時針順序

所以也可以這樣寫！

border-style=dotted solid double dashed
設定四個框！
上->右->下->左
border-style=dotted solid double 
設定三個框！ 上-dotted 左右-solid 底-double
上->左右->下
border-style=dotted solid
設定三個框！ 上底 dotted 左右-solid
上下->左右

邊框的簡寫屬性

可以省去（用于設定邊框的）繁多的屬性

直接在一個屬性中設定邊框

*可以再border屬性中設定

border-width
border-style
border-color

border:5px solid pink;

更多CSS邊框屬性復制本鏈接到最底部查找即可

CSS輪廓（outline）

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用，

輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度，

p{
    border:1px solid red
        設定邊框
}
p.dotted{
    
    outline-style:dotted;
    /*與border屬性的名稱相同-dotted*/
    outline-color:blue;
    /*設定輪廓顏色*/
	outline-width:thin;
    outline-width:3px;
    /*設定輪廓寬度*/
}

CSS外邊距（margin）

margin定義元素周圍的空間，

margin和padding的概念

可見margin可以單獨改變元素的上下左右邊距

margin 單邊外邊距屬性

margin可以單獨改變元素的上下左右邊距

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin 簡寫屬性

為了縮短代碼，有可能使用一個屬性中margin指定的所有邊距屬性，這就是所謂的簡寫屬性，

margin:25px 50px 75px 100px;
上邊距為25px
右邊距為50px
下邊距為75px
左邊距為100px

margin:25px 50px 75px;
上邊距為25px
左右邊距為50px
下邊距為75px

margin:25px 50px;
上下邊距為25px
左右邊距為50px

margin:25px;
所有的4個邊距都是25px

CSS填充（padding)

padding定義元素邊框與元素內容之間的空間

margin和padding的概念

與外邊距類似 padding也有：

單邊內邊距屬性

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

簡寫屬性

padding屬性同樣有1~4個值

  padding:25px 50px 75px 100px;
上填充為25px
右填充為50px
下填充為75px
左填充為100px
  padding:25px 50px 75px;
上填充為25px
左右填充為50px
下填充為75px
  padding:25px 50px;
上下填充為25px
左右填充為50px
  padding:25px;
所有的填充都是25px

到這里我們對盒子模型有了一個初步的認知
當然真正能鍛煉我們頁面布局能力的還得是實戰演練
那么總結完浮動&定位之后就暫時跳過CSS高級技術開始總結一些頁面的設計吧~
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258745.html

標籤：其他

上一篇：springboot客戶管理系統網站(跟蹤服務/投訴反饋/業務聯系人/資信性質級別)javaweb+ssm

下一篇：手摸手帶你學移動端WEB開發

前端愛好者的小白學習之路 4-1 CSS學習筆記-盒子模型基礎知識

進行網頁布局的時候 我們應該這么想

CSS盒子模型(Box Model)

margin 外邊距

border 邊框

padding 填充

content 內容

CSS邊框屬性（border）

邊框樣式

邊框寬度

邊框顏色

邊框-對框子的四個邊進行單獨的設定

邊框的簡寫屬性

CSS輪廓（outline）

CSS外邊距（margin）

margin和padding的概念

margin 單邊外邊距屬性

margin 簡寫屬性

CSS填充（padding)

margin和padding的概念

單邊內邊距屬性

簡寫屬性

進行網頁布局的時候我們應該這么想