久久久99爱,伊人久久大香线蕉av超碰演员,伊人天天综合

SS之盒子模型與背景屬性————每天一遍小知識

2020-3-31 seo達人

盒子模型與背景屬性

一.盒子模型

1.介紹

元素的總寬度和總高度

二.自定義邊框——border

1.基本設(shè)置

2.邊框?qū)挾取狟order 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邊框模型代表網(wǎng)站的設(shè)計和布局。

它由邊緣（margins），邊框（ borders），內(nèi)邊距（paddings），和內(nèi)容（content）組成的。

這些屬性以什么的順序工作：top->right->bottom->left。

小知識：

網(wǎng)頁的每個元素都是一個盒子（box）。 CSS使用盒子模型來確定盒子有多大以及如何放置它們。

框模型還用于計算HTML元素的實際寬度和高度。
元素的總寬度和總高度

（1）總寬度等于左右邊緣，邊框，邊距相加：

（2）總高度：上下相加

二.自定義邊框——border

1.基本設(shè)置

border屬性允許您自定義HTML元素的邊框。

為了向元素添加邊框，您需要指定邊框的大小，樣式，顏色。

p {

padding: 10px;

border: 5px solid green;

}

2.邊框?qū)挾取狟order Width

使用border-width屬性可以單獨設(shè)置邊框?qū)挾?br />

p{

padding: 10px;

border-style: solid;

border-width: 2px;

}

3.邊框顏色——Border Color

可以使用顏色名稱，RGB或十六進制值定義元素的邊框顏色。

p.first {

padding: 10px;

border-style: solid;

border-width: 2px;

border-color: blue;

}

小知識：除非設(shè)置border-style屬性，否則所有border屬性都不會起作用。

4.邊框樣式——Border style

默認值為none

多種樣式：dotted（點）, dashed（虛線）, double（雙邊框）等。

p {border-style: none;}

p {border-style: dotted;}

p{border-style: dashed;}

p{border-style: double;}

p {border-style: groove;}

p {border-style: ridge;}

p{border-style: inset;}

p{border-style: outset;}

p {border-style: hidden;}

5.CSS的邊寬和高度——width height

要設(shè)置<div>元素的總寬度和高度為100px：

div {

border: 5px solid green;

width: 90px;

height: 90px;

}

框的總寬度和高度將為90px + 5px（邊框）+ 5px（邊框）= 100px；

可以使用百分比進行分配。

div {

border: 5px solid green;

width: 100%;

height: 90px;

}

3.要設(shè)置元素的最小和最大高度與寬度，可以使用以下屬性：

min-width-元素的最小寬度

min-height-元素的最小高度

max-width-元素的最大寬度

max-height-元素的最大高度

p{

border: 5px solid green;

min-height: 100px;

}

三.背景——background

1.背景顏色——background color

background-color屬性用來指定一個元素的背景色。

列：

body {

background-color: #C0C0C0;

}

h1 {

background-color: rgb(135,206,235);

}

p {

background-color: LightGreen;

}

2.背景圖像—— background image

background-image屬性中的元素可以設(shè)置一個或幾個背景圖像。

URL指定路徑的圖像文件。相對路徑和絕對路徑均受支持。

默認情況下，背景圖像放置在元素的左上角，并在垂直和水平方向重復以覆蓋整個元素。

列;為元素設(shè)置背景圖片。

p {

padding: 30px;

background-image: url("1.jpg");

color: white;

}

小知識

要指定多個圖像，只需用逗號分隔URL。

3.背景重復—— background repeat

repeat-x：圖片延x軸復制

repeat-y：圖片延y軸復制

Inherited：繼承父級屬性相同的指定值

no-repeat:不重復，只有單個圖片

列：

body {

background-image: url("1.png");

background-repeat: repeat-x;

}

p {

background-image: url("1.png");

background-repeat: inherit;

margin-top: 100px;

padding: 40px;

}

4.背景的附件（固定與滾動）——background attachment

有效值

fixed：固定背景圖片

scroll：向下滾動頁面是，背景也隨著滾動

Inherit：繼承

列：

body {

background-image: url("1.png");

background-repeat: no-repeat;

background-attachment: scroll;

}