学习前端第六天

盒子的组成（内容content 边框border 内边距padding 外边距margin）

border-width(边框粗细) border-style(solid实线 dashed虚线 dotted点线) border-color(边框颜色)

连写形式：border：1px solid red

盒子里定义width，height，是定义盒子的大小，加边框外边距内边距会撑大盒子

（内边距）padding：10px（上下左右）10px 20px(上下10xp 左右20px) 10px 20px 30px (上10xp 左右20px 下30px) 10px 20px 30px 40px (上右下左)

padding-lift

box-sizing: border-box (使外边距内边距边框)

margin-top(当前盒子往下移) margin-buttom(下面的盒子往下移) margin-left(盒子往右移) margin-right（让右边的盒子往右移）

清除内外边距*{ margin: 0; padding: 0;}

垂直布局的块级元素，上下的margin会合并 避免就好 只给其中一个盒子设置margin即可

 

塌陷现象：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素margin-top）

给父元素设置overflow：hidden

转换成行内块元素

设置浮动

行内元素的margin和padding无效情况

给行内元素设置margin和padding时（水平方向的margin和padding布局中有效！ 垂直方向的margin和padding布局中无效）