12.9学习日报（盒子模型和各类注意事项、margin垂直外边距合并、顶部塌陷问题）

CSS

1. 宽度：width

2. 高度：height

让盒子里的元素垂直居中:

div{
	height: 40px;
	line-height: 40px;
}

边框：border

边框样式

属性	样式	属性值
border-width	边框大小	（像素：px）（倍数：em）
border-color	边框颜色	（16进制RGB值：#aabbcc）（rgba函数：rgba(红，绿，蓝，透明度)）（名称：red）
border-radius	圆角边框	（像素：px）（百分比：%）
border-style	边框样式	（默认,实线：solid）（虚线：dashed）（点线：dotted）（双线：double）
border-collapse	合并边框	（默认,分开：separated）（合并：collapse）
-	单独选择一边	（上：border-top）（右：border-right）（下：border-bottom）（左：border-left）
border	复合样式	基本写法：(大小，样式，颜色)

内边距：padding

属性值：

属性值	作用
auto	效果：自动设置
px	像素，不能设置负数

行内效果不规范

行内效果如span，设置padding虽然显示的内边距没问题，但是内容会往下偏



子元素设置padding，父级盒子不发生变化

外边距：margin

属性值

属性值	作用
auto	（效果：自动设置）让盒子在浏览器居中，就给左外边距和右外边距设置auto
px	像素，不能设置负数

垂直外边距和水平外边距区别

两个盒子在同一水平上，给左边的盒子设置右外边距，给右边的盒子设置左外边距，它们的外边距不会合并，都会存在.

两个盒子在同一垂直上，给上面的盒子设置底外边距，给下面的盒子设置顶外边距，它们的外边距会合并，取最长.

顶部塌陷：子级设置顶部会让父级一起移动，解决办法：给父级设置文字、边框或内边距