从一个例子中看包裹性和水平对齐的两种方式
《css世界》一书中有这么一个例子，（主要考察对包裹性的理解。）
包裹性：（自适应性）指元素的尺寸只由内部元素决定，但是永远小于包含块容器的尺寸
需求：页面中某个模块的文字内容是动态的，可能是几个字，也可能是一句话，希望当字数少的时候居中显示，字数超过 一行的时候居左显示，问该如何实现。
在这里就要知道text-align的作用条件，如图所示：实现需求的代码及其结构已经画出来，此时需要两个div盒子， 根据总结：【text-align是一个写在父级元素css中对子元素的文本或内联对象（或者类内联元素）水平对齐方式有改变的属性】。最外边的box使用text-align属性，是作用于子元素content，但是由于content是一个块级别元素，所以必须使用display:inline-block,来改变content的外在表现。使其变成一个披着inline皮的块元素。同时对content使用text-align：left让里面的文本进行居左显示，但是由于文本外部的content盒子是具有包裹性的（即其大小尺寸是由内部元素决定的，即为张老师所说的内部尺寸），所以content的大小会一直和内部的文本大小所同步，当content内部中的文字不足一行时外部的box的center会让这个inline-block的content盒子进行居中显示，当文本内容已经超出了一行的时候，box的center已经对content无法产生影响了。所以此时就会居左显示。如图：
在这里面引申出一个知识点：
第一：
水平居中显示的两种方式：(这两种方法在前边已经分享了微博，我再将个人的理解总结一下)
1） text-align:center； text-align属性是一个写在父级元素中对子元素内的文本或者内联对象（类内联对象）水平对齐方式有作用的属性。
2） margin:0 auto; margin是一个只对块元素有作用的，写在哪里就作用在哪的一个属性。