CSS世界(张鑫旭)系列学习总结 （四）盒尺寸四大家族

盒尺寸中的4个盒子 content box、padding box、border box 和 margin box 分别对应 css 中的 content 、padding、border 和 margin 属性。

1.content

 

2.温和的padding属性

2.1 padding对元素尺寸的影响

     css默认的box-sizing是content-box，所以padding会增加元素尺寸。可以使用box-sizing为border-box处理，或者使用无宽度或宽度分离原则。

     对内联元素， padding的效果感觉在水平方向上生效，在垂直方向上不生效。

     其实，垂直方向的padding是存在的，只是因为内联元素没有可视宽度和可视宽度，其在垂直方向的行为完全受line-height和vertical-align的影响，所以表现不出来。

     应用：我们可以利用内联元素的padding增加元素的点击区域。

2.2 padding的百分比值

       对于块级元素：

　   padding的默认值是0，padding百分比值无论水平方向还是垂直方向都是基于元素自身宽度计算的。

       padding不支持负值，而margin可以。padding垂直方向百分比值基于宽度计算，而height基于父元素的height计算。

       应用：基于padding垂直方向也是相对宽度计算的特点，我们可以实现固定比例的图形，比如正方形、长方形或固定比例的banner图。

/*正方形*/
div{padding:50%}

/*宽高2:1的矩形*/
div{padding:25% 50%}

      对于内联元素：

　　1.同样相对于宽度计算；

        2.默认的高度和宽度有差异；

        3.padding会断行；

        代码如下，渲染效果难以理解，建议买书好好看看。

.box{
  border:2px dashed #cd0000;  
}

span{
padding:50%;
background-color:gray;
}

<span>内有文字若干</span>

        几个理解点，①内联元素padding是作用在行框盒子上的，如果元素内有多行，padding就会随着换行而断行，即就是padding在每行都会独立渲染；

                              ②虽然同样基于宽度计算，但内联元素有幽灵空白节点，所以同样的padding作用下，垂直方向会大一些；

                              ③被基于计算的宽度，是父容器宽度和内容宽度之和，而块级元素是自身宽度。

3.激进的margin

padding性格温和，负责内间距；margin比较激进，负责外间距。虽然都是间距，差别较大，尤其是margin，特异之处甚多。 默认值为0

3.1 元素尺寸的相关概念

　　元素尺寸：就是元素的border box的尺寸，也叫“元素偏移尺寸”。outerwidth，outerheight。

 　  元素内部尺寸：就是元素的padding box的尺寸，也叫“元素可视尺寸”。innerwidth、innerheight。

　　元素外部尺寸：就是元素margin box的尺寸。

3.2 margin对元素内部尺寸的影响

      如果元素设置了宽度（块级元素）或者宽度保持包裹性（内联元素），只有padding会改变元素的可视尺寸。

      如果元素处于“充分利用可用空间”，即表现为流特性时，margin也会改变元素可视尺寸。块级元素和格式化块级元素都具有流特性。

　  应用：基于margin具有流特性下改变尺寸的特性，可以方便地实现很多流体布局效果，本人建议大量使用。

　  1. 一侧定宽的两栏自适应布局。利用块级元素p的流特性，让p元素的宽度始终为变化的容器的宽度减去margin的宽度。

.box{overflow:hidden}
.box>img{float:left}
.box>p{margin-left:140px}

<div class="box">
    <img src="1.png">
    <p>文字内容...</P>
</div>

        2.反之，右侧固定，左侧自适应，也很好实现。

3.3  margin与元素的外部尺寸

　　对块级元素

       对于普通块状元素，margin只能改变左右方向的内部尺寸，垂直方向无法改变。而对于外部尺寸，只要是块状元素，无论有没有设置width、height，margin对外部尺寸都实实在在会产生影响。

　　利用margin负值实现两列等高布局：

.column-box{ 
overflow:hidden;
}

.column-left,.column-right{
margin-bottom:-9999px;
padding-bottom:9999px;
}

  margin百分比值：

  margin的百分比值和padding一样无论水平还是垂直方向都是相对于宽度计算的。不过，margin百分比值不常用。

  margin设置auto值

  margin：auto的自动填充规则如下：

 ①如果一侧定制，一侧auto，则auto为剩余空间大小。

 ②如果两侧均是auto，则评分剩余空间。

 因此，利用auto可以实现如下效果：

 右对齐效果，因为margin初始值为0。

.son{
  width:200px;
  marign-left:auto;    
}

居中效果：

.son{
width:200px;
margin-right:auto;
margin-left:auto;
}

触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的，即该方向上有流特性才可以自动计算。

因此可利用绝对定位元素格式化尺寸实现元素垂直水平居中：

.son{
position:absolute;
top:0;right:0;bottom:0;left:0;
width:200px;height:100px;
margin:auto;
}

内联元素

对于非替换内联元素，margin在垂直方向上无效，对应替换内联元素，垂直方向有效，并且没有margin合并问题。

margin无效的情况:

.box{
width:100px;
}

.child{
width:80px;
margin-right:100px;
}

此时，margin-right 100px对元素定位没有任何影响，实际是右侧有maigin效果，会影响后面元素和父元素，只是没有对元素定位产生影响。

原因在于，若想让margin属性改变自身位置，必须是和当前元素定位方向一样的margin属性才可以，默认文档流下，当前元素定位方向是左侧和上方。