关于css:CSS – 乐趣区

1. 盒模型

/* 如下代码，请问 div1 的 offsetWidth 是多大？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}
</style>
<div id="div1"></div>
/* 答案：offsetWidth=width+padding+border=122px：*/

/* 扩大：如果让 offsetWidth=100px, 该如何做？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
box-sizing:border-box; /* 设置盒模型 */
}
</style>
<div id="div1"></div>

2.margin 纵向重叠问题

/* 如下代码，AAA 和 BBB 之间的间隔是多少？*/
 <style>
    p{
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>

  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>
/*
   答案：15px。解释：相邻的 margin-top 和 margin-bottom 会产生重叠；空白的 <p></p> 也会重叠。*/

3.margin 负值问题

- margin-top 和 margin-left 负值，元素向上、向左挪动；- margin-right 负值，右侧元素挪动，本身不受影响；- margin-bottom 负值，下方元素挪动，本身不受影响。

4.BFC 的了解和利用
什么是 BFC?r 如何

一.css 布局