怪异盒模型

最新推荐文章于 2024-01-04 15:36:10 发布
最新推荐文章于 2024-01-04 15:36:10 发布
阅读量133 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73749787/article/details/127115154
版权

box-sizing：border-box;怪异盒模型

他的宽度=内容（width）

实际高度=内容（height）

标准的盒模型语法；box-sizing：content-box

overflow；hidden：（溢出隐藏）

BFC（block    formatting  context）

web页面中盒模型布局的css渲染模式块级模式渲染上下文

它是一个独立的渲染区域里面的元素和外面的元素毫不相干

生成BFC 的条件

根元素html

float属性不属于none

position定位（属性为absoulte或者fixed）

display转行内快（inline-block 也可以触发）

overflow只要属性不为wisible都可以触发

BFC 的渲染规则

在内部的box会垂直方向，一个接着一个的排序box在垂直方向

的距离由margin决定属于同一个bfc的相邻的box的margin会发生塌陷

bfc解决什么问题

清除浮动

防止margin塌陷

避免文字 环绕

两列只适应 中间适应

中间盒子不会受到两边盒子的影响

小邸不偷懒
关注
怪异盒模型&弹性盒
weixin_44222157的博客
04-14 432
怪异盒模型 怪异盒模型又叫IE盒模型，它可以使padding和border都在元素宽高的内部，不会把盒子撑大一般在移动端开发时使用。 触发条件：box-sizing:border-box; 例： 我们设置了一个宽400px高300px的盒子，给它添加了10px的border和50px的padding，标准盒模型中，padding会把盒子撑大且border会在盒子的外部，而添加**box-sizi...
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2565
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
标准盒子模型和怪异盒子模型
热门推荐
weixin_47340917的博客
10-08 1万+
标准盒子模型和怪异盒子模型一、概念二、计算方法三、默认盒模型四、盒模型转换五、演示代码六、总结 今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。 一、概念 标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长； ②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，
怪异盒子模型
unlockmyname的博客
06-05 4352
1.内外边距的差别 padding 盒子边框本身以内的间距,当内边距设置过大时,盒子本身的大小会 被撑大 margin 盒子边框以外的间距,外边距大小不会影响盒子的大小,可能会影响盒子的位置 2.补充块元素和行内元素 块和行内块元素的宽度和高度默认是继承父元素的宽度 和高度的百分比. 行内元素是不能设置宽width和高度height,它的宽度和高度是根据内容来的. 同一行如果多个元素的宽度相加大于父元素容器的宽度,放不下的换行显示. 图片标签一般设置固定的宽度,高度设置为auto
怪异盒模型介绍
2201_75918981的博客
01-04 461
怪异盒模型介绍
什么是怪异盒模型
weixin_42577379的博客
02-22 4304
盒模型分为标准盒模型和怪异盒模型，他们的区别在于计算内容区的不同。 我们来看input标签 这是一个高度相同，边框相同的搜索框和一个提交按钮。给他们写长、相同的高和一个1px的边框。 看 他们在网页中显示的高度现在看起来是不一样的。不止高度不一样提交按钮的长度现在也不是和我定的数值一样。这个提交按钮就是一个怪异盒模型。 标准盒模型宽度实际占有的位置大小： 宽+左右padding+左右borde...
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
怪异盒模型、弹性盒及相关属性的介绍
YY的博客
09-27 2427
怪异盒模型、弹性盒及相关属性的介绍
前端面试之盒子模型（标准盒模型、怪异盒模型）
井旭的博客
08-25 1668
1.CSS盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性： 内容(c
怪异盒模型、弹性盒子、常见CSS样式（自身样式）
kaitezhimao的博客
05-12 880
在width给定的情况下，怪异盒模型增加padding，border时盒子尺寸不变，会向内挤压内容 区域。在width给定的情况下，标准盒模型增加paddding、border都会扩大盒子的尺寸。// 位置坐标/原点坐标在盒子的左上角。内容区域的大小 = width - 左右的padding - 左右的border。整个盒子的大小 = width + 左右的padding + 左右的border。rgba(0-255 , 0-255, 0-255) //二进制。
盒子模型与怪异盒子模型
zshmiao的博客
07-20 357
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)：content(width/height) border margin padding 标准情况下盒子的width和height指的是内容的范围，不包含border和padding 盒子的占位=width+pa
CSS-怪异盒模型和标准盒模型
Neokekeke的博客
12-18 2774
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型：标准盒模型：<!--html--> <div class="box1">
H5基础——(5)怪异盒模型、弹性盒模型、倒影及阴影
Erosvan的博客
09-24 4007
一、怪异盒模型 怪异盒模型 .reddiv { width: 200px; height: 200px; background-color: red; box-sizing: border-box; border: 20px blue solid; padding-left: 50px; /*怪异盒模型
CSS3学习笔记三---怪异盒模型 | 弹性盒*
Flora_hsx的博客
10-23 1493
CSS3学习笔记三---怪异盒模型 | 弹性盒*，怪异盒内容比较重要，常用，需要多练习。
怪异盒模型 box-sizing
supming1的专栏
12-27 1815
box-sizing : content-box/border-box   （content-box ）盒模型 ： width =   内容宽 （border-box ）怪异盒模型 ： width = padding + border + 内容宽     怪异盒模型一般用于移动端布局。...
盒子模型 -- 标准盒子模型, 怪异盒子模型
weixin_44852765的博客
04-22 174
1. css 盒子模型 一个盒子模型包括: 外边距(margin), 边框(border), 内边距(padding), 内容(width/height) 注: 以下width/height 皆是指css 中代码里面的宽高, 而盒子模型的宽高皆称作为 盒子的宽高 以上也就是我们所说的 标准盒子模型(也就是W3C盒子模型) 盒子的宽高= margin + border + padding + wi...
学习日志四：怪异盒模型和标准模型
TotoroChinchilla的博客
04-29 372
标准盒模型和怪异盒模型
标准盒子模型、怪异盒子模型介绍。
qq_45861961的博客
03-20 785
盒子模型是用来描述网页布局的概念，它将网页中的元素看做是一个矩形盒子，由内容(content)、内边距(padding)、边框(border)和外边距(margin)四部分组成。但是在不同的浏览器中，盒子模型的实现方式是不同的，主要有标准盒子模型和怪异盒子模型两种。高度：100px在怪异盒子模型中，元素的实际宽度和高度并不包括内边距(padding)、边框(border)和外边距(margin)这三部分的宽度和高度，并且元素的内容(content)会被压缩，以适应元素的实际宽度和高度。
普通盒模型和怪异盒模型
Zheng_xinle的博客
08-26 7095
盒模型 一、什么是盒模型？ 1.根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。 2.盒模型分为两种:分别是W3C标准盒模型（普通盒模型）和IE盒模型（怪异盒模型） ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020082620580221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmN
HTML 怪异盒模型
最新发布
10-18
在怪异盒模型中，content区域的宽度并不包括padding和border，这意味着如果设置了内边距或边框，那么元素的实际宽度会比预期小。这可能导致布局上的意外问题，特别是在使用浮动和绝对定位时。 从CSS 2.1开始，标准...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值