box-sizing:border-box的理解和作用

Posted 2023-04-02 The..Fuir

盒子模型

盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）

可以把每一个容器，比如div，都看做是一个盒子模型

比如你给一个div设置宽高为500px，但实际你设置的只是content，之后你又设置了padding:10px;border:1px solid red;

这时div的宽高就会变为544px（content 500px + padding 40px + border 4px）

相当于一个元素的实际宽高是由：　padding + border + content 组成

1、没有设置box-sizing:border-box属性，宽高会加上padding和border的值，需要我们手动去计算，减去padding和border的值，并调整content的值，以免超过给定的宽高

比如下图，我给父元素parent设置宽高为500px，背景色为黑色；然后给子元素设置宽高为478px，并设置内边距10px,红色边框1px，背景颜色为灰色

此时子元素的宽高为500px（content 478px + padding 40px + border 4px）所以就覆盖了父元素的黑色背景，只能看到子元素的灰色背景

2、加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里

盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整

标准盒子模型，一般浏览器也都默认为标准盒子模型。即：box-sizing:content-box

怪异盒子模型，一般根据实际项目需要自行设置。即：box-sizing:border-box

CSS中代码background:url(图片) no-repeat right center的意思

最近在模仿一个网页的时候，发现CSS代码里有一行代码：background:url(图片) no-repeat right center不明白是什么意思，百度以后学习到了，在此记载知识点；

这一行代码其实是背景图定义形式的简写
完整形式是：

background-image:url(图片);
background-repeat:no-repeat;
background-position:right center

right center是设置图片的初始位置，right是在水平方向上贴容器或浏览器页面的右侧，center是在垂直方向上居中，这两个的顺序是先定义水平位置，再定义垂直位置

另外一个例子：

 background:url(../images/top_ico.png) no-repeat right 14px;

意思是背景图片不重复，在水平方向靠近容器的右侧，在垂直方向距离容器上方14px;

首先代码是：   #ban margin:auto; width:500px; height:500px;border:2px dotted black;background:url(../image/hover_right.png); 在不写repeat与no-repeat的情况下，默认的是平铺。repeat平铺的效果，就是一张图，可以铺满整个屏幕。效果图如下

 

然后我在#ban margin:auto; width:500px; height:500px;border:2px dotted black; background:url(../image/hover_right.png)  no-repeat; /*不平铺*/ no-repeat是不平铺，

效果图如下：

 center这个值，大家基本上很少去用到，往往也会忽略掉这个center的利用价值。其次我再加一个属性：background:url(../image/hover_right.png) no-repeat  center;它就会居中与div的中心部分，效果图如下：

 

box-sizing: border-box;的作用

box-sizing 属性可以被用来调整这些表现:

content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

 

 

border-box  width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。 
这里的维度计算为： width = border + padding + 内容的  width， height = border + padding + 内容的 height。