§ ITPOW >> 文档 >> CSS

有趣的 CSS 3-大小调整、box-sizing、新边框

作者:vkvi 来源:ITPOW(原创) 日期:2016-11-12

大小调整(resize)

<style type="text/css">
div
{
    width:200px;
    height:200px;
    overflow:auto;
    background:#ff0;
    resize:both;
}
</style>

<div></div>

在 Chrome 中可以看到右下角(微软原 Edge 中无效,新 Edge 有效),有一个可拖动大小的标志,注意除了 resize,还要有 overflow、background(或 border),不然不生效。

resize 的可选值有:none、both、horizontal、vertical。

box-sizing

如果很早就接触 CSS,那么一定还记得,当时流行 IE,流行 width 值包含边框值。而这个 box-sizing 就是针对这个的。

  • content-box:宽度和高度分别应用到元素的内容框。

  • border-box:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  • inherit:规定应从父元素继承 box-sizing 属性的值。

outline、outline-offset

<style type="text/css">
div
{
    width:100px;
    height:100px;
    border:1px solid #f00;
    outline:1px solid #00f;
    outline-offset:2px;
}
</style>

<div></div>

效果如下:

outset 效果

border 之外还可以指定一个“边框”。

相关阅读

相关文章