Web网页开发-盒模型-笔记

1.CSS的三种显示方式
(1)块级元素:标签所占区域默认为一行
特点：一行一个 ?可设宽高
(2)行内元素：标签所占区域由内容顶开，行内元素无法使用text-align
特点：一行多个 不可设宽高，margin上下和padding上下都不能改变位置，但是上下内边距可以撑开盒子大小
(3)行内块元素：既有行内元素特点，又有块级元素特点[img、input、td]
特点：一行多个 可设宽高
注意：当元素转成行内块之后，用vertical-align改变行内元素的对齐方式

2.块级元素、行内元素、行内块元素之间的转换
display：block-块级元素
display：inline-行内元素
display：inline-block-行内块元素
3.边框合并：border-collapse：collapse
4.盒模型
外边距：[盒子与盒子之间的距离] margin
内边距：[盒子与内容之间的距离] paading
把标准盒子转换成怪异盒子
box-sizing：border-box
盒子包括：内容、内边距、边框、外边距
内边距padding：
| 1个值 | padding：上下左右内边距
| 2个值 | padding:? ?上下内边距 ? ?左右内边距?
| 3个值 | padding：上内边距 ? 左右内边距 ? 下内边距
| 4个值 | padding:? ?上内边距 右内边距 下内边距 左内边距?
内边框还可以指定具体方向的内边距
标准盒：盒子的大小会随着边框和内边距变化而变化
? ? ? ? ? ? ? 盒子大小=内容+内边距+边框+外边距
? ? ? ? ? ? ? 内容大小=width和heght
怪异盒：盒子的大小不会随着边框和内边距变化而变化
? ? ? ? ? ? ? 盒子大小=width和weight
5.嵌套盒子外边距合并问题：
父盒子没有边框，并且子盒子设置了外边距，此时，子盒子的外边距会穿透父盒子，带着父盒子一起移动
解决方案：
? ? ? ? ? ? ? 1.给父盒子设置边框
? ? ? ? ? ? ? 2.给父盒子设置内边框
? ? ? ? ? ? ? 3.给父盒子设置overflow:hidden,让父盒子中的距离无法穿透，无法溢出
6.兄弟盒子外边距合并问题：
当上盒子设置下外边距，下盒子设置上外边距，之间的距离为其中的最大值