美文网首页
css布局知识总结-- 宽度 高度默认值,百分比参考对象

css布局知识总结-- 宽度 高度默认值,百分比参考对象

作者: 前端人 | 来源:发表于2019-07-29 21:58 被阅读0次

读完本文,你要明白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会失效

欢迎评论交流 这些知识点是当你有问题 有意识后才能总结出来

提出问题 然后才能获得知识-----请call me 优秀的boy

相关文章

网友评论

      本文标题:css布局知识总结-- 宽度 高度默认值,百分比参考对象

      本文链接:https://www.haomeiwen.com/subject/chairctx.html