05 2022 档案
摘要：CSS - 垂直对齐问题 场景：解决行内/行内块元素垂直对齐的问题 问题：当图片和文字在一行显示时，其实底部不是对齐的，且只有行内/行内块元素才会存在这样的问题 仔细观察可以发现，文字和图片在底部并没有对齐 垂直对齐方式 属性名：vertical-align 属性值： baseline：默认，基线对
阅读全文
摘要：CSS - 元素层级问题 不同布局方式元素的层级关系： 标准流 < 浮动 < 定位 不同定位之间的层级关系： 相对、绝对、固定的层级相同 此时HTML中写在下面的元素会覆盖上面的元素 例： 表现出来就是： 可以看到，此时green浮动后覆盖了blue，表示浮动后元素层级 > 标准流 然后，给blue
阅读全文
摘要：CSS - 清除浮动的方法 浮动带来的影响： 如果子元素浮动了，子元素就不能撑开标准流的块级父元素 原因： - 子元素浮动后会脱离标准流，子元素此时不再占用位置，若此时父元素未设置高度，表现为父元素高度为0 清除浮动的方法： 1.额外标签法：在父元素最后添加一个块级元素，给该元素设置clear:
阅读全文
摘要：CSS-margin的折叠现象：合并和塌陷 一、合并现象，也可成为兄弟元素的外边距合并 现象描述： 垂直布局的块级元素，它们的垂直方向的margin会合并，最后两者的距离为margin的较大值 p { width: 100px; height: 100px; } .pink { background
阅读全文
摘要：问题出现： .box { width: 500px; height: 400px; border: 1px solid #ccc; /* background: pink; */ margin: 100px auto; padding: 42px 30px 0; } .box h2 { height
阅读全文
摘要：可以看到，当设置a标签为display:inline-block时，即使清除了所有的默认padding和margin，仍然会有一定的空隙存在。 这些空隙可以理解成空格。 这种现象的解释： 行内元素或行内块元素类似于文字，文字即存在空格合并现象： 当代码中同时出现了多个空格（换行），浏览器会将它们解析
阅读全文
