《Web前端開發基礎》課件-視頻8 盒子模型概念_第1頁
《Web前端開發基礎》課件-視頻8 盒子模型概念_第2頁
《Web前端開發基礎》課件-視頻8 盒子模型概念_第3頁
《Web前端開發基礎》課件-視頻8 盒子模型概念_第4頁
《Web前端開發基礎》課件-視頻8 盒子模型概念_第5頁
已閱讀5頁，還剩12頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

盒子模型

--盒子模型的概念01盒子模型的概念盒子的邊框02盒子的外邊距03目錄盒子的外邊距041盒子模型的概念包裝好的物品占據的空間往往都要比單純的物品大。同一個物品，調整包裝時的各種間距，最終的包裝盒大小時不一樣的。生活中的盒子：CSS將HTML頁面中的每一個元素看成是一個矩形盒子，占據一定的頁面空間。一個HTML頁面由很多這樣的盒子組成，這些盒子之間會相互影響，因此網頁布局主要是掌握：一個獨立的盒子的內部結構；多個盒子之間的相互關系。網頁中的盒子：一個獨立的盒子模型由四部分組成：content（內容）、border（邊框）、padding（內邊距）和margin（外邊距）盒子模型的構成：盒子的實際寬度=width+padding（左右）+border（左右）+margin（左右）盒子的實際高度=height+padding（上下）+border（上下）+margin（上下）多個盒子之間通過這幾個屬性進行控制：4盒子邊框邊框是圍繞元素內容和內邊距的一條或多條線，可定義它們的樣式、寬度和顏色。上top右right下bottom左left屬性含義屬性值樣式border-top-style上邊框的樣式屬性none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset/inheritborder-right-style右邊框的樣式屬性border-bottom-style下邊框的樣式屬性border-left-style左邊框的樣式屬性border-style4條邊框的樣式屬性寬度border-top-width上邊框的寬度屬性thin/medium/thick/長度/inheritborder-right-width右邊框的寬度屬性border-bottom-width下邊框的寬度屬性border-left-width左邊框的寬度屬性border-width4條邊框的寬度屬性顏色border-top-color上邊框的顏色屬性顏色名/十六進制數/rgb函數/transparent/inheritborder-right-color右邊框的顏色屬性border-bottom-color下邊框的顏色屬性border-left-color左邊框的顏色屬性border-color4條邊框的顏色屬性屬性含義屬性值復合border-top一個聲明定義所有上邊框的屬性border-top-widthborder-top-styleborder-top-colorborder-right一個聲明定義所有右邊框的屬性border-right-widthborder-right-styleborder-right-colorborder-bottom一個聲明定義所有下邊框的屬性border-bottom-widthborder-bottom-styleborder-bottom-colorborder-left一個聲明定義所有左邊框的屬性border-left-widthborder-left-styleborder-left-colorborder一個聲明定義所有邊框的屬性border-widthborder-styleborder-colorCSS可為每一條邊框提供一條聲明即可完成定義的屬性，即border-top、border-right、border-bottom、botter-left。也提供了一次對4條邊框設置的屬性border，屬性值是border-width、border-style、border-color，其中border-width和border-color寬度和顏色是可省略屬性值的簡寫形式：對于border-color、border-width、border-style這3個屬性，如果這樣簡寫的話：（1）給出2個屬性值，那么前者代碼上、下邊框的屬性值，后者代表左、右邊框的屬性值。（2）給出3個屬性值，那么前者表示上邊框的屬性值，中間的數值表示左、右邊框的屬性值，后者表示下邊框的屬性值。（3）給出4個屬性值，那么依次表示上、右、下、左邊框的屬性值，即順時針排序。<html>

<head>

<title>設置邊框樣式</title>

<styletype="text/css">

p{

text-align:center;

}

.mystyle{

border-color:redgreenorange;

border-width:thick;

border-style:groovedashed;

}

</style></head>

<body>

<p><imgsrc="../images/love.png"class="mystyle"></p></body>

</html>2盒子內邊距元素的內邊距在邊框和內容區之間，常用屬性如下：屬性含義屬性值padding-top定義元素的上內邊距長度/百分比/inheritpadding-right定義元素的右內邊距padding-bottom定義元素的下內邊距padding-left定義元素的左內邊距padding定義元素的內邊距auto/長度/百分比/inherit屬性值為長度時，不允許使用負數；百分比是相對于父元素寬度的比例。<html>

<head>

<title>設置內邊距樣式</title>

<styletype="text/css">

p{

text-align:center;

}

.mystyle{

border-color:redgreenorange;

border-width:thick;

border-style:groovedashed;

padding:50px;

}

.yourstyle{

border:5pxdottedpink;

border-left:2pxredsolid;

}

</style></head>

<bodybackground="gray">

<p><imgsrc="../images/gz-1.png"class="mystyle"></p>

<br/>

<p><imgsrc="../images/gz-1.png"class="yourstyle"></p></body>

</html>內邊距padding:10px5px9px代表上10px，右左5px，下9pxpadding:10px5px代表上下10px，右左5pxpadding:5px代表上右下左都是5px3盒子外邊距元素的外邊距是圍繞元素邊框和其他元素內容之間的距離，設置外邊距會在元素外創建額外的“空白”。常用屬性如下：屬性含義屬性值margin-top定義元素的上外邊距長度/百分比/inheritmargin-right定義元素的右外邊距margin-bottom定義元素的下外邊距margin-left定義元素的左外邊距margin定義元素的外邊距auto/長度/百分比/inherit<html>

<head>

<title>設置外邊距樣式</title>

<styletype="text/css">

p{

text-align:center;

}

.mystyle{

border-color:redgreenorange;

border-width:thick;

border-style:groovedashed;

padding:10px;

}

.yourstyle{

border:5pxdottedpink;

border-left:2pxredsolid;

margin:0px0px0px50px;

}

</style></head>

<

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論