老师 请问我的图总结的有哪些需要改进的地方吗 谢谢老师 老师辛苦！

盒模型

• 定义：所有html标签都可以看作矩形盒子 由width height padding border构成 成为“盒模型”

• 计算

  • 盒子的总宽度=width+左右padding+左右border

  • 总高度=height+上下padding+上下border

• width

  • 定义：表示盒子内容的宽度

  • 单位：px 涉及百分数 rem等

  • 属性：当块级元素没有设置width属性时 将自动撑满

• height

  • 定义：盒子内容的高度

  • 单位：类似width

  • 属性 如果不设置 也会被撑开 如果没有内容 height默认为0

• padding

  • 定义：盒子的内边距 即盒子边框内壁到文字的距离

  • 方向

    • 1 top 2 right 3 bottom 4 left

  • 写法

    • 1 四数值

      • padding: 10px 20px 30px 40px;

      • 顺时针：上 右 下 左

    • 2 三属性

      • padding: 10px 20px 30px;

      • 顺时针：上 右 下 （左没有 和右一样）

    • 3 二数值

      • padding: 10px 20px;

      • 顺时针 上 右 （下没有 和上一样）

    • 4 一属性

      • 上下左右全一样

• margin

  • 定义：盒子的外边距 即盒子与其他盒子之间的距离

  • 方向：top right bottom left

  • 写法：与padding相同

  • 塌陷

    • 1 竖直方向：小的margin会塌陷到大的margin中 从而margin不叠加 只以大值为准

    • 2 子元素被父元素包裹时：子元素margin-top 父子元素会一起往下

      • 1 从子元素的margin-top换成父元素padding-top

        • 注意：父元素的height需要变小

      • 2 给父元素设置 overflow: hidden;

        • 注意：overflow:hidden; 意思是"超出隐藏" 如果子元素超出父元素的话 不建议使用该属性

  • 作用

    • 清除：一些元素有默认的margin 在开始制作网页的时候 要将他们清除

    • 1 * { margin: 0; padding: 0; }

    • 2 body, ul, p { margin: 0; padding: 0; }

  • 水平居中

    • 写法：将盒子左右两边的margin设置为auto .box{ margin: 0 auto;}

    • 文本居中是text-align: center 和盒子水平居中是两个概念

• box-sizing

  • 应用：大量应用于移动网页制作中

  • box-sizing: border-box; 盒子从外扩变成内缩

• display

  • 行内元素

    • 性质：能并排 不能设置宽高 width自动收缩 

    • 举例: a span 等

  • 块级元素

    • 性质：不能并排 能设置宽高 width自动撑满 

    • 举例：div section header h li ul等

  • 行内块

    • 性质：既能设置宽高 也能并排显示

    • 举例：img和表单元素

  • 相互转化

    • 转为块级元素 display: block ;

    • 转为行内元素 display : inline ;

    • 转为行内块 display : inline-block