CSS世界笔记——基本尺寸总结

前一段时间总是搞不懂自己布局出现的一些小问题，因为没有透彻了解CSS，所以本人决定淘书看看有无深入挖掘CSS的宝典。然后发现了鑫哥的CSS世界这本书。就这本书而言，给小伙伴们的建议是，还没接触过CSS或还没有基础的，暂时先学好最最基础的再来。当你学完CSS基础，同时，在自己入手做网页界面时，会发现出现了很多的乱七八糟的bug，这时候，你就要去看看《CSS世界》这本书了。
针对自己看的几点汇总一下，便于回顾：
1.HTML元素一般分为两类：块级元素和内联元素

2.inline-block：（自我理解）当元素设为该属性值时，左右两侧必须也具备同行显示的属性三者才能显示在一行。如：
a为block，bc为inline-block，则a单独一行，bc一行。元素内的属性不变。【和书中的理解有点出入】

3.width:auto
【外部尺寸】：
（1）充分利用可用空间：即像div，p等元素的宽默认为父级的100%；
【内部尺寸】：
（2）收缩与包裹：典型代表就是浮动，绝对定位，inline-block元素和table元素，即宽默认值取决于内在元素的宽度；
（3）收缩到最小：最容易出现在table-layout为auto的表格中，当每一列空间都不够的时候，文字能断就断
（4）超出容器限制：内容很长的连续英文或数字，或者，内联元素被设置了white-space:nowrap。

4.关于外部尺寸与流体特性
（1）正常流宽度：在div中元素无需设置宽度，遵循”无宽度“的准则，保持流特性
（2）格式化宽度：绝对定位中若有left/right 或 top/bottom对立方位的属性值同时存在时，则由外尺寸定下子元素的宽度，如同水坝拦截河流，被拦截的宽度即为子元素的宽度。

5.内部尺寸与流体特性【前提：设置div块，但不设块内行元素width值】
（1）定宽div，子元素尺寸自定，子元素但碰壁换行
（2）最小宽度1个汉字，一连续的英文，width为0时，有奇效；
（3）不定宽div，宽取决于第一行块内子元素的总宽。

6.希望文字少时，居中，超过一行时居左显示的实现：
核心代码：

.box{
  text-align:center;
}
.content{
  display:inline-block;
  text-align:left;
}

我的理解是：
实际上因为p标签改为了inline-block的包裹性元素，则单行显示的时候，呈现包裹性；
由于宽度四边距为定值，整体块元素居中，而内容仍然居左，但由于包裹性是看不出来的；
当文字超过一行，属性值并没有发生改变，只是看起来文字居左明显了。

7.接上文width为0时的奇效：
个人理解： 由于宽度为0，因此内容无法显示出来。但添加边框，可以呈现出凹凸的样式。
width为0时，要和margin搭配，否则会重叠；即使有凹凸的样式，但此时宽仍为0，第二个元素若不设置margin，它的边距仍从上一个宽度为0的元素的左上角算起，造成重叠。

8.100%的height
这个在前期我总是反应不过来，为什么我要的背景【指无内容的空元素】显示不出来，大多是这个高度的设置问题。
我的理解：
1.html的100%为页面定高，为后面的百分比子元素定下有效范围，所以当你要全部的元素都用百分比定高时，务必记得把html的100%定下来。
2.父级的高度绝不能不设置（元素内只有嵌套而没有内容，不包括img等）。为什么呢？因为不设置父级元素的高度，height的auto默认为子元素的高度，若无子元素则content高为0；因此父元素高度为0时，子元素便无法显示【指边框背景色等】。

9.如何让元素支持height:100%的效果：
（1）设定显示的高度值：
①html的100%需设；
②层层高度不能有 无内容的默认高为0的值；

（2）使用绝对定位：
①父级高度可不设
②但absolute定位的元素必须设置宽高
③在定位下的宽高百分比是相对于包含了padding在内的父元素而言

10.max-width覆盖width，min-width覆盖max-width

11.在文中代码执行过程中，遇到了一个遗忘的问题，在这里重新放上来说明一下：
JS控制label的内容，先用获取label的id的方式得到对象，再用firstChild.nodeValue来更改label文字内容，似乎只能用getElementById的方法