css的两种盒模型

最新推荐文章于 2024-06-16 11:49:47 发布
最新推荐文章于 2024-06-16 11:49:47 发布
阅读量77 收藏
点赞数
分类专栏： # CSS3学习笔记 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43613849/article/details/121217664
版权

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

切换盒模型也很简单，这里需要借助css3的box-sizing属性

  • box-sizing: content-box 是W3C盒子模型
  • box-sizing: border-box 是IE盒子模型

W3C的标准盒模型这里写图片描述

 IE的盒模型这里写图片描述

 

Doe
关注
专栏目录
css盒子模型图解
09-25
本文将详细介绍CSS盒子模型的基本概念、组成部分及其两种不同的表现形式：标准W3C盒子模型与IE盒子模型。 #### 二、CSS盒子模型概述 CSS盒子模型是基于矩形的概念来描述页面元素布局的。每个HTML元素都可以被视为...
CSS3弹性盒模型开发笔记（三）
12-03
**CSS3弹性盒模型**，也称为Flexbox，是一种现代的布局模式，它允许开发者更加灵活地处理元素的排列和对齐方式，特别是在响应式设计中。本文将深入讲解两个关键属性：`box-pack` 和 `box-align`，以及它们在处理弹性...
CSS的两种盒子模型
m0_65282357的博客
03-30 211
如下图，先建一个高为300px，宽为400px的div，并设置5px的边框和10px的padding 执行这个代码不会显示出300*400的盒子，而是呈现出了一个330*430的盒子 如上图所示，在这个盒模型中里面还包括margin,border,padding 而引起上面效果的原因是因为css两种盒子模型的不同 1.W3C的标准盒模型 在标准的盒子模型中，width指content部分的宽度 2.IE的盒模型 在IE盒子模型中，width表示content+paddin...
Css的两种盒模型
r67686的博客
09-15 1132
在进行网页的搭建时，通常会用到很多的标签，可以形象的把这些标签看成是一个个矩形，这些矩形盒子搭建成了网页。在描述盒子模型前先来介绍一下盒子的一些属性。 盒子通常指的是块元素（但是行内元素在浏览器的查看器内也会出现盒子模型的图片），一个完整的盒子由四个部分组成，它们分别是： margin 外边距 代表盒子四周的区域。相邻元素的边距会合并 border 边框 ​设定介于padding的外边缘与margin的内边缘之间，默认值为0 padding 内边距 ...
CSS两种盒模型(标准盒模型&IE盒模型)
Kar29的博客
09-13 7087
CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。 CSS盒模型分为两种：标准盒模型、IE盒模型（也成为怪异盒模型）。 两种盒模型的区别在于他们的总宽度的计算公式不一样。 在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。 标准盒模型 width = 内容（content）的宽度 height = 内容（content）的高度 总宽度：width + margin（左右） + padding（左右） + border
CSS两种盒模型总结
hui_style的博客
07-26 1470
总结CSS中的两种盒模型的区别，以及从ie浏览器作为切入点，分析两种盒模型的兼容性。
CSS的两种盒子模型（标准盒模型、怪异盒模型）
最新发布
2301_79792510的博客
06-16 677
1.W3C的标准盒模型所有HTML元素可以看作盒子，在CSS中，"box"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）边框（border）内边距（padding）实际内容（content）四个属性盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
CSS两种盒模型详解：计算公式+代码示例
大剑师兰特的GIS世界
03-16 1129
CSS3 引入了 `box-sizing` 属性，可以切换这两种盒模型的行为。默认情况下，大多数元素遵循标准盒模型，但可通过设置 `box-sizing: border-box` 改为怪异盒模型。这对于解决跨浏览器的盒模型兼容问题非常有用。
CSS两种盒模型以及区别、CSS合并方法、CSS文件合并方法、label的作用是什么？如何美化CheckBox?
星辰迷上大海的博客
01-02 1172
CSS 中有两种盒模型：标准盒模型（content-box）和IE 盒模型（border-box）。主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE 的 content 部分把 border 和 padding 计算了进去，而 W3C 盒模型并不会。使用 CSS 的 box-sizing 属性可以指定盒模型的类型，将其设置为 border-box 可以启用 IE 盒模型。
css的盒子模型
weixin_48884617的博客
08-27 1253
css的盒子模型
HTML DIV+CSS两种盒模型的区别_附实验源代码.zip
01-08
HTML DIV+CSS两种盒模型的区别_附实验源代码.zip 标准的W3C盒模型与IE盒模型区别挺大的
CSS+盒模型,css盒模型面试题,HTML
09-10
CSS盒模型有两种不同的实现方式，即标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。两者的主要区别在于元素的总宽度和高度的计算方式。 - **标准盒模型**：元素的总宽度和高度只包括内容区域的宽度和高度，内...
引入css的四种方式
weixin_43613849的博客
02-26 3532
1、内嵌式 2、外联式 3、 行内样式 4、import 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid..
css中实现单行多行文字截断
weixin_43613849的博客
05-09 2060
1、单行文本截断 text-overflow 文本溢出我们经常用到的应该就是 text-overflow: ellipsis 了，相信大家也很熟悉，只需轻松几行代码就可以实现单行文本截断。 div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 实现效果： 属性浏览器原生支持，各大浏览器兼容性好，缺点就是只支持单行文本截断，并不支持多行文本截取。 适用场景：单行文字截断最简单实现...
如何实现浮动元素水平居中
weixin_43613849的博客
02-26 1068
1、错误示范 当HTML结构如下所示： <div id="container"> <div class="left">left</div> </div> 同时，CSS这样写： #container{ width:400px; height:110px; border:1px solid black; } #container div{ width:100px; height:100px; float:left; ...
1、BFC———块级格式化上下文
weixin_43613849的博客
04-07 276
1、css定位方案 想要了解BFC，首先我们先认识一下CSS的定位方案。 定位方案：一个盒元素可以根据3种定位方案中的一种来布局。这三种方案分别是：正常文档流布局, 浮动布局 和 绝对定位布局。 1、正常文档流布局 2、浮动布局 3、绝对定位布局 2、BFC的介绍 我们要学习的BFC正数属于正常文本流布局的，可以把BFC看成页面中的一个渲染区域，它有自己的渲染规则：简单来说，BFC可以看作元素的一个属性，当元素拥有BFC的时候，这个元素可以看成是隔离了的独立容器，容器里...
3、position
weixin_43613849的博客
04-08 167
position的作用是将元素在页面中定位。设定值包括 static、absolute、relative、fixed 和 sticky 五个。 1、static HTML里面所有元素的position的默认值都是static 下面是设置一个div的position为static的显示效果，static会根据HTML排版的流程（flow）移动，且static元素对于top、left、right、bottom设定值不会生效 上图应该class等于height的类高度为120px，所以class
4、flex布局
weixin_43613849的博客
04-13 153
1、认识flex布局 lex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 首先明确两个概念：①开启了flex布局的元素叫flex container ②flex container里面的直接子元素叫做flex items 2、开启flex布局的方式 设置display的属性为flex或者inline-flex可以称为flex container。①flex：flex container以b...
深入剖析CSS弹性盒模型Flex布局
弹性盒模型的两种容器：块级伸缩容器和内联伸缩容器。块级伸缩容器是指 `display: flex` 的容器，而内联伸缩容器是指 `display: inline-flex` 的容器。两者的区别类似于 block 和 inline 的区别。 flex 布局提供了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值