谈谈我对盒模型的理解,clip解决背景显示范围的问题

div{ width:120px; height:120px; margin:20px 0 0 10px; display:inline-block; background:url(地址); padding:20px;}divdiv{ margin:0; padding:0; background:rgba(0,200,255,.4);}.bg-border-box{ /* background-clip:border-box; */ /*预设值*/}.bg-padding-box{ background-clip:padding-box;}.bg-content-box{ background-clip:content-box;}

content(实际内容)

盒子的内容,显示文本和图像。我们给元素设置的width和height其实是content的宽高,

如果指定高度大于显示内容所需高度,多余的高度会产生类似内边距一样的效果;如果指定高度小于显示内容所需高度,会出现滚动条。如果元素内容的高度大于元素框的高度,浏览器的具体行为取决于overflow属性。

2、类似下面这个图形,只使用一个标签,可以有多少种实现方式:

图片 1

假设我们的单标签为 div:

XHTML

<div></div>

1
<div></div>

定义如下通用 CSS:

CSS

div{ position:relative; width: 180px; height: 180px; }

1
2
3
4
5
div{
    position:relative;
    width: 180px;
    height: 180px;
}

这一题主要考查的是盒子模型 Box Model 与 背景 background 的关系,以及使用 background-clip 改变背景的填充方式。

background 在 Box Model 中,他是布满整个元素的盒子区域的,并不是从 padding 内部开始(也就是说从 border 就开始啦),只不过实线边框(solid)部分遮住了部分 background ,所以我们使用虚线边框(dashed)就可以看到背景色是从 border 内部开始的。

我们给 div 添加如下样式:

CSS

div{ background:#9c27b0; border:20px dashed #2196f3; }

1
2
3
4
div{
    background:#9c27b0;
    border:20px dashed #2196f3;
}

结果如下:
图片 2

但有一点需要注意,background-color 是从元素的边框左上角起到右下角止,而 background-image 却不一样,他是从 padding 边缘的左上角起而到 border 的右下角边缘止。

background image 的绘制中有两个因素决定了绘图区域:

  • background positioning area。background-origin 属性决定了这个相对定位位置,默认为 padding-box。所以默认的背景图片绘制是从 padding box 的左上顶点开始的。
  • background painting area。background-clip 属性决定了绘制区间,默认为 border-box。所以在background-repeat: repeat 的情况下:

The image is repeated in this direction as often as needed to cover the background painting area.

嗯,什么意思呢,你可以戳进这个 demo 看看,正常情况下的背景图填充如下:

图片 3

当然,这个填充规则是可以通过 background-clip 改变的。

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。

语法:

CSS

{ background-clip: border-box; // 背景延伸到边框外沿(但是在边框之下) background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。 background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。 }

1
2
3
4
5
{
    background-clip: border-box;  // 背景延伸到边框外沿(但是在边框之下)
    background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。
    background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}

XHTML

<!-- 填充与background-clip属性有关 --> <!-- 背景色的填充规则,默认为 border-box 从盒子最左上角到最右下角 --> <div class="bgColor"></div> <div class="bgColor contentBox"></div> <div class="bgColor paddingBox"></div> <!-- 背景图的填充规则,默认为 border-box 从盒子的左上角padding到最右下角 --> <div class="bgImg"></div> <div class="bgImg contentBox"></div> <div class="bgImg paddingBox"></div>

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 填充与background-clip属性有关 -->
<!-- 背景色的填充规则,默认为 border-box
            从盒子最左上角到最右下角 -->
<div class="bgColor"></div>
<div class="bgColor contentBox"></div>
<div class="bgColor paddingBox"></div>
 
<!-- 背景图的填充规则,默认为 border-box
            从盒子的左上角padding到最右下角 -->
<div class="bgImg"></div>
<div class="bgImg contentBox"></div>
<div class="bgImg paddingBox"></div>

CSS

div{ width:150px; height:150px; margin:50px 10px;; border:20px dashed rgba(0, 0, 0, 0.5); float:left; padding:10px; // background-size:cover; } .bgColor{ background-color:#ff7300; // background-clip:border-box; } .bgImg{ background-color:#ff7300; background-image:url(''); background-repeat:no-repeat; // background-clip:border-box; } .contentBox{ background-clip:content-box; } .paddingBox{ background-clip:padding-box; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div{
    width:150px;
    height:150px;
    margin:50px 10px;;
    border:20px dashed rgba(0, 0, 0, 0.5);
    float:left;
    padding:10px;
    // background-size:cover;
}
.bgColor{
    background-color:#ff7300;
    // background-clip:border-box;
}
.bgImg{    
    background-color:#ff7300;
    background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg');
    background-repeat:no-repeat;
    // background-clip:border-box;
}
.contentBox{
    background-clip:content-box;
}
.paddingBox{
    background-clip:padding-box;
}

See the Pen CssBackground by Chokcoco (@Chokcoco) on CodePen.

继续说回本题,接下来,只需要将中间部分填充为白色即可,这个用伪元素可以轻松完成,所以,其中一个方法如下:

CSS

div{ background:#9c27b0; border:20px dashed #2196f3; } div::after{ content:""; position:absolute; top:0; left:0; bottom:0; right:0; background:#fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
    background:#9c27b0;
    border:20px dashed #2196f3;
}
div::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:#fff;
}

过去在学习CSS的时候,首要任务就是要理解“box model”,因为box model是CSS里头很重要的模型概念,描述了padding、margin、border与content的空间定位,今天的项目竟然卡在一个简单的小问题,因此就用一篇文章做个纪录提醒自己不要忘记,也避免之后遭遇到又会卡住了。(下图就是CSS的box model)

html任何一个元素都可以看作一个盒子,这个盒子不可见,但是它存在于页面的每个角落,也正是由于它不可见、不直观,很多人在初学CSS的时候不能透彻得理解盒模型的概念,导致在页面布局中出现各种各样的问题。

有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

2016/09/29 · CSS · CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

谈谈一些有趣的CSS题目(1): 左边竖条的实现方法

所有题目汇总在我的 Github 。

今天遇到的问题是出在我用了一个半透明的border,但却无法顺利地透过并显示背景的图案或颜色,后来发现原来box预设的border,其实是在这个box之内的,虽然border在box的内部,但其实与刚刚的box model并没有相违背,因为border包住的空间,仍然是padding与content,只是如果把border变成半透明,就会把原本box的底色给呈现出来。(如下图)

box-sizing:border-box:

     .box{

     background-color: #91D4DA;

     width: 300px;

     height: 300px;

     padding: 20px;

     border: 10px solid #5B5B5B;

     box-sizing: border-box;

     }

图片 4

下面改变padding和border的值

     .box{

     background-color: #91D4DA;

     width: 300px;

     height: 300px;

     padding: 50px;

     border: 20px solid #5B5B5B;

     box-sizing: border-box;

     }

图片 5

发现区别了吧,当你遵循ie盒子模型时,不管你如何设置padding和border(小于width/2),它只在盒子里面伸缩,不影响整体的宽高,这个border-box是不是在某些时候非常好用?但也不能盲目地用,因为它会影响content,如果padding和border太大,会把内容挤掉的。

现在还在用IE6以下的浏览器的用户已经很少了,所以目前浏览器大部分元素都是基于W3C标准盒子模型 上。所以我们平常说的盒子模型一般就是标准

w3c 盒子模型 (但对于input、button元素默认border-box ,还是基于传统的ie 盒子模型

)。一定有人会问,那我们怎样让我们的元素都遵循W3C标准盒子模型呢?哈哈,看看你html的文件头部是不是有一个<!DOCTYPE html> ,有这个,就说明你已经遵循W3C标准盒子模型了。

divdiv/div/divdiv div/div/divdiv div/div/div

padding(内边距)

清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的Background属性影响,padding是有背景的。

CSS:

margin(外边距)

在元素外创建额外的空白,空白通常指不能放其他元素的区域,而且在这个区域中可以看到父元素的背景(padding所带的是本身的背景而非父元素)。margin经常取负值实现定位的作用。

外边距有一个合并问题,经常使人们混淆,简单来说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

div div/div/divdiv div/div/divdiv div/div/div

原文来自:-boxsizing-backgroundclip.html

两种盒子模型

其实盒模型有两种,分别是ie盒子模型(IE6以下版本浏览器)和标准w3c盒子模型,区别在于前者content的宽度和高度包括了border和padding。

margin(外边界)虽不可见,但是它确实在文档中占据了空间,我们要区分两个概念即:盒子所占空间(计入margin )和盒子实际的大小(不计入margin) 。

HTML:

标准w3c盒子模型

盒子所占空间:width=20x2+2x2+10x2+200=264     height=20x2+2x2+10x2 +50=114

盒子实际大小:width=200 +2x2+10x2 =224         height=50+2x2+10x2=74

解释到这里,有的人可能会想起CSS3里面有个叫做box-sizing的属性,咦?两个盒模型不就是它不同取值下的效果吗?那我恭喜你,你说对了~

时间: 2019-05-13阅读: 225标签: 背景

盒子是无处不在的。

CSS:

实例区分两种盒模型

下面举个例子来区分两种盒模型:一个盒子的 margin 为 20px,border 为 2px,padding 为 10px,content 的宽为 200px、高为 50px。

box-sizing

box-sizing和两种盒模型不得不说的事

box-sizing有三个取值:

1、content-box:使元素遵循标准 w3c 盒子模型(默认值)。

2、border-box:使元素遵循ie 盒子模型。

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

那么我可以用box-sizing的不同取值让大家直观地理解两个盒子的区别,也顺带理解这个属性,下面是需要用到的html代码,方便大家看得清楚,我给盒子外面添加一个宽高各500px的灰色背景。

<div class="bg">

     <div class="box"> </div>

</div>

小结

border(边框)

元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成。

以上就是看似无关却又有关的background-clip与box-sizing,相信理解了之后,遇到box的尺寸大小调整,就能够更得心应手了!

ie盒子模型

盒子所占空间:width=20x2+200=240                  height=20x2+50=90

盒子实际大小:width=200                 height=50

background-clip


原文地址:谈谈我对盒模型的理解 

严格说起来background-clip与box-sizing应该是八竿子打不着边,但因为在设计一个box的时候,往往都会border、padding和margin混合使用,也因为这个CSS3的属性,让我刹那间不知道是哪里写错了,结果原来是自己忘了属性该怎么使用。

box-sizing:content-box

.box{

background-color: #91D4DA;

width: 300px;

height: 300px;

padding: 20px;

border: 10px solid #5B5B5B;

box-sizing: content-box;    /*默认值,可以不写*/

}

图片 6

下面改变padding和border的值

.box{

background-color: #91D4DA;

width: 300px;

height: 300px;

padding: 50px;

border: 20px solid #5B5B5B;

box-sizing: content-box; /*默认值,可以不写*/

}

图片 7

大家可以发现,元素盒子的实际宽度是随padding和border改变的。

background-clip共有三个设定值,分别是:border-box(预设值)、padding-box、content-box,很有趣的是,刚刚的box-sizing预设值为content-box,这里的预设值却变成了border-box,下面的三张图,分别代表了这三个设定值的长相,我们可以看到,第一张图在预设值的情形下,边框之下就是原本box的底色(边框是半透明的虚线),第二张图设为padding-box,border下方就不会有box底色,最后一个设定为content-box,就只会出现content区域的背景,border与padding下的背景都会消失,这也是background(背景)clip(剪裁)的意义所在。

盒子模型简介

图片 8

上面是一个盒子模型图,一个盒子包括了content(实际内容)、border(边框)、padding(内边距)和margin(外边距)。

为了让border可以顺利的在外面显示背景的图案或颜色,就需要用到box-sizing与background-clip这两个CSS3的属性来设定,就让我们来分别看看这两个属性该如何使用:

box-sizing有两个值可以设定,分别是:content-box(预设值)与border-box,如果在content-box的情形下,我们设定了box的padding或border,box就会被撑开,因为padding和border是长在box内的,不过如果我们将box-sizing设定为border-box,那么就会一直维持原始的大小,但相对的也就会压缩内部的空间,我自己在设计网页的习惯,都会预先把所有的div设为border-box,如此一来才能更方便去计算大小,也能避免内容的东西加了padding就把外框变大了,然后再根据当下的情况,去决定是否要改为content-box。

div{ width:120px; height:120px; margin:20px 0 0 10px; padding:20px; display:inline-block; background:url(地址);}divdiv{ background:rgba(0,200,255,.4); margin:0; padding:0;}.box{ border:10px dotted rgba(255,0,0,.5);}.default{ /*box-sizing:content-box;*/ /*预设值*/}.border-box{ box-sizing:border-box;}

HTML:

下面的示例是用三个示例来对照参考,半透明的蓝色方块是原始的大小,第一张图设定了padding:20px;,第二张图除了padding:20px之外,还有设定了border:10px dotted rgba(255,0,0,.5);,第三张图则是与第二张图同样的设定,但box-sizing设为border-box,经由对照,就可以很明显的发现彼此的差异。

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:谈谈我对盒模型的理解,clip解决背景显示范围的问题

相关阅读