那些有意思的css片段（持续更新）

1:三角形

<div class="funny"></div>
    <style>
        .funny {
          width: 0;
          height: 0;
          border-style: soild;
          border-width: 30px 30px 0;
          border-color: red;
          border-left-color: transparent;
          border-right-color: transparent;
        }
    </style>

以上代码有助理解，可简写为以下形式：

        border-top: 30px solid red;
        border-right:30px solid transparent;
        border-bottom: 0px solid transparent;
        border-left: 30px solid transparent;

首先宽高你可以理解成我们画三角形的顶点,就是在中心,也就是宽高为0但是有边框宽度(这里是30px)的时候的中点对不对.

其次,对于块级元素,想设置有颜色的边框就必须设置这个边框风格+必须设置这个边框风格+必须设置这个边框风格,至于为什么,你可以看好h1元素默认的边框样式是none,所以不写style你想让h1大哥有边框?never!\ 且solid是白底色的意思嘛?不是!是实线,风格就是实线风格!

最后就可以设置边框宽度了,首先是上边框!30px,然后是左右边框,30px! 下为0,很显然再加上颜色的话就会使一个倒三角形:↓

忘了说为什么要把左右的color设置成transparent↓

CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框

2:那些没怎么用过的块级元素是不是所有都是display:block?--no!： li:默认list-item;table: 默认table

3:zxx说过，宽度分离是为了迎合设计师宽度更改，导致了需要重新计算padding和border的场景设计的，like this：

.f {
width: 122px;
}
.s {
padding: 20px;
border: 1px solid;
}

4:由于textarea很特殊，即使用display: block也不能填充至父级100%，所以要用width：100%，加上通常需要用padding和border美化，所以最终效果应该是：

input, textarea, img, video, object {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ps:替换元素都有这个规律，border-box配合width:100%会省去烦人的padding,width,border的手动计算

5：设置了max-width权重比width的！important都高

就像一个卷尺一样，给它设置了max-width:3m就是3米处切了一刀，随后使用之测量时，去量一个5m高的东西，你觉得会量的出来吗?

6:video,canvas，iframe等替换元素，默认都是300px宽*150px高，唯独img在各个厂商的默认不一致，chrome是0*0，ie有个小叉叉

懒加载css:

img{visibility: hidden;}
img[src]{visibility: visible;}

但在firefox里img并不可以设置width和height等提前占位，就像是span不能设置宽高一样，所以需要css_reset:

img{display:inline-block}

由于img是替换元素，当无src时，默认是普通元素，所以可以基于伪类实现img的提前加载描述：

img::after{
content: attr(alt);
position: absolute;
bottom: 0;
width: 100%;
}

7:头图等比例而不是写死高度办法:父级padding+relative，子width100%+absolute：

.f {padding: 10%;position: relative;}
.s {position: absolute;width: 100%;left: 0}

但这个f是相对f的父元素的宽度的10%

8：内置padding在radio是无，button需要针对火狐reset下：

button{padding: 0;}
button::-moz-focus-inner {padding: 0}

9: animation-fill-mode: forwards

可以用于动画在最后一帧的保留

10：mark标签听说过没？就是你在网页ctrl+f的东西的背景色啦：

<p>Do not forget to buy <mark>milk</mark> today.</p>

菜鸟测试mark

这标签很常规，除了IE8以及以下，别的浏览器全兼容

想要支持只能js的createElement('mark')+css_reset--

(document.all && !document.addEventListener) && document.createElement('mark');

mark {
  background: #fffdd1;
  border-bottom: 1px solid #ffedce;
  padding: 2px;
  margin: 0 5px;
}

那些有意思的css片段（持续更新）

猜你喜欢