浏览器通过CSS对元素的盒子模型的描述进行页面渲染的。因此,元素的宽度受到父元素、css描述的影响。

通常,元素的宽度是指盒子模型中content-box所占用的宽度。也就是说,默认box-sizing:content-box.在这里,css的width与图中的width一致。

当设置box-sizing:border-box时,虽然也有width、innerWidth、outerWidth之类,但是css设置的width却等于outerWidth(false):

其他情况

box-sizing是css3提供的能力。浏览器支持情况如下:

尽管如此,css设置的width,IE7依然认为是content-box,而IE5则认为是border-box。

 

兼容性设置宽度:

.box {

width: 100px;    /*firefox*/

*width: 100px;  /*IE7*/

_width:100;  /*IE6*/

}

 

参考:

http://caniuse.com/

css中的宽度的更多相关文章

  1. Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  4. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  5. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  6. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  7. CSS系列:CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  8. CSS系列:CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

  9. css中的expression

    最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...

随机推荐

  1. Vue CLI 3使用:浏览器兼容性

    package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...

  2. DAY17、常用模块

    一.time模块 1.时间戳(timestamp):time.time()     #可以作为数据的唯一标识   是相对于1970-1-1-0:0:0时间插值 2.延迟线程的运行:time.sleep ...

  3. AngularJS 1.x系列:Node.js安装及npm常用命令(1)

    1. Node.js安装 1.1 Node.js下载 Node.js官网:https://nodejs.org 当前下载版本(含npm):Latest LTS Version: v6.10.3 (in ...

  4. 设置 sql_mode

    MySQL 的 sql_mode 合理设置 sql_mode 是个很容易被忽视的变量,默认值是空值,在这种设置下是可以允许一些非法操作的,比如允许一些非法数据的插入.在生产环境必须将这个值设置为严格模 ...

  5. Django+Vue打造购物网站(十一)

    第三方登录 微博创建应用,修改回调地址 http://open.weibo.com/authentication 安装第三方登录插件 https://github.com/python-social- ...

  6. lesson03

    3.1. 画 点 3.2. 基准平面 (重要) 1. 关于 点 的使用() 1.画一条直线,在线上画一个点(利用该点占该线段的百分比画出),通过该点画一条直线 2. 画一个长方体,定位到上表面.选择( ...

  7. Cucumber常用关键字

    常用关键字(中英文对应) 对应的测试用例 Feature(功能) test suite (测试用例集) background(背景)   Scenario(场景) test case(测试用例) Sc ...

  8. 时间序列分析模型——ARIMA模型

    时间序列分析模型——ARIMA模型 一.研究目的 传统的经济计量方法是以经济理论为基础来描述变量关系的模型.但经济理论通常不足以对变量之间的动态联系提供一个严密的说明,而且内生变量既可以出现在方程的左 ...

  9. 时间函数(1):time,ctime,gmtime,localtime

    asctime(将时间和日期以字符串格式表示) #include<time.h> 定义函数 char * asctime(const struct tm * timeptr); 函数说明 ...

  10. python中的装饰器迭代器生成器

    装饰器: 定义:本质是函数(装饰其它函数) 为其它函数添加附加功能 原则: 1 不能修改被装饰函数源代码    2 不修改被装饰函数调用方式 实现装饰器知识储备: 1 函数即‘’变量‘’ 2 高阶函数 ...