auto设置练习
http://211.149.185.34:90/0408.html
框模型基础知识学习总结
1.元素框与框模型属性
1.1 元素框的 4 个组成部分
- 内容区 content 必需有的部分
- 内边距 padding 选填
- 边框 border 选填
- 外边距 margin 选填
- padding、border、margin 的每一条边都可以单独设置属性，如宽度、颜色等
- padding、margin 背景是透明的，只能设置宽度，不能设置颜色与样式
1.2 属性的设置顺序
- 属性设置顺序是顺时针，即上、右、下、左
- 属性后缀名为-top、-right、-bottom、-left
- padding 的 4 边设置：padding-top、padding-right、padding-bottom、padding-left
- margin 同 padding 一样设置
- 属性的简写顺序：
（1）写 4 个值的设置方法，如 padding:top right bottom left,各个方向的值中间用 1 个空格隔开
（2）写 3 个值的设置方法：如 padding:top right/left bottom,第 2 个值代表左右
（3）写 2 个值的设置方法：如 padding:top/bottom right/left
- border 边框设置较特殊，除可设置宽度外，还可设置颜色和样式
（1）border 在 4 个方向上的设置后缀名同 padding，都是-top、-right、-bottom、-left
（2）在后缀名后再加上样式属性，如设置上边框的宽度：border-top-width:5px;
（3）border 的样式属性有 width、style、color;
（4）在 border 简写中同时设置 3 个样式属性，如设置边框宽度为 5px、实线、颜色为黑色：border:5px solid #000
（5）border 简写时是同时设置 4 个边的样式，即 4 个边的样式是一样的
（4）也可以省略边框颜色，省略后默认与内容的前景色一样
1.3 需要注意的点
- 轮廓 ourline: 位于 border 与 margin 之间,不占空间可忽略
- 轮廓没有针对各条边的属性,只可统一设置
- 默认,内容区的背景色会延伸到内边距范围内,内边距是透明的
- 外边距始终是透明的,可能透过它看到父元素
- 内边距,边框不允许是负值, 而外边距允许
- 内边距影响到盒子大小, 而外边距影响到盒子的位置
- 边框颜色默认与内容区前景色相同,例如文本是黑色, 边框就是黑色
- 如果边框是虚线,是可以透过边框线的间隙看到内容区元素的背景色
2.调整元素框的大小
2.1 display 属性
- display 属性默认值是 inline，适用于所有元素，不能继承
- dispaly 仅改变显示方式，不改变元素的本质
- 例如，块级元素不允许作为行内元素的后代，并不会因为它的显示为行内块而改变
2.2 块级框宽度设置
- 块级框宽度默认的是内容区宽度（content-box），即为左内边界到右内边界的距离
- 块级框宽度可以用 box-sizing 进行调整,设置为 border-box 即为左边框到右边框的距离，宽度包含 padding 和 border 的值
2.3 横向格式化
- 横向的 7 个属性,从左到右分别为：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
- margin 的左右宽度可设置为 auto，由浏览器自动计算
- 内容区宽度 width 也可设置为 auto，由浏览器根据内容自动计算
- padding 和 border 默认为 0，仅可设置具体值，不支持设置 auto
2.4 纵向格式化
- 纵向的 7 个属性，从上到下分别为：margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom
- 与横向相同，仅有 margin 和 height 可以设置 auto，但 margin 设置为 auto 会被强制解析为 0
- 纵向外边距会出现折叠现象，谁的值大就解析谁的值
