在div中设置背景色：当border宽度很大时就要考虑一个问题，那就是背景的作用范围，是包括边框呢？还是不包括呢？很明显，又到浏览器产生分歧的时候了。

在IE中背景色的作用范围为：content+padding。而谷歌，火狐为content+padding+border。很明显，IE中的背景色范围是“局限”在边框内的，而谷歌，火狐则包括边框。

如代码：

<html>

<head>

  <title></title>

<style>

div{

width: 200px;

height: 200px;

background: red;

border:10px dashed blue;

}

</style>

</head>

<body>

 <div></div>

</body>

</html>

效果图示：IE中

Chrome，Firefox中

CSS中background背景色的作用范围的更多相关文章

  1. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  2. CSS中background的用法

    CSS中  background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...

  3. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  4. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  5. css中的背景色渐变以及背景图的定位

    单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd) ...

  6. CSS中background样式的repeat和no-repeat

    自http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html获取的知识,特此感谢. <!DOCTYPE html> <html lang ...

  7. css中background背景属性概述

    background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

  8. css中background和 background-color 同时使用的优先级

    给背景图片设置一个默认背景颜色,有以下两种方法: <style> .bg1{ background:url(http://debug.itxst.com/img/logo.png) red ...

  9. css中background合写样式

    body { background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; } 等价于 body ...

随机推荐

  1. 使用 Windows10 自定义交互消息通知

    消息通知是最常用的应用功能之一了,但是由于平台的差异,IOS Android 以及 Windows 都有其特殊性,Android开发者在国内常常都是使用三方的一些推送服务,或者是使用自建的服务器为应用 ...

  2. POJ 2096 Collecting Bugs

    Collecting Bugs Time Limit: 10000MS   Memory Limit: 64000K Total Submissions: 1716   Accepted: 783 C ...

  3. [原]Android打包之Gradle打包

    最近尝试了一下Android的Gradle打包,发现确实比Ant打包会方便很多,特此记录下来. 注:android的gradle现在插件的版本已经是0.14.3了,对于一些老的方法和api,有一些已经 ...

  4. 九度OJ 1502 最大值最小化(JAVA)

    题目1502:最大值最小化(二分答案) 九度OJ Java import java.util.Scanner; public class Main { public static int max(in ...

  5. Legolas工业自动化平台入门（二）数据响应动作

    在上一篇文章Legolas工业自动化平台入门(一)搭建应用里,我们简单地提到了"动作"的概念.不清楚的童鞋不要着急,这篇我们就来介绍如何在Legolas平台上添加动作,并应用动作. ...

  6. JS思维之路菜鸟也能有大能量-序幕

    准备写一类关于Js的开发思想的文章,这系列文章需要有一定的js基础,在这里不会去说太多的js基础知识,因为这系列文章不是写基础东西,而是一种编程思想,如果你还是js新手,那么建议你有一定基础后再看. ...

  7. 有关web 语义的文章总结

         A web of data that can be processed directly and indirectly by machines.  --Tim Berners-Lee web ...

  8. Lua中的weak表——weak table

    弱表(weak table)是一个很有意思的东西,像C++/Java等语言是没有的.弱表的定义是:A weak table is a table whose elements are weak ref ...

  9. AssetBundle系列——游戏资源打包（一）

    将本地资源打包,然后放到资源服务器上供游戏客户端下载或更新.服务器上包含以下资源列表:(1)游戏内容资源assetbundle(2)资源维护列表,包含每个资源的名字(完整路径名)和对应的版本号[资源名 ...

  10. 【分布式】RPC初探

    事先声明:本文代码参考自Dubbo作者的博客. RPC(Remote Procedure Call)远程过程调用,是分布式系统当中必不可少的一个玩意.比如说在单机系统当中,我想调用某个方法,直接调就可 ...