CSS：宽度与百分⽐的简单总结
宽度的定义
宽度width(与⾼度height)是在⽹页布局中经常⽤到的属性，但作为新⼿容易会对两者的定义产⽣误解。下⾯我们给出width与height的准确定义：
⼀般地，⼀个元素的width被定义为从左内边界到右内边界的距离，height则是从上内边界到下内边界的距离。
上述定义很清晰地指出，元素的width只是元素content内容区的宽度，不包括padding,border, 与margin，即元素的width并不表⽰元素的可视宽度。
使⽤a uto与text-a lign:c enter的区别
auto与text-align:center都是在局中排版中常会⽤到的属性设置，他们很容易被混⽤，下⾯我们给出两者的准确定义：如果设置width、margin-left或margin-right中的某个值为auto，⽽余下两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从⽽使元素框的宽度等于⽗元素的width。margin属性值可以为百分比
⽽text-align:center只⽤于居中块级元素中的内联内容。
因此，当我们想让⼀个块级元素在另⼀个块级元素中居中时(⽐如p在某个div中)，text-align:center是⽆效的，⽽可以通过设置width:auto或
者margin:auto实现⾃动局中效果。
百分⽐
百分⽐是实现页⾯⾃适应的重要途径，⽽元素百分⽐的宿主到底是谁⼀直是令⼈困扰的问题。其实CSS对于百分⽐的定义⼗分明确：
所有元素的百分⽐都是相对于其包含块( containing block)的width。
在盒模型的设置属性中，除了height的百分⽐是相对于包含块的height，其余的width、margin(不管是横向的margin-left还是纵向的margin-right)、padding(同上)都是相对于包含块的width。
⾄此我们发现，包含块( containing block)的确切定义就显得尤为重要。有时间的情况下会在这篇中进⾏进⼀步的补充或新开⼀篇进⾏介绍。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。