标准盒子和IE盒子之间的转换

最新推荐文章于 2024-07-20 22:27:34 发布
最新推荐文章于 2024-07-20 22:27:34 发布
阅读量2.2k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjiafengw/article/details/83048675
版权

W3C标准盒子模型：height、width ----- 仅指content(默认)，不包括padding和border

 

IE盒模型：height、weight ----包含了 content+padding+border

CSS中： box-sizing属性默认值为：content-box(W3C)

 

 

可以看到content高30px，但是总体加上padding+border就超出了30px，达到了50px

 

若我们想让content+padding+border加起来30px，只需要设置:box-sizing:border-box

此时:

 

content被挤压成了10px

 

 

 

 

 

dollarDoll
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端第一阶段-10（标准盒子和怪异盒子、边距及行内、行内块、块级标签之间的转换）
Victory_bad的博客
08-03 184
盒子模型：标准盒子和怪异盒子（IE盒子） 内边距与外边距区别 padding所有元素都可以设置，包括块级元素、行内元素及行内块；margin 行内元素上下不会生效(如果想要其生效：方法1.标签转换为块级标签；方法2. 布局为flex) 块级标签上下排列，margin会重叠，取最大的（可以通过float或者flex）；一个父元素嵌套一个子元素，子元素的margin-top，会作用到父元素（可以触发bfc，给父亲加padding） 行内、行内块、块级标签之间的转换............
自学前端第九天 : CSS标准盒子模型
weixin_47592060的博客
05-04 948
标准盒子模型（CSS重点） 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 1.前提了解: ①为什么要一定提前清除CSS盒子样默认样式 * {margin: 0;padding: 0;} 因为浏览器是默认使用CSS的stylesheet样式表的,而这个
标准盒模型和IE盒模型
MB_xiemo的博客
08-11 404
盒子的布局 一、在网页里复杂的页面被划分为一个个小块 把html看成是一个大盒子包裹里面所有的小盒子每个盒子都是由内容、内边距（padding）、边框（border）和外边距（margin）组成。 二、两种盒子模型。 1.w3c标准盒子: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。 2....
盒模型、标签分类及转换(2)
GX2581992762的博客
07-20 156
标签
web两种盒子模型详解
最新发布
Yoahcc的博客
07-20 1041
前端两种 盒子模型 深入学习
盒子大小的计算，盒子类型的转换
weixin_43430676的博客
08-03 1007
盒子的组成=外边距+内边距+边框+内容区域 盒子分为两种类型,通过设置box-sizing:的值来设置盒子的类型 1.content-box 内容盒子(W3C盒子) 为内容盒子设置宽和高之后，内容区域的大小即为盒子的宽和高， 再添加内边距和外边距会使盒子的大小改变 宽度举例： width:100px; 内容区的宽度 盒子的宽度 = width +border-left+border-right+padding-left+padding-right
盒模型和元素转换
m0_74801389的博客
02-26 148
盒子实际高度=height+border-top+border-bottom+padding-top+padding-bottom。盒子实际宽度=width+border-left+border-right+padding-left+padding-right。行级元素只能容纳文本或者其他的行级元素（不能再行级元素里面嵌套块级元素）转化为行内块元素：display:inline-block;在不设置宽度的情况下：块级元素的宽度是他父级元素内容的宽度。在不设置高度的情况下：块级元素的高度是他本身内容的高度。
CSS基础：谷歌盒子转换IE盒子
weixin_52854090的博客
10-11 290
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 谷歌盒子模型:盒子最终的宽高=盒子的自身高度+padding+border IE盒子模型：盒子设置的宽高即为最终的宽高，padding和border由系统自动减去 */ /* .
前端面试之盒子模型（标准盒模型、怪异盒模型）
井旭的博客
08-25 1635
1.CSS盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性： 内容(c
css盒模型（W3C标准盒模型、IE怪异盒模型、box-sizing）
Predator117的博客
01-19 290
所有的HTML元素都可以看作是盒子，每个盒子包括： 外边距（margin）、边框（border）、内边距（padding）、内容（content） W3C标准盒模型 设定的height与width就是content的高度与宽度， 盒子总宽度=margin + border + padding + content/width 盒子总高度=margin + border + padding + content/height IE怪异盒模型 设定的height与width是包括了border、padding、
html怎么给表格添加盒子,div+css table布局实现代码
weixin_29164185的博客
06-16 1244
div+css table布局实现代码发布时间：2009-03-10 00:44:56 作者：佚名 我要评论下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居下面是我翻译的内容，是根据我对...
盒模型、标签分类及转换(1)
GX2581992762的博客
07-20 160
盒子模型
标准盒模型和IE盒模型转换box-sizing——前端面试
jing2jing2的博客
03-31 1265
标准盒模型和IE盒模型转换box-sizing——前端面试
标准盒子模型和怪异盒子模型
weixin_61000863的博客
01-04 819
标准盒子模型和怪异盒子模型
怪异盒模型与标准盒子的区别与转换
a15103892045的博客
02-24 705
怪异盒模型(老版本IE的盒模型) box-sizing:border-box; 标准盒模型宽度=width(内容区域大小)+padding+border 怪异盒模型计算方式和普通盒模型是不同的
标准盒子模型与IE盒子模型的区别
wzb的博客
12-15 761
标准盒模型又称为W3C盒子模型，盒子模型的宽度指的是content，标准盒子对应的css属性box-sizing: content-box;IE盒子模型的宽度包括content，padding，border；对应的css属性box-sizing: border-box;
标准盒子模型和IE盒子模型的区别
菜鸟的博客
03-30 3564
标准盒子模型 在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 见下图。 假设定义了 width, height, margin, border, and padding: .box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black; } 如果.
标准盒子模型和IE盒子模型
Teheran的博客
02-22 494
标准盒子模型 IE盒子模型 网页中的盒子模型；我们常常要控制盒子模型的宽度width: w3c中的盒子模型的宽:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height; iE中的盒子模型的width:也包括margin+...
【基础类】—CSS盒模型的全面认识
m0_37616866的博客
08-04 891
全面理解盒模型以及BFC
盒子模型组成模型，盒子模型的类型，转化方法
08-10
### 回答1： 盒子模型是由content、padding、border、margin四部分组成的。盒子模型主要有两种类型：标准盒模型和IE盒模型。在标准盒模型中，盒子的宽(width)和高(height)指的是content的宽和高；而在IE盒模型中，盒子的宽和高包含了content、padding和border的宽和高。转化方法就是通过CSS的box-sizing属性进行设置，可以将盒子模型从标准盒模型转化为IE盒模型或者反过来。 ### 回答2： 盒子模型是CSS中一种基本的布局模型，它用来描述页面中的元素在渲染时所占据的空间和相互关系。 盒子模型由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。其中内容区域显示元素的实际内容，内边距区域是在内容和边框之间提供空间，边框区域显示元素的边界，外边距区域则是元素与其他元素之间的距离。 盒子模型有两种类型：标准盒子模型和IE盒子模型。在标准盒子模型中，宽度（width）和高度（height）属性仅包含内容区域。而在IE盒子模型中，宽度和高度属性包括了内边距和边框，即宽度 = 内容区域宽度 + 内边距 + 边框。可以通过设置CSS的box-sizing属性来指定使用哪种盒子模型。 转化方法可以通过设置CSS的transform属性来实现。常见的转化方法有平移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew）。平移可以改变元素的位置，缩放可以改变元素的大小，旋转可以改变元素的角度，倾斜可以改变元素的形状。转化方法通过改变元素的变换矩阵来实现。 总结起来，盒子模型是一种用来描述元素在页面中所占据空间的布局模型，包括内容区域、内边距区域、边框区域和外边距区域。盒子模型有两种类型，标准盒子模型和IE盒子模型，可以通过设置box-sizing属性来指定使用哪种模型。转化方法可以通过设置transform属性来实现，包括平移、缩放、旋转和倾斜。这些概念在前端开发中非常重要，对于实现页面布局和动画效果都有很大的帮助。 ### 回答3： 盒子模型是一种用于描述网页元素布局的模型，它将网页元素看作是一个个矩形盒子，并定义了盒子的属性和相互之间的关系。盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)四个主要部分组成。 1. 内容(content)：即元素的实际内容，如文本、图像等。它的宽度和高度可以通过设置CSS属性来调整。 2. 内边距(padding)：指的是内容区域与边框之间的距离。通过设置padding属性来控制。 3. 边框(border)：包围内容和内边距的线段，通过设置border属性来定义线段的样式、宽度和颜色。 4. 外边距(margin)：指的是边框与相邻元素之间的距离。通过设置margin属性来控制。 盒子模型的类型有两种：标准盒子模型和IE盒子模型。 1. 标准盒子模型（W3C盒子模型）：内容(content)的宽度和高度不包括内边距(padding)、边框(border)和外边距(margin)。这种模型下，元素的实际占用空间由内容的宽度和高度决定。 2. IE盒子模型：内容(content)的宽度和高度包括内边距(padding)和边框(border)，不包括外边距(margin)。这种模型下，元素的实际占用空间由内容的宽度、高度、内边距和边框的宽度决定。 在CSS中，可以通过设置box-sizing属性来改变盒子模型的类型。设置为border-box即使用IE盒子模型，设置为content-box即使用标准盒子模型。 转化方法主要是使用盒子模型相关属性进行计算和调整。通过设置元素的宽度、高度、内边距、边框和外边距的大小以及盒子模型的类型，可以实现元素的布局和样式效果。具体的转化方法有通过调整元素的尺寸、边距和定位来实现布局的变化，通过设置盒子模型的类型来改变元素占用空间的计算方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值