设置标准盒子和怪异盒子


.div3{
           width: 200px;
           height: 200px;
           overflow: hidden;
           resize: both;
           border: 1px darkgrey solid;
           /*定义一个div用户可以放大该div,只有resize设置为both才生效*/
           box-sizing: content-box;

/*box-sizing: content-box;设置盒子模型为标准模型,设置width为200px,不包含                           border,margin,padding,*/
       /*box-sizing: border-box;设置为怪异模型,包含border,margin,padding*/
       }

<div class="div3">
        /*定义一个div用户可以放大该div,只有resize设置为both才生效*/
        <hr>
        /*box-sizing: content-box;设置盒子模型为标准模型,设置width为200px,不包含                           border,margin,padding,*/
        /*box-sizing: border-box;设置为怪异模型,包含border,margin,padding*/
    </div>

时间: 2024-08-10 19:16:44

设置标准盒子和怪异盒子的相关文章

浏览器的标准模式与怪异模式的设置与区分方法

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode):由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别.W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出

怪异盒子

box-sizing: content-box;  标准盒子模型, 宽高=content的宽高 box-sizing: border-box;  怪异盒子模型(IE盒子模型),宽高=border+padding+content box-sizing: padding-box;  火狐盒子,宽高=padding+content

box-sizing怪异盒子模型在移动端应用

盒子模型不必多少,公认的盒子模型 总宽度=width + padding(padding-left,padding-right) + border(border-left,border-right) 而怪异盒子模型 总宽度=width 哎 语文老师是数学教的 没办法只能表述成这样了,没关系看图, 先看下传统盒子模型 ,结构和代码如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta ch

(转)标准模式与怪异模式

标准模式与怪异模式 由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode):由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别. W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页

标准模式与怪异模式

标准模式与怪异模式 由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode):由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别. W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页

DIV+CSS两种盒子模型(W3C盒子与IE盒子)

在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. 特点: 每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置

关于HTML(二)---------浏览器的标准模式和怪异模式

标准模式和怪异模式的来由 在HTML与CSS的标准化未完成之前,各个浏览器对于HTML和CSS的解析有各自不同的实现,而有很多旧的网页都是按照这些非标准的实现去设计的.在HTML与CSS标准确定之后,浏览器一方面要按照标准去实现对HTML与CSS的支持,另一方面又要保证对非标准的旧网页设计的后向兼容性.因此,现代的浏览器一般都有两种渲染模式:标准模式和怪异模式.在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染:而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染

html盒子模型&amp;jquery盒子模型

最近学了jquery的盒子模型之后,感觉真的颠覆我之前对盒子模型的看法,我在最初以为盒子模型只存在于html,我们就来看看他们有何区别. 1.html盒子模型 如果说js里面万物皆是对象,那么html里面的万物皆是盒子.不是盒子的我们也可以用dispiay:blok 变成盒子.那他的盒子是怎么计算的呢? httml元素有一个属性box-sizing:border-box/content-box; 默认的情况下是content-box 内容盒子这情况下宽高求法 实际宽(width)=定义的宽(wi

标准模式和怪异模式

一.< ! DOCTYPE html >有什么作用? H5头部< ! DOCTYPE html > DOCTYPE称为Document  Type  Declaration(文档类型声明,缩写DTD),它在 文档正文之前就确定当前文档的类型,以决定其需要渲染的模式,< ! DOCTYPE html >表示以标准模式渲染如果注释这句话,则以怪异模式渲染,< ! DOCTYPE html >前面不能有 标签或者注释,否则也按照怪异模式渲染. 在ie9往上的浏览器