前端学习Day8

Day8：P59-P73
学习笔记：
1.盒子模型-内边距
    作用：设置内容与盒子边缘之间的距离
    属性名：padding/padding-方位名词
    padding的多值写法：两值，三值，四值
2.盒子模型-尺寸计算
    盒子尺寸=内容尺寸+border尺寸+内边距尺寸
    结论：给盒子加border/padding会撑大盒子
    解决：
        手动做减法：减掉border/padding的尺寸
        内减模式：box-sizing：border-box
3.盒子模型-外边距
    作用：拉开两个盒子之间的距离
    属性名：margin
    提示：与padding属性值写法完全一样
4.清除标签默认的样式： * { margin: 0; padding: 0;}
5.元素溢出overflow：auto/scroll/hidden
6.外边距问题-合并现象：
    1.场景：垂直排列的兄弟元素，上下margin会合并
    2.现象：取两个margin中的较大值生效
7.外边距问题-塌陷问题：
    1.场景：父子级的标签，子级的添加上外边距会产生塌陷问题
    2.现象：导致父级一起向下移动
    解决方案：1.取消子级margin，父级设置padding
                 2.父级设置overflow：hidden
                 3.父级设置border-top
8.行内元素-内外边距问题
    场景：行内元素添加margin和padding，无法改变元素的垂直位置
    解决方法：给行内元素添加line-height可以改变垂直位置
9.盒子模型-圆角
    作用：设置元素的外边框为圆角
    属性名：border-radius
    属性值：数字+px/百分比
10.盒子模型-阴影（拓展）
    作用：给元素设置阴影效果
    属性名：box-shadow
    属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
    注意：x，y必须书写，默认是外阴影，内阴影需要添加inset
11.CSS第4天学习内容：标准流，浮动，flex布局（浮动了解）
12.标准流：标准流也叫文档流，指的是标签在页面中默认的排布规则
13.浮动：float：left/right