本文用来记录一些在实践中使用的W3C规范,包括易混淆的、不符合常理的点。

[CSS]margin和padding的父容器依赖

注意:水平布局下不管是margin还是padding,依赖的都是父容器的width。垂直布局依赖height.

https://drafts.csswg.org/css-box/#flows

Name:padding
Percentages:width* of containing block
Name:margin
Percentages:width* of containing block

if the containing block is horizontal,* otherwise the height

Note that in a horizontal flow, percentages on margin-top and margin-bottom are relative to the width of the containing block, not the height (and in vertical flow, margin-left and margin-right are relative to the height, not the width).

纯CSS实现方形布局

使用margin/padding-top:100%实现方形布局,可以实现正方形(固定比例)的容器,而无需设置子元素高度。下面的示例展示了图片内容为正方形,不依赖原图比例。也避免了图片未加载时高度塌陷的问题。

适用场景: 封面图。

  • html
<div class="hovereffect"><img src='1.png'></div>
  • css
.hovereffect {
width: 200px;
overflow: hidden;
position: relative;
text-align: center;
}
.hovereffect:before {
content: "";
display: block;
padding-top: 100%;
}
img {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
  • 效果

正方形图片,不依赖图片高

优点:灵活运用此属性,不依赖js和子元素固定高度。

未完待续…

[HTML]把浮动的元素写在前面

如果一个div中既有float元素,又有非float元素,应该把float元素写在非float元素前面。

<nav class="home-menu">
<ul class="float-r clearfix">
...float元素在前
</ul>
<a class="no-float" href="/">
...非float元素在后
</a>
</nav>

因为浏览器从前向后解析html,非float元素占用了文档流。在解析到float元素时,浏览器会监测文档流,当浏览器认为一行剩余空间容纳不下float元素,此时会另起一行。所以如果不这么写,float元素有可能被浏览器换行。把float写在最前面,float元素不占用文档流,所以每次都在第一行分配float元素。