读完本文,你要明白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会失效
欢迎评论交流 这些知识点是当你有问题 有意识后才能总结出来
网友评论