2020-12-28怪异盒模型

最新推荐文章于 2024-09-08 19:17:17 发布
最新推荐文章于 2024-09-08 19:17:17 发布
阅读量59 收藏
点赞数
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43884814/article/details/111876925
版权

怪异盒模型
1、box-sizing:border-box
2、默认值是content-box
3、使用范围：
    边框内边距定死，内容会发生变化时使用怪异盒模型
    内容定死，外面边框和一些装饰会变使用标准盒模型
    两个都变，最好使用怪异盒模型

盒模型
外边距重叠，谁大听谁的，尽量避免，不要互相挤

夜寐秋明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子模型--标准盒模型和怪异盒模型
weixin_48156583的博客
08-10 210
盒子模型由content（内容）、margin（外边距）、padding（内边距）、border（边框）组成。这个div实际宽（520px）= content（宽度）+ padding + border。2.在元素style中添加box-sizing：border-box；DOCTYOE html>在ie678下触发怪异盒模型。style中宽高就是这个div的宽度。...
css-标准盒模型和怪异盒模型
fightingcoder419的博客
11-18 411
盒子模型定义 网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的...
html怪异盒模型,CSS-标准盒模型&怪异盒模型
weixin_33417904的博客
06-08 190
盒模型一共有两种模式：W3C标准模式和IE怪异模式大多数浏览器采用W3C标准模式，IE采用自己的标准当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式在标准模式下，一个块的宽度 = width + padding(左右) + border(左右) + margin(左右)在怪异模式下，一个块的宽度 = width + margin(左右)即...
Html-标准盒子模型和怪异盒子模型
可可的博客
11-16 1618
Html-盒子模型 一、概念篇 标准盒子模型css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，而且，每个框影响着其他元素框的位置和大小。 盒子模型包含了 元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。 标准盒子模型： 标准 W3C 盒子模型的范围包括 margin、bo
05 - 标准盒模型和怪异盒子模型
xyyojl的博客
07-27 1010
两种盒子模型 普通盒模型: 普通盒模型触发方式: box-sizing: content-box; 宽高到底怎样计算? 正常情况:(普通盒模型)内容盒子 盒子的整体宽度 = width + border + padding/左border+左padding+width+右padding+右border 盒子的整体高度 = height+ border + padding/上b...
前端入门css3-----怪异盒模型
m0_61656944的博客
01-20 701
关键字：box-sizing: border-box; 怪异盒模型主要的作用： 如图所示，在我们普遍的大盒子里设置三个小盒子，如果里边的小盒子超出了大盒子的宽高就会有一个盒子换到下一行显示。这个是普通盒子默认方法。 怪异模型盒就是为了解决这个问题，当设置了怪异模型盒的时候，里边的小盒子无论设置到怎么样都会被压缩在大盒子里边，达到大盒子不变的效果。 ...
CSS3学习笔记三---怪异盒模型 | 弹性盒*
Flora_hsx的博客
10-23 1458
CSS3学习笔记三---怪异盒模型 | 弹性盒*，怪异盒内容比较重要，常用，需要多练习。
05-标准盒模型与怪异盒模型
小凡子的博客
08-04 151
标准盒模型与怪异盒模型 1、盒子模型（box model） 在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、 边框（border）、外边距（margin），图片如下： 2、标准盒模型与怪异盒模型的区别 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0cZ0uiD-1628076542703)(https://i.loli.net/2021/08/04/TZMNjbIDX1rCilO.png)] 标准盒模型（W3C盒子模
CSS-标准盒模型和怪异盒模型
种子不服古怪的博客
09-06 204
这是一个目录~概述标准盒模型怪异盒模型 概述 标准盒模型:由w3c定义的标准的盒子模型,盒子的宽度为= margin2+padding2+border2+width 怪异盒模型(也称为IE盒模型):在IE浏览器中的盒子模型,盒子的宽度为= margin2 + content宽度,其中content宽度为padding2+border2+ width 下面是同一个html代码在不同浏览器中的显示 <!DOCTYPE html> <html lang="en"> <head&gt
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
前端简单实现海贼王人物展示栏-运用border-box怪异盒模型
weixin_52263227的博客
11-03 215
之前复习面试题的时候遇到盒模型的题目，CSS3中盒模型包含两种:标准盒模型 与 IE盒模型 其中IE盒模型（怪异盒模型）的width与height范围则包含了 border,padding与content 可以通过修改元素的boxzing属性来改变元素的盒模型 box-sizeing: border-box IE盒模型 首先用代码简单实现一下box-sizeing: border-box IE盒模型 首先简单创建一个宽高皆为200px的div盒子 ...
自学前端第十天 : CSS怪异盒子模型
weixin_47592060的博客
05-04 2493
一.怪异盒子模型 怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换 select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */ } 怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度 二.标准盒子和怪异盒子: 1.标准模型下 宽度计算方式
html css jquery选项卡 代码练习小项目
Json的知识梦工厂
09-08 475
在学习 html 和 css jquery 结合使用的时候 做好是能尝试做一些简单的小功能，来提高自己的 逻辑能力，熟悉代码的编写语法。下面分享一段代码 使用html css jquery选项卡 代码练习。代码实现起来还是比较简单的 有兴趣的 兄弟们可以尝试练习以下。html 使用的是 div dl dd标签实现的。简单的写了一些 css 样式。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1589
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1114
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
CSS实现优惠券透明圆形镂空打孔效果等能力学习
yiguoxiaohai的博客
09-04 679
CSS实现优惠券透明圆形镂空打孔效果等能力学习
前端开发中的CSS命名规范及BEM实践
官方推荐
09-08 1165
前端开发中的CSS命名规范及BEM实践
CSS —— display属性
最新发布
m0_73557953的博客
09-08 458
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"（将元素转换为行内块元素）HTML中标签元素大体被分为三种类型：块元素、行内元素和行内块元素。（将元素作为弹性盒子显示）（弹性布局）2.水平方向，占满它父元素的可用空间（宽度是父级的100%）如果前面的兄弟元素是inline模式，往往会在同行显示。（将元素转换为行内元素）如果前面的兄弟元素是block模式，则会在不同行显示。（将元素作为网格容器显示）（将元素作为表格显示）行内块元素：inline-block。
标准盒子模型和怪异盒子模型
05-02
在 CSS 中，可以通过设置 `box-sizing` 属性来指定盒子模型的类型，其中 `content-box` 为标准盒子模型，`border-box` 为怪异盒子模型。默认情况下，元素采用的是标准盒子模型。 使用怪异盒子模型可以方便地控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值