CSS基础深刻之细说盒子模型

时间 2019-11-09

标签 css 基础深刻细说盒子模型栏目 CSS 繁體版

原文原文链接

Html任何一个元素(element)均可以当成一个盒子(box)来看待，能够结合现实中的盒子来理解下文，下文其中一些单词应该是通俗易懂的须要记录的单词。css

基本状况node

每个盒子都有一个内容区域（content area）,例如盒子里的一堆文字或者一张图片的边界，其周围是具备必定宽度的padding area,border area,和margin area，还有cotent area（相似于下图中线条的中间跑道部分）。ide

每一个area都是具备必定宽度或高度的，譬如在上下方的就是占用高度，在两侧的就是占用宽度。其边缘咱们称之为edge（相似于下图中的线条部分，实际上是没有占空间的，相似于area的最外层意思）。content area的边缘称之为content edge 或者 inner edge,padding area的边缘称之为padding edge，Border area的边缘称之为border edge，Margin area的边缘称之为margin edge or outer edge。布局

每一个盒子标配margin-中文称之为外边距或外补白,padding内边距内补白,border边框三道，最里头才是咱们的内容区域啦，比较形象的说明可见下图：spa

盒子的margin,padding,border能够分红四个方向，上，下，左，右，如上图，LM表明Left Margin,LB表明Left Border,LP表明Left Padding.code

以上就是一个盒子模型的基本常识，也是页面CSS布局的基本单元，Margin,Padding,Border默认不占空间，其值由用户设定，比较简单，最重要的莫过于Content Area内容区域宽高的计算，Content Area的高度Content Area Height称之Content Height，响应宽度称之Content Wdith，不只关乎本身占多大地盘，也关乎子孙后代是否有足够的地盘去发挥展现，影响其最终结果的主要有如下几因素：blog

自身Width 和 Height属性，咱们所说的通常的Width和Height就是Content Width,Content Height，注意一点的是即便用户Css没指定其值，它也有本身的初始值auto，这是最基本的一点。图片

是否包含子元素内容，如文本或者仍是一个box（无论是inline仍是block），也就是子元素的可能宽高计算会影响到父元素；ip

自身display属性值类型，譬如table类型，若是inline类型的计算规则跟block的也不同；element

等等，关于这块的计算不在本文的范围内，这块也比较复杂，后期会进行专门讲解，名字暂定，any box之其宽高计算。

另外须要注意一点的是，Background的设置只会影响到Border area,Padding Area,Content Area，至于Margin Area的背景老是透明的。

举个栗子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
      }
      LI { 
        color: white;                
        background: blue;            
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; 
        list-style: none            
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;      
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>我没有border
      <LI class="withborder">S我有border
    </UL>
  </BODY>
</HTML>

View Code

Chrome下会是这个样子：

解读这个结果：

每个li box（Html学科称element/node，css学科称box）的content area
第一个li box的margin-bottom和第二个的margin-top的margin发生了margin合并现象，只有在同一个BFC环境下并且是上下margin才会发生margin合并。
能够看到margin的背景色是透明的，若是其在另外一个content area下且此area有背景色的话，那看到的它就是这个颜色。
实际一个盒子的宽高，不单单只是Content Height，还包括其它，Box Height=Content Height+Top Padding Height+Top Margin Height+Top Border Height，宽度同理。譬如一条Css{width:100px;margin:1px;border:1px,padding:1px;},box其实际占用的宽度是103px而不是100.这是一个容易引发误解的地方，这点必定须要注意。

CSS如何使用

　　Margin

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

View Code

　　说明：一个是简写表明的含义还有就是CSS具备优先级，最终上面的与下面效果等效：

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}

View Code

　　须要注意的一点是，同width,height属性同样，margin-top和margin-bottom不能应用于span类非可替换行内块级别的box上，即应用不起做用，

　　其它属性如margin-right，padding,border不受限制。

　　Padding

　　　　简写顺序与margin同，其它没啥可说的

　　Border

　　　　没啥可说的

神奇的Margin合并效果

Margin或Padding，如何选择？

若是有border插一脚，包含Border的话，其实仍是很好选择的，不一样的选择，渲染出来的模样也会不同。

Margin能够负值，能够实现相似于position定位的功能，能带着内容一块儿去旅游，Padding只能是不小于0。

Margin没背景，而Padding有，受盒子的Background属性影响。

Margin会发生合并现象，Padding不会。

这俩有时候的确能达到同样的效果，有一条原则是若是是涉及到跟其它box打架争地盘，还得靠Margin，若是想让本身的孩子过得好，显得不那么挤得慌，那就用Padding。