盒子模型與背景屬性
一.盒子模型
1.介紹
2. 元素的總寬度和總高度
二.自定義邊框——border
1.基本設定
2.邊框寬度——border width
3.邊框顏色——border color
4.邊框樣式——border style
5.css的邊寬和高度——width height
三.背景——background
1.背景顏色——background color
2.背景影象—— background image
3.背景重複—— background repeat
4.背景的附件（固定與滾動）——background attachment
一.盒子模型
1.介紹
所有html元素都可以視為方框。
css邊框模型代表**的設計和布局。
它由邊緣（margins），邊框（ borders），內邊距（paddings），和內容（content）組成的。
這些屬性以什麼的順序工作：top->right->bottom->left。
小知識：
網頁的每個元素都是乙個盒子（box）。 css使用盒子模型來確定盒子有多大以及如何放置它們。
框模型還用於計算html元素的實際寬度和高度。
2. 元素的總寬度和總高度
（1）總寬度等於左右邊緣，邊框，邊距相加：
（2）總高度：上下相加
二.自定義邊框——border
1.基本設定
border屬性允許您自定義html元素的邊框。
為了向元素新增邊框，您需要指定邊框的大小，樣式，顏色。
p 2.邊框寬度——border width
使用border-width屬性可以 單獨設定邊框寬度
p3.邊框顏色——border color
可以使用顏色名稱，rgb或十六進製制值定義元素的邊框顏色。
p.first
小知識：除非設定border-style屬性，否則所有border屬性都不會起作用。
4.邊框樣式——border style
預設值為none
多種樣式：**dotted（點）, dashed（虛線）, double（雙邊框）**等。
p p pp
p p pp
p 效果圖：
5.css的邊寬和高度——width height
要設定元素的總寬度和高度為100px：
div
框的總寬度和高度將為90px + 5px（邊框）+ 5px（邊框）= 100px；
可以使用百分比 進行分配。
div
3.要設定元素的最小和最大高度與寬度，可以使用以下屬性：
min-width-元素的最小寬度
min-height-元素的最小高度
max-width-元素的最大寬度
max-height-元素的最大高度
p三.背景——background
1.背景顏色——background color
background-color屬性用來指定乙個元素的背景色。
列：body
h1 p
2.背景影象—— background image
background-image屬性中的元素可以設定乙個或幾個背景影象。
url指定路徑的影象檔案。相對路徑和絕對路徑均受支援。
預設情況下，背景影象放置在元素的左上角，並在垂直和水平方向重複以覆蓋整個元素。
列;為元素設定背景。
p 小知識
要指定多個影象，只需用逗號分隔url。
3.背景重複—— background repeat
repeat-x：延x軸複製
repeat-y：延y軸複製
inherited：繼承父級屬性相同的指定值
no-repeat:不重複，只有單個
列：body
p 4.背景的附件（固定與滾動）——background attachment
有效值fixed：固定背景
scroll：向下滾動頁面是，背景也隨著滾動
inherit：繼承
列：body
css 背景 盒子模型 背景大小
背景 background color 背景顏色 十六進製制 rgbrgba a的取值0 1 background image 背景 url 位置 加 會有提示,不加沒有提示 background repeat 背景是否平鋪滿 no repeat 不平鋪滿 repeat x 在x軸平鋪滿 repea...
CSS基礎 背景樣式與盒子模型
在我們的程式設計過程中,經常不光會使用到設定字型樣式,還會用到設定背景顏色,背景等樣式,今天我們就來學習一下關於背景的樣式設定 1.背景顏色 background color 顏色這個屬性我們為我們的標籤設定背景顏色,其中我們有三種屬性值的書寫方式 1.預定義的顏色表示 red,blue,green...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...