css:盒子模型 - 簡(jiǎn)書

1.盒子模型具有的屬性：

內(nèi)容(content)
填充(padding)
邊框(border)
邊界(margin)

圖示如下:

image

2.流概念

1.流的概念

在現(xiàn)實(shí)生活中已經(jīng)流水，在網(wǎng)頁設(shè)計(jì)中就是指元素(標(biāo)簽）的排列方式读处，默認(rèn)情況下，向網(wǎng)頁的左上角流動(dòng)

2.標(biāo)準(zhǔn)流的概念

元素在網(wǎng)頁中就像流水，排在前面的元素(標(biāo)簽)內(nèi)容在前面出現(xiàn)馏谨，排在后面的元素(標(biāo)簽）內(nèi)容在后面出現(xiàn)

3.非標(biāo)準(zhǔn)流的概念

當(dāng)某個(gè)元素(標(biāo)簽)脫離了標(biāo)準(zhǔn)(比如因?yàn)橄鄬?duì)定位)排列芬失，就稱為非標(biāo)準(zhǔn)流．

3.實(shí)例代碼一：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div-box{
            width:200px;
            height:200px;
            background-color:pink;
            /*指定邊框的像素*/
            border:15px solid red;
            /*表示該div與其父元素的上邊距的大小*/
            margin-top:40px;
            /*表示該div到瀏覽器左邊界的距離*/
            margin-left:60px;
            /*表示該div中的元素距離邊框的距離*/
            padding:5px;
        }
    </style>
</head>
<body>
<div id="div-box">hello world</div>
</body>
</html>

效果：

image

4.實(shí)例代碼二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            width:300px;
            height:180px;
            border:1px solid blue;
        }
        #div-box{
            width:280px;
            height:160px;
            border:1px solid red;
            margin:  10px 0 0 10px;
        }
        #div-box img{
            width:140px;
            height:100px;
            border:1px solid black;
            margin:10px 0 0 10px;

        }
    </style>
</head>
<body>
<div id="div-box">
    <img src="a.jpg">
</div>
</body>
</html>

效果如下：

image

5.實(shí)例代碼三：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;/*指定主頁面距離父標(biāo)簽的距離*/
            padding:0;
        }
        #div-box{
            width:800px;/*指定灰色邊框的寬度*/
            height:500px;/*指定灰色邊框匠高度*/
            border:1px solid grey;/*定義邊框?yàn)?px的實(shí)線灰色邊框*/
            margin:20px 0 0 20px;/*定義灰色邊框距離上個(gè)標(biāo)簽20px的距離楣黍，距離瀏覽器邊界20px*/
        }
        .img_list{
            list-style:none;/*圖像列表無樣式*/
            background-color:pink;
        }
        .img_list img{
            width:125px;/*定義每個(gè)圖像的寬度為125px*/
            height:85px;/*定義每個(gè)圖像的高度訓(xùn)85px*/
            margin:10px 0 0 20px;/*定義每個(gè)圖像距離紅色邊框上邊10px,左邊20px*/
        }
        .img_list li{
            float:left;/*使用左浮動(dòng)*/
            border:1px solid red;/*定義每個(gè)圖像的邊框?yàn)椋眕x的實(shí)線紅色邊框*/
            width:165px;/*定義每個(gè)邊框的寬度為165px*/
            height:125px;/*定義每個(gè)邊框的高度為125px*/
            margin:10px 0 0 10px;/*定義紅色邊框距離上個(gè)標(biāo)簽和左邊的標(biāo)簽的距離各為10px*/
        }
        .img_list a{
            display:block;/*把字體轉(zhuǎn)換為塊元素*/
            margin-left:60px;/*超鏈接的字體距離紅色邊框左邊距離為80px*/
            margin-top:-3px;/*超鏈接的字體距離紅色邊框下邊距離為-3px*/
        }
        .img_list a:hover{
            color:red;/*鼠標(biāo)懸浮上超鏈接時(shí)，字體變成紅色*/
            text-decoration:underline;/*鼠標(biāo)懸浮上超鏈接時(shí)棱烂，字體加下劃線*/
        }
    </style>
</head>
<body>
<div id="div-box">
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
    </ul>
</div>
</body>
</html>

效果如下：

image

6.實(shí)例代碼四：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1000px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:960px;
            height:250px;
            border:2px solid white;
            margin:30px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:200px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:250px;
            height:180px;
            margin:15px 0 0 55px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:80px;
            margin-top:4px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">優(yōu)酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">愛心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">愛心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">愛心月</a></span></li>
    </ul>
    </div>
    <div class="div1">
        <span class="l_cont">優(yōu)酷牛人</span>
        <ul class="img_list">
            <li><img src="a.jpg"><span><a href="#">愛心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">愛心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">愛心月</a></span></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下：

image

7.實(shí)例代碼五：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1100px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:1060px;
            height:750px;
            border:2px solid white;
            margin:20px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:195px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:200px;
            height:250px;
            margin:15px 0 0 40px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:10px;
            margin-top:4px;
        }
        .con1{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
        .con2{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">優(yōu)酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行內(nèi)元素浮動(dòng)后會(huì)變成塊元素塊元素</a>
            </span><p class="con1">用戶:21856</p><p class="con2">發(fā)布:1天前</p></li>
    </ul>
</div>
</body>
</html>

效果如下：

image

盒子基本概念：

padding的設(shè)置
padding有四個(gè)方向租漂，分別描述4個(gè)方向的padding。

描述的方法有兩種
padding
1颊糜、寫小屬性,分別設(shè)置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2哩治、寫綜合屬性，用空格隔開

/*
上右下左
*/

padding: 20px 30px 40px 50px ;

/*
上左右下
*/

padding: 20px 30px 40px;

/*
上下左右
*/

padding: 20px 30px;

/*
上下左右
*/
padding: 20px;
2 border:邊框的意思衬鱼，描述盒子的邊框

邊框有三個(gè)要素：粗細(xì) 線性樣式顏色

按照3要素來寫border
border-width: 3px;
border-style: solid;
border-color: red;

border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;

*/
按照方向劃分
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12條語句业筏，相當(dāng)于 bordr: 10px solid red;

另外還可以這樣：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
清除邊框的默認(rèn)樣式，比如input輸入框

border:none;
border:0;
使用border來制作小三角
/小三角箭頭指向下方/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
3 margin
margin：外邊距的意思鸟赫。表示邊框到最近盒子的距離蒜胖。(兄弟之間)

/表示四個(gè)方向的外邊距離為20px/
margin: 20px;
/表示盒子向下移動(dòng)了30px/
margin-top: 30px;
/表示盒子向右移動(dòng)了50px/
margin-left: 50px;
margin-bottom: 100px;