盒子模型與背景屬性

一.盒子模型

1.介紹

2. 元素的總寬度和總高度
   
   二.自定義邊框——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.背景重復(fù)—— background repeat
   
   4.背景的附件（固定與滾動(dòng)）——background attachment
   
   一.盒子模型
   
   1.介紹
   
   所有HTML元素都可以視為方框。
   
   CSS邊框模型代表網(wǎng)站的設(shè)計(jì)和布局。
   
   它由邊緣（margins），邊框（ borders），內(nèi)邊距（paddings），和內(nèi)容（content）組成的。
   
   這些屬性以什么的順序工作：top->right->bottom->left。
   
   
   
   
   
   小知識(shí)：
   
   
   
   網(wǎng)頁(yè)的每個(gè)元素都是一個(gè)盒子（box）。 CSS使用盒子模型來(lái)確定盒子有多大以及如何放置它們。
   
   框模型還用于計(jì)算HTML元素的實(shí)際寬度和高度。
   
3. 元素的總寬度和總高度
   
   （1）總寬度等于左右邊緣，邊框，邊距相加：
   
   
   
   
   
   
   
   （2）總高度：上下相加
   
   
   
   
   
   二.自定義邊框——border
   
   1.基本設(shè)置
   
   border屬性允許您自定義HTML元素的邊框。
   
   為了向元素添加邊框，您需要指定邊框的大小，樣式，顏色。
   
   p {
   
      padding: 10px;    
   
      border: 5px solid green;
   
   }
   
   
   
   2.邊框?qū)挾取狟order Width
   
   使用border-width屬性可以 單獨(dú)設(shè)置邊框?qū)挾?br />
   
   
   p{
   
      padding: 10px;    
   
      border-style: solid;
   
      border-width: 2px;
   
   }
   
   
   
   3.邊框顏色——Border Color
   
   可以使用顏色名稱，RGB或十六進(jìn)制值定義元素的邊框顏色。
   
   
   
   p.first {
   
      padding: 10px;
   
      border-style: solid;
   
      border-width: 2px;
   
      border-color: blue;
   
   }
   
   
   
   小知識(shí)：除非設(shè)置border-style屬性，否則所有border屬性都不會(huì)起作用。
   
   
   
   4.邊框樣式——Border style
   
   默認(rèn)值為none
   
   多種樣式：dotted（點(diǎn)）, 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；
   
   
   
   可以使用百分比 進(jìn)行分配。
   
   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屬性用來(lái)指定一個(gè)元素的背景色。
   
   
   
   列：
   
   
   
   body {
   
      background-color: #C0C0C0;
   
   }
   
   h1 {
   
      background-color: rgb(135,206,235);
   
   }
   
   p {
   
      background-color: LightGreen;
   
   }
   
   
   
   2.背景圖像—— background image
   
   background-image屬性中的元素可以設(shè)置一個(gè)或幾個(gè)背景圖像。
   
   URL指定路徑的圖像文件。相對(duì)路徑和絕對(duì)路徑均受支持。
   
   默認(rèn)情況下，背景圖像放置在元素的左上角，并在垂直和水平方向重復(fù)以覆蓋整個(gè)元素。
   
   列;為<p>元素設(shè)置背景圖片。
   
   
   
   p {
   
      padding: 30px;
   
      background-image: url("1.jpg");
   
      color: white;   
   
   }
   
   
   
   小知識(shí)
   
   
   
   要指定多個(gè)圖像，只需用逗號(hào)分隔URL。
   
   
   
   3.背景重復(fù)—— background repeat
   
   repeat-x：圖片延x軸復(fù)制
   
   repeat-y：圖片延y軸復(fù)制
   
   Inherited：繼承父級(jí)屬性相同的指定值
   
   no-repeat:不重復(fù)，只有單個(gè)圖片
   
   列：
   
   
   
   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.背景的附件（固定與滾動(dòng)）——background attachment
   
   有效值
   
   
   
   fixed：固定背景圖片
   
   scroll：向下滾動(dòng)頁(yè)面是，背景也隨著滾動(dòng)
   
   Inherit：繼承
   
   列：
   
   
   
   body {
   
      background-image: url("1.png");
   
      background-repeat: no-repeat;
   
      background-attachment: scroll;
   
   }