css系列-盒子模型

下而是基本使用示例

<style>
  a {
    display: inline-block;
    border: solid 1px #ddd;
    text-align: center;
    padding: 10px 20px;
    margin-right: 30px;
  }
</style>
...

<a href="">MYSQL</a>
<a href="">LINUX</a>
<a href="">PHP</a>

外边距

声明定义

边距顺序依次为：上、右、下、左。

<style>
  main {
    border: solid 1px red;
    width: 500px;
    height: 500px;
    margin: 0 auto;
  }

  h2 {
    border: solid 2px green;
    width: 300px;
    height: 300px;
    margin: 50px 80px 100px 150px;
  }
</style>
...

<main>
<h2>内容</h2>
</main>

下例定义上下50px边距，左右80px边距

 margin: 50px 80px;

下面将边距全部定义为 100px

margin:100px;

居中设置

margin 设置auto 后，浏览器会自动计算左右外边距：

<style>
article {
	border: solid 1px red;
}

h2,h3 {
	border: solid 10px #ddd;
}

h2 {
  width: 300px;
  margin-left: 200px;
  margin-right: 200px;
}

h3 {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
</style>
...

<article>
<h2>内容区域</h2>
<h3>左右居中</h3>
</article>

负值设置

<style>
  main {
    border: solid 1px red;
    width: 300px;
    margin: 0 auto;
  }

  h2 {
    border: solid 2px green;
    margin-left: -50px;
    margin-right: -50px;
    text-align: center;
  }
</style>
...

<main>
	 <h2>设置外边距为负值，会溢出</h2>
</main>

边距合并

相邻元素的上下外边距会进行合并:

    <style>
      main {
        border: solid 1px red;
        width: 300px;
        margin: 200px auto;
        padding: 20px;
      }
      div {
        border: solid 1px green;
        height: 20px;
      }
      .div1 {
        margin-bottom: 30px;
      }
      .div2 {
        margin-top: 60px;
      }
    </style>
...

    <main>      
      <div class="div1">div1</div>   
      <div class="div2">div2</div>
    </main>

我们也可以解决外边距合并问题——触发BFC ：

一、BFC概念
BFC就是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

二、触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

例如上面的例子我们就可以给div1加个父类标签article，然后设置article{overflow:hidden;}

    <style>
      main {
        border: solid 1px red;
        width: 300px;
        margin: 200px auto;
        padding: 20px;
      }
      div {
        border: solid 1px green;
        height: 20px;
      }
      article {
        overflow: hidden;
      }
      .div1 {
        margin-bottom: 30px;
      }
      .div2 {
        margin-top: 60px;
      }
    </style>
...

    <main>      
      <article>
        <div class="div1">div1</div>
      </article>   
      <div class="div2">div2</div>
    </main>

内边距

内边距使用 padding 进行定义，使用语法与 margin 相似。

基本使用

<style>
  a {
    padding: 10px 30px;
    border: solid 1px #ddd;
    border-radius: 5px;
  }

  a:hover {
    background: rgb(3, 78, 110);
    color: white;
  }
</style>
...

<a href="">MYSQL</a>
<a href="">CSS</a>

BOX-SIZING

宽度与高度包括内边距与边框。

h2 {
  border: solid 10px #ddd;
  height: 60px;
  width: 200px;
  padding:50px;
  box-sizing: border-box;
}
...

<h2>houdunren.com</h2>

涉及到两个概念：

IE盒模型：宽高=margin+content（content=content+padding+border）；即box-sizing：border-box；

W3C标准盒模型：宽高=margin+content+padding+border；即box-sizing：content-box；