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

盒子模型

盒子模型是指：外边距（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的中心部分


















，效果图如下：