10-[CSS]-盒模型：border，padding，margin

時間 2019-12-01

標籤 css 模型 border padding margin 欄目 CSS 简体版

原文原文鏈接

一、CSS盒子模型

HTML文檔中的每一個元素都被描繪成矩形盒子，這些矩形盒子經過一個模型來描述其佔用空間，這個模型稱爲盒子模型。盒子模型經過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如圖所示：css

    <!-- 盒模型： 在網頁中 基本上都會顯示一些方方正正的盒子，這種盒子就被咱們稱爲盒模型
        
        重要的屬性： width,height,padding,border,     margin
        
        width: 指的是內容的寬度，而不是整個盒子真實的寬度
        height: 指的是內容的高度，而不是整個盒子真實的高度
        

        作一個寬度402*402的盒子，你應該如何設計？
     -->

    <!-- 若是想保證盒子的真實寬度，加width應該減padding  減width 應該加padding -->

二、border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;

            /*簡寫*/
            /*border: 5px  solid  red;*/

            /*按照3要素*/
            /*寬度，類型，顏色*/

            /*border-width: 5px;
            border-style: solid;
            border-color: red;*/

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



            /* 按照方向分*/
            /* 四個值 上 右 下 左 */
            /*
            border-style: dotted dashed double solid;
            border-width: 5px 10px 15px 20px;
            border-color: blue red yellow slateblue;
            */

            /* 三個值 上 左右 下*/
            /*
            border-style: dotted double solid;
            border-width: 5px 10px 20px;
            border-color: blue yellow slateblue;
            */

            /* 兩個值 上下 左右 */
            /*
            border-style: dotted solid;
            border-width: 5px 20px;
            border-color: blue yellow;
            */

            /* 一個值 上下左右 */
            /*
            border-style: dotted;
            border-width: 20px;
            border-color: blue;
            */

            
            /*設置border沒有樣式*/
            /*border: none;*/
            

            /*border-top: 0;*/
            border-left: 10px solid red;

        }
    </style>
</head>
<body>

    <!-- 
    border: 邊框的意思
    邊框有三個要素： 粗細 線性 顏色
    
    若是顏色不寫，默認是黑色的

    若是 粗細不寫 不顯示。 只寫線性樣式，默認的有上下左右 3px的寬度 solid 默認的黑色
        

     -->

     <div class="box"></div>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        /*小三角 箭頭指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

3.padding內邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding</title>

    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            /*padding: 30px;*/
            background-color: red;
            /*border: 5px solid yellow;*/
            
            /*小屬性設置*/
            /*padding-top: 30px;
            padding-right: 30px;
            padding-bottom: 30px;
            padding-left: 30px;*/

            /*綜合屬性設置，用空格隔開*/
            
            /*上 右 下 左*/
            /*padding: 20px 30px 40px 50px ;*/

            /*上 左右  下*/
            /*padding: 20px 30px 40px;*/

            /* 上下 左右*/
            /*padding: 20px 30px;*/
            
            /*上下左右*/
            padding: 20px;
            

        }
    </style>
</head>
<body>

    <!-- 
    padding: 就是內邊距。 padding的區域是有背景顏色。而且背景顏色和內容區域顏色同樣
    也就是說background-color這個屬性將填充全部的border之內的區域

    就是邊框到內容之間的距離

    padding有四個方向。因此說咱們能分別描述4個方向的padding
    方法有兩種：1.寫小屬性  2.寫綜合屬性 用空格隔開


     -->
    <div class="box">
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
    </div>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>

    <!-- 
        好比說一般咱們作站的時候，要清除默認的padding，margin

        * 效率不高。因此咱們要使用並集選擇器來選中頁面中應有的標籤（不一樣背，由於有人已經給我們寫好了這些清除默認的樣式表）


        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
     -->

    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>

    </ul>
</body>
</html>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

四、margin外邊距

            /*
            內邊距：內容區域到邊框的距離
                內邊距會擴大元素所在的區域
            注意：
                爲元素設置內邊距 只能影響本身，不會影響其餘的元素；
            */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            background-color: green;
            /*margin: 20px;*/

            margin-top: 30px;
            margin-left: 50px;
            margin-bottom: 100px;

        }
        p{
            border: 1px solid green;
        }


    </style>
</head>
<body>

    <!-- margin: 外邊距  指的是距離

     -->
    <div></div>

    <p>我是一個p標籤</p>
    
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。