手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

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

2020-3-31    seo達(dá)人

盒子模型與背景屬性

一.盒子模型

1.介紹

  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.背景重復(fù)—— 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元素的實際寬度和高度。
  2. 元素的總寬度和總高度

    (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或十六進(jìn)制值定義元素的邊框顏色。



    p.first {

       padding: 10px;

       border-style: solid;

       border-width: 2px;

       border-color: blue;

    }



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



    4.邊框樣式——Border style

    默認(rèn)值為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;



    可以使用百分比 進(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屬性用來指定一個元素的背景色。



    列:



    body {

       background-color: #C0C0C0;

    }

    h1 {

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

    }

    p {

       background-color: LightGreen;

    }



    2.背景圖像—— background image

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

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

    默認(rèn)情況下,背景圖像放置在元素的左上角,并在垂直和水平方向重復(fù)以覆蓋整個元素。

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



    p {

       padding: 30px;

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

       color: white;   

    }



    小知識



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



    3.背景重復(fù)—— background repeat

    repeat-x:圖片延x軸復(fù)制

    repeat-y:圖片延y軸復(fù)制

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

    no-repeat:不重復(fù),只有單個圖片

    列:



    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;

    }


分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔