CSS之标准盒模型与怪异盒模型

最新推荐文章于 2024-09-30 18:01:31 发布
最新推荐文章于 2024-09-30 18:01:31 发布
阅读量213 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/first_person/article/details/107406636
版权

盒模型

首先，我们了解一下什么是盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

标准盒模型

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+左填充+右填充+左边框+右边框+左边距+右边距

如图：
在这里插入图片描述

怪异盒模型

总元素的宽度=宽度
总元素的高度=高度
在这里插入图片描述

tips: 愿你过得没我好，死得比我早，吃不好睡不好还特别显老
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2716
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
CSS--怪异盒子模型
m0_56123958的博客
03-12 8881
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;
CSS盒模型、怪异盒模型
xu_yuxuyu的博客
11-01 1137
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.
【Css】怪异盒模型例子
点滴记忆
05-07 153
<!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 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
标准盒模型与怪异盒模的区别.html
02-23
介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别，他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。
CSS+盒模型,css盒模型面试题,HTML
09-10
标准盒模型与IE盒模型 CSS盒模型有两种不同的实现方式，即标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。两者的主要区别在于元素的总宽度和高度的计算方式。 - **标准盒模型**：元素的总宽度和高度只包括...
css盒模型.docx
02-24
标准盒模型和怪异盒模型是两种不同的盒模型计算方法。标准盒模型的计算方法是：width + 左右 padding + 左右 border + 左右 margin，高度计算方法相同。怪异盒模型的计算方法是：width（content + border + padding...
CSS盒子模型【怪异盒模型、定位看这一篇就够了！！！】
zheshiyangyang的博客
08-26 1277
也就是盒子里面能留给子元素的宽度和高度大小，也就意味着盒子里面的内容的最大面积就是width和height形成的矩阵面积。将盒子的左右两边的margin都设置为auto，盒子将水平居中。
CSS怪异盒模型box-sizing:border-box
qq_46275230的博客
03-20 747
CSS怪异盒模型box-sizing:border-box 文章目录CSS怪异盒模型box-sizing:border-box不设定box-sizing:border-box效果设定box-sizing:border-box效果 border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。 1.也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。 2
怪异盒模型、弹性盒子、常见CSS样式（自身样式）
kaitezhimao的博客
05-12 930
在width给定的情况下，怪异盒模型增加padding，border时盒子尺寸不变，会向内挤压内容 区域。在width给定的情况下，标准盒模型增加paddding、border都会扩大盒子的尺寸。// 位置坐标/原点坐标在盒子的左上角。内容区域的大小 = width - 左右的padding - 左右的border。整个盒子的大小 = width + 左右的padding + 左右的border。rgba(0-255 , 0-255, 0-255) //二进制。
CSS盒模型-怪异盒模型笔记-思维导图-案例等
最新发布
商务合作 / 项目定制开发 / 前端一对一培训、答疑
09-30 1082
可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；我们把 padding 和 margin 统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。内间距：指的是盒子的内容与边框的间距（4个边都有内间距）
CSS盒子模型和怪异盒子模型
dx_zheng的博客
07-14 446
盒子模型与怪异模型展示效果差异： 标准盒子(W3c标准)：大小 = width(content) + border + padding + margin 怪异盒子(IE标准)：大小 = width(content + padding + border) + margin 布局采用哪种盒子模型，通过属性box-sizing可以设置： content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default) border-box：borde
CSS3怪异盒模型
weixin_52629158的博客
04-16 577
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。这是一个怪异盒模型box-sizing: border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。border-box 为元素设定的宽度和高度决定了元素的边框盒。
html怪异盒模型,CSS-标准盒模型&怪异盒模型
weixin_33417904的博客
06-08 230
盒模型一共有两种模式：W3C标准模式和IE怪异模式大多数浏览器采用W3C标准模式，IE采用自己的标准当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式在标准模式下，一个块的宽度 = width + padding(左右) + border(左右) + margin(左右)在怪异模式下，一个块的宽度 = width + margin(左右)即...
css之，怪异盒模型和标准盒模型
qq_41648408的博客
02-24 953
标准模型与IE模型 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内边距（padding），边框（border），margin（外边距），和内容（content）。 标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右) 怪异(IE)盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值） 设置盒模型：box-sizing:border-box ...
CSS 盒模型和怪异盒模型
liuqiao0327的专栏
08-15 978
CSS 盒模型和怪异盒模型 一.概念 盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系,CSS定义所有元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区,补白(填充,内边距),边框,边界(外边距) 下面图片说明了盒子模型: Margin(外边距):在元素外边的空白区域,被称为外边距 Border(边框): 元素的边框 Padding(内边距) 元素内容到元素的边框之间的距离,也称补白. Content 盒子的内容 二.标准盒模型和IE盒模型 盒模型又分为标准盒模型(W3
前端入门css3-----怪异盒模型
m0_61656944的博客
01-20 764
关键字：box-sizing: border-box; 怪异盒模型主要的作用： 如图所示，在我们普遍的大盒子里设置三个小盒子，如果里边的小盒子超出了大盒子的宽高就会有一个盒子换到下一行显示。这个是普通盒子默认方法。 怪异模型盒就是为了解决这个问题，当设置了怪异模型盒的时候，里边的小盒子无论设置到怎么样都会被压缩在大盒子里边，达到大盒子不变的效果。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值