margin的理解

時間 2019-11-19

標籤 margin 理解欄目 CSS 简体版

原文原文鏈接

1.盒子模型

在進行網頁設計的時候，咱們使用的是盒子模型，其內容以下：css

整個網頁就是大盒子套小盒子，小盒子又套更小的盒子來實現的。可是在作網頁設計時老是搞不清margin和padding的使用方式，在此特意探討一下。html

2.margin

1.margin-top

只有塊元素有margin-top，行內元素是沒有margin-top的。margin-top是以兄弟元素的下邊界或以有上邊框的父元素爲參考點來計算的。css中的高度和寬度是content的高和寬html5

父元素無上邊框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>駕校註冊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
    body{
        min-width: 1024px;
        margin: 0px auto;
        font-family:'微軟雅黑';
    }
    .fdiv{
        width:200px; height:200px; background:#ccc;
        margin: 0;
        padding: 0;
    }
    .cdiv{
        width: 100px;
        height: 100px;
        background: #FFF7DC;
        margin-top: 20px;
        border: 1px solid black;
    }
    a{
        border:1px solid black;
    }
</style>
</head>
<body>
<div class="fdiv">
    <div class="cdiv">
    </div>
<div>
</body>
</html>

因爲米色部分的div找不到參考點，結果咱們發現是顯示的結果很奇葩，是以body上邊界做爲參考點的。ui

父元素有上邊界

 .fdiv{
        width:200px; height:200px; background:#ccc;
        margin: 0;
        padding: 0;
        border-top: 1px solid black;
  }

咱們發現一旦父元素設置了上邊界，margin-top就顯示正常了。spa

以兄弟元素爲參考

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>駕校註冊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
    body{
        min-width: 1024px;
        margin: 0px auto;
        font-family:'微軟雅黑';
    }
    .fdiv{
        width:200px; height:200px; background:#ccc;
        margin: 0;
        padding: 0;
        border: 1px solid black;
    }
    .cdiv{
        width: 100px;
        height: 100px;
        background: #FFF7DC;
        margin-top: 20px;
        border: 1px solid black;
    }
    a{
        border:1px solid black;
    }
</style>
</head>
<body>
<div class="fdiv">
    <a>ffasdfasdfasfdafdasdf</a>
    <div class="cdiv">
    </div>
<div>
</body>
</html>

米色部分div的margin-top是以a標籤的下邊界爲參考線，來計算本身須要向下的偏移量(20px)。設計

相關標籤/搜索

每日一句

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