怪异盒模型

最新推荐文章于 2024-09-30 18:01:31 发布

燚龘-益达

最新推荐文章于 2024-09-30 18:01:31 发布

阅读量164

点赞数

分类专栏：初级小白文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_46079002/article/details/120088233

版权

初级小白专栏收录该内容

37 篇文章 0 订阅

订阅专栏

怪异盒模型是一个非常好用的东西,也叫做ie盒模型,是ie在丢失文档类型的时候误打误撞出现的一个东西

标准的盒模型是由:内容(content),内边距(padding),外边距(margin),边框(边框)

计算:

标准盒模型自身大小为 content(内容),padding(内外边距),border(边框) 实际大小为content+padding+margin+border

怪异盒模型(IE盒模型)

属性:box-sizing

属性值:

content-box 标准盒模型

border-box 怪异盒模型

特点

padding不会撑大容器的大小不需要减去相应的padding border是向内长的,直接设置的宽高就是盒子的大小

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

燚龘-益达

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

怪异盒模型&弹性盒

weixin_44222157的博客

04-14

433

怪异盒模型 怪异盒模型又叫IE盒模型，它可以使padding和border都在元素宽高的内部，不会把盒子撑大一般在移动端开发时使用。触发条件：box-sizing:border-box; 例：我们设置了一个宽400px高300px的盒子，给它添加了10px的border和50px的padding，标准盒模型中，padding会把盒子撑大且border会在盒子的外部，而添加**box-sizi...

自学前端第十天 : CSS怪异盒子模型

weixin_47592060的博客

05-04

2576

一.怪异盒子模型 怪异盒模型是IE盒子模型我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的宽度高度计算和标准盒子模型计算方式不同怪异盒子模型的 content内容宽度会把padding和border算入其中是由外而内的计算宽度二.标准盒子和怪异盒子: 1.标准模型下宽度计算方式

参与评论您还未登录，请先登录后发表或查看评论

CSS盒模型-怪异盒模型笔记-思维导图-案例等

商务合作 / 项目定制开发 / 前端一对一培训、答疑

09-30

861

可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；我们把 padding 和 margin 统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。内间距：指的是盒子的内容与边框的间距（4个边都有内间距）

css怪异盒子模型,CSS3弹性盒---怪异盒

weixin_35782943的博客

08-04

2771

怪异盒模型box-sizing:content-box 标准盒模型总宽/高度=width+左右/上下padding+左右/上下borderbox-sizing:border-box 怪异盒模型(IE盒模型) 总宽/高度=width(包含padding和border)弹性盒特点：1、在弹性盒里，所有子元素按照“主轴”排列2、在弹性盒里，所有...

标准盒子模型和怪异盒子模型

热门推荐

weixin_47340917的博客

10-08

1万+

标准盒子模型和怪异盒子模型一、概念二、计算方法三、默认盒模型四、盒模型转换五、演示代码六、总结今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。一、概念标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长； ②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，

什么是怪异盒模型

qq_39378871的博客

02-22

7099

盒子模型在说怪异盒模型之前我们先来了解一下盒模型，盒模型主要是在我们进行页面布局的时候来使用，我的理解是把它比喻成一个可变的框架，你可以往这里面加很多很多的东西去填充它的内容，盒模型又由几个大的部分组成从外到内依次为：margin（外边距）---->border（边框）---->padding（内边距）---->content（元素）为了便于我们理解可以看看下面这张图：了...

详解CSS 怪异盒模型和标准盒模型

12-30

由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型）用两个简单的例子分别介绍下这两个盒子模型：标准盒模型： &lt...

怪异盒模型、弹性盒及相关属性的介绍

YY的博客

09-27

2428

怪异盒模型、弹性盒及相关属性的介绍

前端面试之盒子模型（标准盒模型、怪异盒模型）

井旭的博客

08-25

1671

1.CSS盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性：内容(c

CSS--怪异盒子模型

m0_56123958的博客

03-12

8551

CSS–怪异盒子模型怪异盒子模型标准盒子宽度计算方法（扩张主义） border-left-width+width+padding-left+padding-right+border-right-width <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px;

怪异盒子模型、弹性盒子模型

clearclearing的博客

12-02

1957

标准盒子模型：content+(padding+border+margin)*2 怪异盒子模型：conten+margin*2 //conent已经包括来padding和border（当不对doctype进行解析时会出现这种）弹性盒子模型：相比传统的盒子模型。该模型能很轻松的创造出自适应的弹性流动布局和自适应的字体 .parent{ width: 900px;

怪异盒模型 / 弹性盒模型

sumengyzy的博客

04-13

370

怪异盒模型 / 弹性盒模型标准盒模型我们平常状态下所写的，即为标准盒模型状态下的css样式 .box{ width:200px; height: 200px; background-color: purple; padding: 20px; margin: 20px; box-sizing:content-box; /*开启标准盒模型（通常为默认状态，一般不写）*/ ...

CSS-怪异盒模型和标准盒模型

Neokekeke的博客

12-18

2785

在html文档中，每个渲染在页面中的标签都是一个个盒子模型。盒子模型又分为： W3C标准的盒子模型和 IE标准的盒子模型。由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型）用两个简单的例子分别介绍下这两个盒子模型：标准盒模型： <div class="box1">

IE盒模型（怪异盒模型）

GANKB的博客

02-03

545

IE盒模型（怪异盒模型）触发条件：box-sizing: border-box; 标准盒模型：总盒高 = padding（上下）+ border（上下）+ height 总盒宽 = padding（左右）+ border（左右）+ width IE盒模型(怪异盒模型): 总盒高 = height 总盒宽 = width ...

怪异盒模型、弹性盒子、常见CSS样式（自身样式）

kaitezhimao的博客

05-12

882

在width给定的情况下，怪异盒模型增加padding，border时盒子尺寸不变，会向内挤压内容区域。在width给定的情况下，标准盒模型增加paddding、border都会扩大盒子的尺寸。// 位置坐标/原点坐标在盒子的左上角。内容区域的大小 = width - 左右的padding - 左右的border。整个盒子的大小 = width + 左右的padding + 左右的border。rgba(0-255 , 0-255, 0-255) //二进制。

怪异盒模型和弹性盒

weixin_46048542的博客

04-30

258

怪异盒模型 含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改属性: box-sizing box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。属性值: content-box 这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 ■标准盒子模型属性值: border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过

怪异盒子

weixin_30719711的博客

02-15

826

box-sizing: content-box; 标准盒子模型，宽高=content的宽高 box-sizing: border-box; 怪异盒子模型（IE盒子模型），宽高=border+padding+content box-sizing: padding-box; 火狐盒子，宽高=padding+content 转载于:https://www.cnblogs.com/adiali...

HTML 怪异盒模型