CSS世界(1)

流、元素与基本尺寸

块级元素

块级元素分为块级和行内块级，块级比如div,p，行内块级为display:inline-block

width/height作用细节

width:auto

(1)充分利用可用空间。比方说，div,p等元素的宽度是100%默认于父元素的
(2)收缩与包裹。典型代表就是浮动、绝对定位、inline-block或table元素，其默认宽度由内部子元素决定
(3)收缩到最小。
(4)超出容器限制。
1、父容器设置了宽度，子容器为width:auto，且子元素内容文本为英文或数字，如果是汉字，则会换行，若子元素内容超出父元素宽度，则子元素文本会溢出。
2、父元素设置white-space:nowrap,若子元素内容超出父元素宽度，则子元素文本会溢出。

流动性

元素的尺寸由外部尺寸决定
(1)文档流
对于block元素，在水平流方向，如果width为auto,则元素具有流动性，margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素width。
(2)脱离文档流
对于position值为absolute或者fixed的元素，当同时设置left/right或者top/bottom对立属性时，元素呈现流体性，为left+width+right=祖先元素width或者top+height+bottom=祖先元素height。

     <div class="father">
         <div class="son">son</div>
     </div>

         .father{
             position: relative;
             width: 200px;
             height:200px;
             background-color: yellow;
         }
         .son{
             position: absolute;
             left:50px;
             right:50px;
             background-color: blue;
         }

     <div class="father">
         <div class="son">son</div>
     </div>

         .father{
             position: relative;
             width: 200px;
             height:200px;
             background-color: yellow;
         }
         .son{
             position: fixed;
             left:50px;
             right:50px;
             background-color: blue;
         }

reative的包含块为position不为stastic的元素，即father元素，fixed的包含块为根元素html所以宽度不同。

包裹性

元素的尺寸由内部决定
对于inline-block元素，其宽度由其内部决定，并且在内容是正常文本的情况下，它的宽度不会超过他的容器

width值作用的细节

因为大部分元素的box-sizing值默认都是content-box(除了absolute元素的包含块为祖先元素的padding-box),所以width的值是作用在content-box上，对于块级元素，margin,border和padding的默认值都是0。