2020年4月8日作业--框模型基础知识

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
• 纵向外边距会出现折叠现象，谁的值大就解析谁的值