（11）盒模型

時間 2019-11-12

標籤模型简体版

原文原文鏈接

網頁中可以跳轉的標籤都是a標籤css

a標籤要作兩個resethtml

一、統一字體顏色字體

二、清除下劃線spa

一、盒模型的引入htm

有一個css文件下的reset文件blog

/*這個文件就是用來外聯配置，作清除操做*/
a{
    /*統一字體顏色*/
    color: black;
    /*清除字體下劃線，沒有參數就是none*/
    text-decoration: none;
}

ul{
    /*清除列表樣式，沒有參數就是none*/
    list-style: none;

    /*清除列表名距離默認值*/
    margin: 0;
    padding: 0;
}

html文件下引入css文件下的參數文件it

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>利用外聯樣式清除頁面的默認值</title>
    <!--這裏將文件外聯過來-->
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

PS：margin和padding就是盒模型下的參數io

CSS文件下reset文件的初始參數設置class

/*這個文件就是用來外聯配置，作清除操做*/
body{
    margin: 0;
}
a{
    /*統一字體顏色*/
    color: black;
    /*清除字體下劃線，沒有參數就是none*/
    text-decoration: none;
}

ul{
    /*清除列表樣式，沒有參數就是none*/
    list-style: none;

    /*清除列表名距離默認值*/
    margin: 0;
    padding: 0;
}

二、盒模型解析配置

什麼是盒模型：參考w3school網頁，右鍵檢查後，無論鼠標放在哪個區域，右邊的顯示的代碼區域就有一個方塊顯示，像一個盒子同樣，其實就是標籤

這個就是盒模型的概念

盒模型解析：盒模型就是標籤，標籤顯示存在四個部分

一、最外面是margin ：位置區間（外邊距），就是控制在頁面的位置

二、而後是border ：邊框區間

三、而後是padding ：留白區間（內邊距，就是內容和border之間留白）

四、而後是寬 X 高（content）：內容區間

PS：每個區間不會重疊，都有本身獨立的區域

三、盒模型實例

需求：經過盒模型將須要的區域進行移動，放到屏幕上指定的位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .box{
            width: 200px;
            height: 200px;
            /*transparent就是透明色*/
            background-color: red;
        }
        .box{
            /*這裏寫了就會在border和內容之間造成了一個30像素的留白區域，並且由於設置留白區域整個邊框區域也會變大*/
            /*若是背景區域設置了背景顏色，則留白區域的顏色會被覆蓋*/
            padding: 30px;
        }
        .box{
            /*寬度的設置 solid實線 | dashed虛線 | dotted點狀線*/
            border: 10px solid yellow;
        }
        .box{
            /*margin：就是往下往右移動，margin-top:就是往下移動左右不動，margin-left：就是往右移*/            margin: 10px;            margin-top: 100px;            margin-left: 100px;        }    </style></head><body>    <div class="box">123</div></body></html>

相關標籤/搜索

每日一句

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