读完本文，你要明白3个知识点，否则等于白看
1.宽高的默认值是auto 那到底怎么个自动法。
2.width height left top bottom right 百分比值时参考对象是谁
3.float时的一些问题 如left top是否有效，高度塌陷如何解决
重点知识
第一个问题的答案
1.子元素为block，父元素 水平布局时，高度自动充满整个父元素高度，宽度由自己包含的内容决定；
2.子元素为block，垂直布局时，宽度自动充满整个父元素的宽度，高度由自己包含的内容决定。
3.子元素为inline-*的时候 宽高 默认由自己的内容确定。
4.父元素为block或inline-block 或inline 他的子元素是都是垂直布局；父元素display：flex时 flex-direction为column 也是垂直布局。只有flex-direction为row才是水平布局，其他情况的研究等各位仁兄告诉我
第二个问题的答案
1.相对于父级宽度（static、relative的元素计算时不包含父级padding,absolute、fixed的元素会加上父级的padding）的：max-width、min-width、width、left、right、text-indent、padding、margin、grid-template-columns、grid-auto-columns、column-gap 等；
2.相对于父级高度（同上）的：max-height、min-height、height、top、bottom、grid-template-rows、grid-auto-rows、row-gap 等；
3.相对于自身宽高的：border-radius、background-size、border-image-width、transform: translate()、transform-origin、zoom、clip-path 等；
4.static、relative的父级即为 实际 父级元素如果自身设置 position: absolute，“父级”指：相对于离它最近的那个 position 不为 static （relative、absolute、fixed）的祖先元素，如果没有这样的元素，则相对于视口
5.如果自身设置 position: fixed，“父级”指视口（父级不存在 transform 为非 none 值的情况下）。
第三个问题答案
1.子元素float， 父为 block时不占据文档流位置， left top无效 width默认有内容决定；
2.父亲为flex时 浮动无效
3.高度塌陷 浮动去除的办法 触发父元素的BFC特性 1.overflow不为visible 2.float 为left或right 3.display 为flex 或 inline-block等 4.positon为absulte或fixed
另外送第四个知识点
1.relative 相对定位时 left right 只能设置其中一个有效，top bottom只能设置其中一个有效
2.绝对定位时 不设置宽度 高度 left right top bottom 可以决定宽高 如果设置了宽高 宽高会有效 而且right 和bottom会失效
欢迎评论交流 这些知识点是当你有问题 有意识后才能总结出来
