css之，怪异盒模型和标准盒模型

最新推荐文章于 2023-10-22 03:49:23 发布
最新推荐文章于 2023-10-22 03:49:23 发布
阅读量910 收藏
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41648408/article/details/114043981
版权
本文详细介绍了CSS中的盒模型，包括标准盒模型和IE盒模型的区别。标准盒模型中，元素总宽度由内容宽度、内边距、边框和外边距组成，而IE盒模型下，宽度已包含内边距和边框。理解这两种模型对于前端布局至关重要，可通过`box-sizing`属性来切换盒模型行为。
摘要由CSDN通过智能技术生成

标准模型与IE模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内边距（padding），边框（border），margin（外边距），和内容（content）。
标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
怪异(IE)盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）
设置盒模型：box-sizing:border-box

飞鱼Code
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2437
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
CSS-标准盒模型 & 怪异盒模型
热门推荐
PT - Blog
04-29 3万+
CSS-标准盒模型 & 怪异盒模型
标准盒模型和怪异盒模型
m0_64204485的博客
07-21 711
怪异盒模型，标准盒模型的精讲
CSS-怪异盒模型和标准盒模型
Neokekeke的博客
12-18 2685
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型：标准盒模型：<!--html--> <div class="box1">
标准盒模型和怪异盒模型的区别？
m0_46389895的博客
03-16 3697
标准盒模型：content（内容区）+padding（填充区）+border（边框）+margin（外边距) 怪异盒模型：width{content（内容区）+padding（填充区）+border（边框）}+margin（外边距） 标准盒模型和怪异盒模型本质上都是一个盒子，它们的区别就是计算宽度和高度的不同。 标准盒模型是盒子的总宽度=内容区+填充区+边框+外边距，它的内容区是不包含填充区和...
怪异盒模型和标准盒模型
where_slr的博客
07-10 1314
怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时，会触发怪异模式。
聊一聊标准盒模型和怪异盒模型的区别
u012197150的博客
02-23 389
非官方个风格
标准盒模型和怪异盒模型的区别
weixin_46383743的博客
02-22 5133
标准盒模型和怪异盒模型的区别 盒模型一共有两种模式：标准盒模型和怪异盒模型 1.标准盒模型的组成：宽高（content）+padding+border+margin 宽度实际占有的位置大小： 宽+左右padding+左右border+左右margin。 高度实际占有的位置大小： 高+上下padding+上下border+上下margin 。 width或height是对实际内容的width或hei......
标准盒模型&怪异盒模型
qq_42919799的博客
10-21 1166
标准盒模型&怪异盒模型 盒子模型的组成： ​ 盒子模型一般由：内容（content）、边框（border）、左右外边距（margin-left+margin-right）、左右内边距（padding-left+padding-right）这些部分组成。 CSS中盒子模型分为两种：W3C标准盒模型和IE标准盒模型 标准盒子模型 标准盒模型中，内容区域是由width属性设置的，而内容周围的padding和margin是另外计算的。 width/height + padding+border+mar
CSS标准盒模型和怪异盒模型区别
qq_59181609的博客
08-14 1407
3.当怪异盒模型的宽高确认时，给怪异盒模型添加内边距和边框，怪异盒模型的宽高不会改变，而是通过向内压缩，挤压 content 内容的宽高实现。即外边距，边框，内边距，内容。2.怪异盒模型在计算宽高时包含 conntent 内容、padding内边距、border边框的宽高。2.标准盒模型在计算宽高的时候只计算 content 内容的宽高，不包含内外边距以及边框的宽高。3.当标准盒模型的宽高确认时，增加内外边距和边框会撑大原盒子。表示IE盒模型（怪异盒模型）表示标准盒模型（默认值）...
标准盒模型
demin3278的博客
01-10 135
一、盒模型 　　（一）盒模型概念： 　　　　盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以像盒子一样的外形和平面空间，即包含内容区、填充区（padding）、边框（border）、边界（margin）,这就是盒模型。 　　　　 　　　　1.填充（padding）：padding是指在内容与边框的空白区域，也称补白。 　　　...
标准盒模型和怪异盒模型区别
crispy_cookie的博客
03-16 427
标准盒模型和怪异盒模型的区别 在正式介绍标准盒模型和怪异盒模型之前，我们先来简单介绍一下什么是盒模型。 所谓的盒模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是盛装内容的容器。每个容器都是由内容（content）、内边距（padding）、外边距（margin）和边框（border）组成。 对于标准盒模型来说，它的width和height定义的是内容（content）的宽高，不包括pad...
标准盒子模型,与怪异盒子模型详解
最新发布
wangxuanyang_zer的博客
10-22 1515
标准盒子模型和怪异盒子模型是前端开发中的重要概念，它们影响了元素的布局和渲染。大多数现代浏览器采用标准盒子模型，但在需要与旧版Internet Explorer等不符合标准的浏览器兼容时，可以考虑使用怪异盒子模型。前端开发者需要了解这两种模型的差异，以便在开发过程中更好地控制元素的外观和行为，同时确保跨浏览器兼容性。
CSS--怪异盒子模型
{丸の子}
09-15 404
因为父盒子无边框时子元素增加 margin 会造成外边距穿透，此时需要给父盒子添加 padding ，添加 padding 会增大父盒子，需要手动重新计算父盒子 width ，因此利用怪异盒子模型省略重新计算 width 这一步。正常盒子下，当增加内边距时，如果想保证盒子和之前一样大，需要手动重新计算 width ，怪异盒子模型则省略该步。当父盒子无边框时，子盒子增加 margin 会造成外边距穿透。解决方法：给父盒子设置padding: 10px 0;
CSS盒模型、怪异盒模型
xu_yuxuyu的博客
11-01 678
html零基础必看——CSS盒模型 前言 在我们使用css3进行网页布局时，往往会用到盒模型，一个大大小小的盒子就是来装内容的，可以说每一个标签元素都是一个盒子。本章将对盒模型展开讲述！ 第四章：CSS盒模型前言一、盒模型的基本认识1.1.什么是盒模型1.2.盒子的组成1.3.盒子的大小二、盒模型的四大组成部分2.1.内容区content2.2.内边距padding2.2.1padding属性值的写法：2.3.边框border2.3.1边框的风格2.3.2边框三个属性的值的写法2.4.外边距margin2.
盒模型--标准盒模型---怪异盒模型
月月猴的博客
06-08 1181
盒模型: .demo{ overflow:hidden;/*超出隐藏*/ width:300px; hight:300px; padding: background-color:blue; } 盒模型: 复合属性: border:大小 样式 颜色 :border的样式必须要写,不可少 注意:不给边框颜色,默认颜色就是内容字体的...
【Css】怪异盒模型例子
点滴记忆
05-07 110
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
css盒模型标准和怪异
07-27
CSS盒模型有两种标准：标准盒模型和怪异盒模型。 标准盒模型是CSS的默认盒模型，它将元素的宽度和高度定义为内容区域的宽度和高度。也就是说，元素的宽度和高度不包括边框和内边距。 而怪异盒模型是一种老旧的盒...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值