在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. 在自己的对象里实现IEnumerator和IEnumerable

    平时工作中我们经常用foreach来迭代一个集合.比如 foreach (Student student in myClass) { Console.WriteLine(student); } 基本所 ...

  2. Java 停止一个 Thread

    boolean   flag=true;         public   void   run(){             while(flag){                     ... ...

  3. 关于js中的回收机制，通俗版

    在前面的几篇文章中,我讲解过了js中的回收机制,但是对于当时的我来说,我自己对回收机制的这个概念也有些懵懵懂懂,现在对回收机制有了更深入的理解,所以特此发布此文给于总结,也好加深记忆. 如果你想学习闭 ...

  4. [Code::Blocks] Install wxWidgets & openCV

    The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...

  5. Click Models for Web Search(1) - Basic Click Models

    这篇文章主要是介绍一些基本的click model,这些不同的click model对用户与搜索结果页的交互行为进行不同的假设. 为了定义一个model,我们需要描述出observed variabl ...

  6. 潮流设计：15个创意的 3D 字体版式作品欣赏

    3D字体设计是真的很棒,它最适用于广告.使用3D文字和不同的惊人效果,例如灯光或纹理带来了很多东西.在版式设计中,最重要的是消息.如果它抓住了用户的注意力,设计工作是在正确的轨道上. 您可能感兴趣的相 ...

  7. UITextField-secureTextEntry

    1.UITextFiled的密文输入   secureTextEntry  安全文本输入  secure:安全  Entry:入口

  8. Mysql学习笔记（十三）权限管理

    学习内容: 1.权限管理: 关于mysql的权限简单的理解就是mysql允许你做你权利以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执行update操作.只允许你从某台机器上连 ...

  9. JS&CSS文件请求合并及压缩处理研究（一）

    在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...

  10. 叨叨PS那些活

    临睡前记得今天技术小结没写...就起来叨叨些使用Photoshop做网站的活吧. 一般网站的建站流程和人员配置是: 1 美工,创建页面的psd图 2 前端工程师,根据psd图,切出html页面 3 后 ...