精华内容
下载资源
问答
  • css的布局模型分为流动模型(Flow)、浮动模型(Float)、层模型(Layer)。 浮动模型(Float)和层模型(Layer)有什么显著区别? 浮动模型(Float):浮动是让某元素脱离文档流限制,在浮动框之前和之后非...

      css的布局模型分为流动模型(Flow)、浮动模型(Float)、层模型(Layer)。


      浮动模型(Float)和层模型(Layer)有什么显著区别?

        浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动;浮动的元素仍然会占据文档流的物理空间。关于浮动模型的详细说明请看另一篇文章的介绍。http://ycgit.blog.51cto.com/8590215/1958452


      层模型(Layer):设置为层模型的元素已从文档流删除,在文档流上层一层层覆盖,写在后面的层模型元素会覆盖前面层模型元素,层模型元素的定位与文档流无关,只基于带有定位属性(relativeabsolute)的元素或视窗;


        position的relative、absolute与fixed区别?

      这三个定位属性是属于层模型的三种体现形式,另外任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框(有块级元素特性,但不占整行),而不论该元素本身是什么类型。

      使用区别  

      relative 相对定位,以自己当前处于文档流的位置为基准设置偏移量,所以自身在文档流会保持占有固定的物理空间,并且物理空间的位置只受文档流的影响,而不受自身设置偏移量(top/left这些)影响,注意自身设置了margin这类非定位属性也一样改变其在文档流的物理位置。

      absolute 绝对定位,是相对于设置了position为relative或者absolute最近的父级元素定位(body、html标签也需要定位属性才能作为定位父级),如果没有就是基于视窗定位,不占文档流的物理空间。

      fixed 固定定位,是相对于浏览器视窗的,不占文档流的物理空间。










    本文转自 艺晨光 51CTO博客,原文链接:http://blog.51cto.com/ycgit/1958756,如需转载请自行联系原作者
    展开全文
  • 标准盒模型与怪异盒模型的区别 盒模型概念:盒模型是CSS布局的基础。 作用:用来控制元素与元素,或元素和内容之间的位置关系 标准盒模型与怪异盒模型有什么区别呢? box-sizing:content-box; box-sizing:border-...

    标准盒模型与怪异盒模型的区别

    盒模型概念:盒模型是CSS布局的基础。
    作用:用来控制元素与元素,或元素和内容之间的位置关系
    标准盒模型与怪异盒模型有什么区别呢?

    box-sizing:content-box; 
    box-sizing:border-box; 
    box-sizing:inherit
    

    - 标准盒模型:box-sizing:content-box
    标准盒模型组成:content(内容区)+padding(填充区)+border(边框)+margin(外边距)

    标准盒子模型
    标准盒模型的width的值是indent的值,计算盒子的宽度=width(indent)+padding+border+margin
    高度同理
    标准盒模型
    举个例子:

    div{width:500px;
    	height:500px;
    	padding:100px;
    	border:10px;
    	margin:10px;
    	}
    

    盒子的总宽度=(width)500px+(padding)200px+(border)20px+(margin)20px=740px
    盒子的总高度=(width)500px+(padding)200px+(border)20px+(margin)20px=740px

    - 怪异盒模型box-sizing:border-box
    怪异盒模型的组成:width(indent+padding+border)+margin
    举例:

    .box{box-sizing:border-box;
    	width:100px;
    	height:100px;
    	padding:10px;
    	border:2px;
    	margin:2px;}
    

    怪异盒模型的width的值就是现在设的100px,这个100px包括了indent,padding,border,
    盒子的总宽度=100px+4px=104px

    • box-sizing:inherit是继承父元素 box-sizing的值

    总结:

    1. 标准盒子(content-box)的总宽度=indent+padding+border+margin
      如果值发生变化,总宽度或者总高度也会发生变化。有时为了保持盒子的大小不变会对发生变化的值做出抵消或者增加。

    2. 怪异盒子 (border-box)的总宽度=width+margin
      无论值发生什么样的变化,宽度和高度都不会变。

    展开全文
  • 1.ie其他浏览器盒子宽度和高度是不同: IE宽高度包括了边框和内嵌边距,而其他浏览器宽高度为内嵌文本宽高度。 2.源代码: .box { width:250px !important; 其他浏览器宽高度 width:300px; IE为后边...

    1.ie与其他浏览器盒子的宽度和高度是不同的:

    IE的宽高度包括了边框和内嵌边距,而其他浏览器的宽高度为内嵌文本的宽高度。


    2.源代码:

    <style>

    .box {

    width:250px !important;  其他浏览器宽高度

    width:300px; IE为后边的宽高度,会覆盖前边的宽高度。

    height:270px !important;

    height:300px;

    border:5px solid blue;

    padding:10px 20px;

    margin:30px;

    background:#F0F;

    }

    </style>

    <body>

    <div class="box">

    我是谁?<br>

    我是谁?<br>

    我是谁?<br>

    我是谁?<br>

    </div>

    </body>

    展开全文
  • 当对一个文档进行布局(layout)时候,浏览器渲染引擎会根据标准之一 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形盒子(box) 一个盒子由四个部分组成:content、padding、...

    图片

    一、是什么

    当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)

    一个盒子由四个部分组成:contentpaddingbordermargin

    图片

    content,即实际内容,显示文本和图像

    boreder,即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成

    padding,即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的background属性影响

    margin,即外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域

    上述是一个从二维的角度观察盒子,下面再看看看三维图:

    图片

    下面来段代码:

    <style>
      .box {
        width: 200px;
        height: 100px;
        padding: 20px;
      }
    </style>
    <div class="box">
      盒子模型
    </div>
    

    当我们在浏览器查看元素时,却发现元素的大小变成了240px

    这是因为,在CSS中,盒子模型可以分成:

    • W3C 标准盒子模型

    • IE 怪异盒子模型

    默认情况下,盒子模型为W3C 标准盒子模型

    二、标准盒子模型

    标准盒子模型,是浏览器默认的盒子模型

    下面看看标准盒子模型的模型图:

    图片

    从上图可以看到:

    • 盒子总宽度 = width + padding + border + margin;

    • 盒子总高度 = height + padding + border + margin

    也就是,width/height 只是内容高度,不包含 padding 和 border

    所以上面问题中,设置width为200px,但由于存在padding,但实际上盒子的宽度有240px

    三、IE 怪异盒子模型

    同样看看IE 怪异盒子模型的模型图:

    图片

    从上图可以看到:

    • 盒子总宽度 = width + margin;

    • 盒子总高度 = height + margin;

    也就是,width/height 包含了 padding和 border

    Box-sizing

    CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

    语法:

    box-sizing: content-box|border-box|inherit:
    
    • content-box 默认值,元素的 width/height 不包含padding,border,与标准盒子模型表现一致

    • border-box 元素的 width/height 包含 padding,border,与怪异盒子模型表现一致

    • inherit 指定 box-sizing 属性的值,应该从父元素继承

    回到上面的例子里,设置盒子为 border-box 模型

    <style>
      .box {
        width: 200px;
        height: 100px;
        padding: 20px;
        box-sizing: border-box;
      }
    </style>
    <div class="box">
      盒子模型
    </div>
    

    这时候,就可以发现盒子的所占据的宽度为200px

    展开全文
  • Android布局中PaddingMargin的区别

    千次阅读 2015-11-25 15:34:55
    模型 为了更加准确地控制TextView里面内容的位置,我们可以...下图所示是一个类似盒子的模型,我们将通过下面的模型来讲解Padding和Marigin之间的区别。从图中可以看出,在Container(父控件)里面有一个子控件,假
  • 这两种盒模型的区别4.盒模型的转换二、flex布局1.flex布局的组成2.flex的相关属性2.1 flex-direction2.2 justify-content2.3 align-items2.4 flex-wrap2.5 align-content3.flex项目属性3.1 order3.2 flex-grow3.3 ...
  • 什么是盒子模型 ...标准盒模型与怪异盒模型的表现效果的区别之处: 1、标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度 W3C标准盒模型下盒子的大小 =wid.
  • 什么是盒子模型 ...标准盒模型与怪异盒模型的表现效果的区别之处: 1、标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度 W3C标准盒模型下盒子的大小 = width
  • 二者最大区别据某博文中总结是:auto子元素有关,100%父元素有关。 总体来说是正确,但要修正一点就是marginauto是父元素有关 。下面是盒模型(只考虑 块级元素 )中各属性对百分比和auto处理情况。几点重要...
  • 盒子模型常用到样式有哪些?在布局样式中常常需要注意小细节你发现没有?背景样式background应用详解,绝对定位相对定位应用举例,在这里都能找到答案。
  • 模型:严格叫做模型数据。核心就是我们把字典当成一个对象,字典里面几个数据,我们分别转换成对象几个属性,我们调用和设置数据时候直接是“对象.属性”即可。
  • 模型是CSS实现页面布局的一种思想:把页面的所有元素都看成一个类似于礼品盒的盒子,礼品盒可能会有好多层包装组成,那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下,盒模型是要把元素看成...
  • 这是CSS基础知识,对盒模型知识与布局以及相关属性不是很了解的时候,是很容易混淆与分不清楚的。  有朋友提出一个问题,padding与line-height的区别。这是CSS基础知识,对盒模型知识与布局以及相关属性不是很了解...
  • 不论是标准盒模型还是IE盒子模型,都有content、padding、border、margin四个部分组成,但从上图也可以看出W3C盒子和IE盒子主要区别在content宽度上的区别 w3c中的盒子模型的宽:包括margin+border+padding+width;...
  • 1. content-boxborder-box的区别及相关计算 当box-sizing:content-box时,boxwidth(盒子宽度)=contentwidth(盒子内容宽度)+2*padding+2 *border, 以下为实例 <div class="bc"> <div class="bc1"> ...
  • 弹性盒模型&响应式布局

    千次阅读 2018-08-19 11:07:38
    1.移动端布局与PC端的区别 PC端最常用的布局是固定宽度(980px,960px,1000px,1200px);移动端网页是可以横屏看也可以竖屏看,屏幕的分辨率不同,固定宽度的布局必然是不可行的。 PC端布局考虑更多的是浏览器的兼容...
  • 2. div和span的区别在于:span是内联元素(只占用所需位置),div是块级元素(占用一整行)。 3. div能够定义宽度和高度属性,span不能定义。但是可以通过display属性将divspan相互转换。 2.盒模型 margin盒子外边距...
  • MVCMVP的区别

    2020-11-29 23:37:05
    M : Model 数据模型,就是对数据封装和保存; V : View 视图界面,相当于布局文件; C : Controller 控制器,就是Activity和Fragment这些; View传送指令到Controller,Controller完成业务逻辑后,改变Model状态...
  • MVPMVC的区别

    2018-04-15 00:01:31
    MVC:M : Model 数据模型,就是对数据封装和保存;V : View 视图界面,相当于布局文件;C : Controller 控制器,就是Activity和Fragment这些;View传送指令到Controller,Controller完成业务逻辑后,改变Model状态...
  • 你对Padding属性与line-height的区别是否了解,这里向大家描述一下,其实padding是布局设置,对容器进行内边距定义。...这是CSS基础知识,对盒模型知识与布局以及相关属性不是很了解的时候,是很容易...
  • CSSCSS3的区别

    2021-03-10 16:29:36
    它可以同时控制多张网页的布局 外部样式表存储在 CSS 文件中 什么是css3 CSS3 是最新 CSS 标准。具体内容看后文 css3css相比增加了那些属性 css 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 ...
  • ——逆战班—— 标准盒模型新手比较常用,怪异盒模型在移动端布局时常用,介绍一下两者结构。 可以看到,在标准盒模型下,width和height是内容区域即...而IE盒模型或怪异盒模型显而易见的区别就是,width和hei...
  • 重排重绘的区别

    2018-03-26 17:04:00
    部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸...由于浏览器渲染界面是基于流式布局模型的,也就是某一个DOM节点信息更改了,就需要对DOM结构重新进行计算,重新布局界面在,再次引发重排。 引起重排...
  • 1.bootstrap4boostrap3的区别 bootstrap3 bootstrap4 less Sass语言编写 4种栅格类 5种栅格类 使用px为单位 使用rem和em为单位 除部分(margin和padding使用px) 使用push和pull向左右移动 偏移列...
  • 写前端过程中,都有哪些样式?需要有哪些基础知识?盒子模型是什么?padding、margin问题……什么是块元素?

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 344
精华内容 137
关键字:

模型与布局的区别