块级元素

在css世界中，块级元素不是我们日常开发中的display属性为block的元素，而是以是否一个水平上只能存在一个元素、多个元素时会换行显示为标准的。如果display为list-item和table的元素也是块级元素。

外在盒子和内在盒子

说到盒子我第一反应又是结合实际开发中代码里写到的box-sizing，而此处外在盒子和内在盒子其实是一种概念，每个元素都是由一个外在盒子和一个内在盒子所组成。
举例说明：

display属性为inline-block的元素(如<img>)由一个外在的内联盒子和一个内在的块级盒子组成。
display属性为block的元素（如<div>）由一个外在的块级盒子和一个内在的块级容器盒子组成。此处可把block看成block-block来理解。
display属性为inline的元素(如<a>)内外均由内联盒子组成。
display属性为table的元素(如<table>)可以脑补为block-table，由一个外在的块级盒子和一个内在的table盒子组成。外在盒子负责元素是否可以一行展示还是只能换行展示，内在盒子负责保证元素的宽高、内容呈现等。

width

如前所述，元素的宽高是由内在盒子负责的，所以width也是作用在内在盒子上的。
width的默认值:auto。对于块级元素来说width：auto意味元素的宽度默认是父元素的100%。
下面的代码中的width:100%其实是多余的,因为当把一个的display设置为block以后，width：auto就会使其宽度是父元素的100%，不用额外写一份。作者觉得高水平css代码应该遵循“无宽度”准则，这一点还是挺困难的。

  a {
    display: block;
    width: 100%; //此行多余
  }

height

关于height：100%。对于width属性来说，如果父元素的width为auto，子元素的width设置为100%是支持的；而对于height来说，当父元素的height为auto，子元素（在标准流中）的height：100%就会被忽略。

  div {
    width: 100% //多余
    height: 100% //不起作用
  }

此时这个div的高度为0，要想使得这个div的高度生效，必须设置：

  html,body {
    height: 100%;
  }
  div {
    height: 100%; //此时有效
  }

为何width在父元素为auto时子元素100%能生效，而height不生效呢？因为如果包含块的高度没有显示指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。也就是说子元素此时的100%的计算方法为：'auto' * 100% = NaN。width的解释为：如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS2.1中是未定义的。对于“未定义行为”都是浏览器自己发挥的，各个浏览器可能都不一致。但目前来说各大浏览器都是支持按照包含块真实的计算值作为100%计算时的基数的。
height:100%生效的条件：

父元素显示定义了高度
元素设置成绝对定位，此时即使父元素height为auto也支持。注意：绝对定位元素在计算高度时，会把父元素的padding一起计算进来，而标准流中元素不会计算padding。

min-width/max-width min-height/max-height

min-width/min-height规范上说初始值是0，但经作者测试发现其实是auto。 max-width/max-height初始值为none。 min-width的权重比加了!important的width更大。当min-width和max-width冲突时:以min-width为准。

  .container {
    min-width: 1400px; //生效
    max-width: 1200px; //失效
  }

替换元素

定义：通过修改某个属性值呈现的内容就可以被替换的元素称为替换元素。如<img>、<object>、<video>、<iframe>等。

margin

margin: auto的填充规则：

如果一侧定值，一侧auto，则auto为剩余空间大小
如果两侧均是auto，则评分剩余空间

margin的初始值大小为0，因此一个元素如果margin-right缺失，只有margin-left：auto的话，就是块级元素的右对齐效果。水平居中：

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

margin:auto触发条件：当width或height为auto时，元素是具有对应方向的自动填充特性的。

  .father {
    height: 100px;
  }
  .son {
    height: auto; //此时这个子元素不会填满整个父元素，因此不会触发下面的margin:auto
    margin: auto; //不处罚
  }

触发元素填充特性：使用绝对定位，并设置top和bottom使得元素尺寸自动填充父级元素的可用尺寸，如：

  .father {
    height:100px;
    position:relative;
  }
  .son {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
  }

css世界笔记整理