《精通CSS与HTML设计模式》读书笔记3——盒模型位置

width
1. auto: a) 没有设置left, right, 实现水平包裹
         b) 设置left, right, 实现水平拉伸
2. value: 用具体的值做为元素的尺寸. 当可视画面比预想的大或小的时候, 固定宽度的元素可能对用户就不那么友好了.
3. auto: 设置成其父元素的宽度.
height
1. auto: a) 没有设置top, bottom, 实现垂直包裹
         b) 设置left, right, 实现水平拉伸
2. value: 用具体的值做为元素的尺寸. 当可视画面比预想的大或小的时候, 固定高度的元素可能对用户就不那么友好了.
3. auto: 设置成其父元素的宽度.
设定尺寸
height和width是针对内边距.
1. 表格: 是个例外, 表格是外边距.
2. 浮动元素：影响文档流
3. 静态状态元素：影响文档流
4. 绝对定位元素: 不影响文档流, 宽度与高度的百分比是相对父元素的.
包裹
1. 被包裹的元素需要把width和height设置成auto.
2. 不能水平包裹静态状块元素.
拉伸
以水平拉伸为例:
1. width:auto把块状元素的宽度拉到与其父元素相同
2. width:auto, left:0, right:0把绝对定位元素的左右两边拉至与其定位最近的父元素对齐.
3. 用width:100%能对表格, 浮动元素或者内联块状元素进行拉伸. 注意不能有外边距(就是margin), 否则会出现溢出父元素的现象.
4. 可应用于内联元素之外的所有元素.