CSS盒子模型

CSS盒子模型概述

margin border padding content

盒子

內邊距

屬性 描述
padding 所有邊距
padding-bottom 底邊距
panding-left 左邊距
panding-right 右邊距
panding-top 上邊距

邊框

邊框樣式
10種非繼承樣式,包括none

邊框的單邊樣式

  1. border-top-style
  2. border-left-style
  3. border-right-style
  4. border-bottom-style

邊框的寬度 border-width

邊框單邊的寬度

  1. border-top-width
  2. border-left-width
  3. border-right-width
  4. border-bottom-width

邊框顏色 border-color

邊框單邊的顏色

  1. border-top-color
  2. border-left-color
  3. border-right-color
  4. border-bottom-color

CSS3邊框

  1. border-radius 圓角表框
  2. border-shadow 邊框陰影
  3. border-image 邊框圖片

外邊距

基本和內邊距相似

外邊距合併

相鄰的2個盒子將2個邊距合併成一個邊距 如果邊距不同,則遵循邊距大的

盒子模型應用

下面是一個簡單的頁面盒子應用DEMO

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型的應用</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="top">
        <div class="top_content">

        </div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="content">
            <div class="notifi"></div>
        </div>
    </div>
    <div class="foot">
        <div class="foot_content"></div>
        <div class="foot_nav"></div>
    </div>
</body>
</html> 

CSS:

*{
    margin: 0px;
    padding: 0px;
}


.top{
    width: 100%;
    height: 50px;
    background-color: black;
}

.top_content{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background: darkgrey;
}

.body{
    width: 75%;
    height: 1500px;
    margin: 20px auto;
    background: darkgray;
}

.body_img{
    width: 100%;
    height: 400px;
    background-color: darkorange;
}



.content{
    width: 100%;
    height: 1100px;
    background-color: blueviolet;
}

.notifi{
    width: 100%;
    height: 100px;
    background-color: darkgray;
}

.foot{
    width: 75%;
    height: 400px;
    background-color: indigo;
    margin: 0px auto;
}
.foot_content{
    width: 100%;
    height: 350px;
    background-color: darkseagreen;
}

.foot_nav {
    width: 100%;
    height: 50px;
    background-color: slategray;
}

Github下載地址:https://github.com/surrenderios/CSSBoxApply

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章