CSS复习之盒子模型有几种？

最新推荐文章于 2024-08-03 09:43:52 发布
最新推荐文章于 2024-08-03 09:43:52 发布
阅读量616 收藏
点赞数
分类专栏： css笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44000173/article/details/118613182
版权

CSS复习之盒子模型有几种？

第一种W3C的标准盒子模型
第二种IE标准的盒子模型（怪异盒模型）

两种盒子的宽度和高度不同

w3c标准盒子的宽度和高度是指内容的宽度和高度 content
怪异盒模型的宽度和高度指的是（content + border +padding）

两种盒子的大小计算方法相同

标准盒模型下盒子的大小 = content + border + padding + margin
怪异盒模型下盒子的大小=content + border + padding + margin
在这里插入图片描述

小荣的网络开发日志
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS盒模型
weixin_47782618的博客
04-09 1392
1. 盒模型的概念 CSS盒模型本质上是一个盒子，封装着周围的HTML元素，它包括外边距margin，边框border，内边距padding和实际内容content。 把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。 2. 标准盒模型 根据W3C的规范，盒子实际内容content的宽度和高度等于我们设置的width和height，而盒子总宽度=width+padding+border+mar
CSS学习笔记10——盒子模型
lxy95512的博客
01-13 170
页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布顾页面。 网页布局过程: 1.先准备好相关的网页元素，网页元素基本都是盒子Box。 2.利用CSS设置好盒子样式，然后摆放到相应位置。 3.往盒子里面装内容。 盒子模型组成 盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子 ，也就是一个盛装内容的容器。 CSS好模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。 边...
css的盒子模型
weixin_48884617的博客
08-27 1239
css的盒子模型
盒子模型CSS
最新发布
2201_76081438的博客
08-03 878
盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。
CSS盒子模型有哪几种？盒子模型的组成又有那些？
胖蔡叨叨叨
10-25 2044
CSS盒子模型（Box Model）将所有的HTML元素都看做盒子，并通过盒子的组成对HTML进行布局绘制设计。那么CSS的盒子模块到底有哪几种呢？盒子模型它的组成又有哪几部分呢？接下来，我就通过这边文章对来一一解读。为了方便读者了解盒子模型，以及不同的盒子模型之间的区别，我会在阅读的顺序上做一个小小的调整。即先介绍盒子模型的组成，之后介绍盒子模型的种类。
CSS 的盒子模型有哪些？
SunGuangHuiM的博客
07-04 500
CSS 的盒子模型有哪些？ （1） 两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和 pading; （2） 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
CSS基础——盒子模型
qq_24679307的博客
02-23 227
CSS基础——盒子模型 在接触HTML 的过程中，除了各种标签、属性、声明之外，必不可少的还需要对页面的排版布局来考虑。此时盒子模型就显得尤为重要了。 ​ 顾名思义，盒子模型就是在CSS中可以将HTNL标签当成一个个的盒子，通过盒子的内外边距，边框和内容，来协调控制各内容的排版。 标准盒模型组成： 内容区content + 填充补白（里面的)padding + 边框 border+外边距（m...
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1174
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
css企业开发经验、习惯，盒子模型，层模型
Nawkham的博客
03-20 335
css企业开发经验、习惯，盒子模型，层模型 复习 <html> <head> <meta charset="utf-8"> <title>lesson5</title> <link rel="stylesheet" type="text/css" href="css/lesson5.css"> <...
web前端开发学习总结，CSS盒子模型居中方法
m0_60125017的博客
07-23 201
交集选择器 并集选持器 后代选择器 子元素选择器 相邻兄弟选择器 属性选择器 交集选择器 交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 ID 选择器，两个选择器之间必须连续写，不能有空格。 交集选择器选择的元素必须是由第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的 ID 名或类名。交集选择器选择的元素的样式是三个选择器样式，即第一个选择器; 语法： 元素选择器 . 类选择器｜ #ID 选择器 {   属性.
CSS盒模型居中方法，附详细答案
m0_57501956的博客
06-07 223
前言 最近在准备面试，然后复习下之前写过的项目，书籍，笔记，文章。一看很多知识点都没有印象，最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的。有些开始怀疑人生了。 好了，废话少说，离金三银四求职高峰期没多久了，我把我收集到的资料分享给大家。也祝到家有个好工作。(本文资料 适合0-2年) 从入门到精通，包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。 文章中所列主要为大纲部分，详细内容可以在文末自行获取哈！ 如果
CSS盒模型居中方法，看这篇足矣了！
m0_57501956的博客
06-07 218
开始 我大学读的是大专，在学校学的是机电一体化。临近毕业的时候选择了学习web前端技术，因为做机电实在又累工资又低，而我更喜欢坐办公室的工作，有空调吹，我很现实，就是想多赚一点钱。到现在做了两年前端的小程序员，月薪是13K，经历过两次跳槽，第一次跳槽拿到了10K的offer，第二次跳槽拿到现在13K的offer。 选择学习前端之前我也有想过要学什么，最后我为什么选择学习前端呢，因为当时这门技术比较火，自己对于计算机也是有兴趣，薪资待遇也不错，并且相比较java后端，前端更容易入门。 在学习过程中也有遇到许多
css盒模型：标准盒模型、怪异盒模型
m0_74114605的博客
03-22 1282
目前大部分主流的浏览器支持的是W3C标准盒模型。
Css的两种盒模型
r67686的博客
09-15 1112
在进行网页的搭建时，通常会用到很多的标签，可以形象的把这些标签看成是一个个矩形，这些矩形盒子搭建成了网页。在描述盒子模型前先来介绍一下盒子的一些属性。 盒子通常指的是块元素（但是行内元素在浏览器的查看器内也会出现盒子模型的图片），一个完整的盒子由四个部分组成，它们分别是： margin 外边距 代表盒子四周的区域。相邻元素的边距会合并 border 边框 ​设定介于padding的外边缘与margin的内边缘之间，默认值为0 padding 内边距 ...
css盒子模型有几种?以及盒模型设置？
吴冬雪的博客
05-11 8512
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒子模型分为两种： 第一种是W3c标准的盒子模型（标准盒模型） 第二种IE标准的盒子模型（怪异盒模型） 当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏
css中的盒子模型
L_csdn123的博客
02-15 1319
css中的盒子模型
HTML中有哪些模型,css的盒模型有哪些？
weixin_34377697的博客
06-07 282
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围...
css三种盒模型总结
码上行动
06-17 1216
文章目录一，标准盒模型二，怪异盒模型三，弹性盒模型（1）设置主轴的方向：（2）设置内容换行（默认元素会自动挤压、不换行）（3）设置主轴的排列方式（4）设置侧轴的排列方式（5）设置多行内容排列（6）align­self属性（单个定义时用）（7） 给灵活元素设置的样式（8）flex­grow属性（9）flex­shrink属性（10）flex­basis=width属性（11）flex属性总结 一，标准盒模型 点击查看标准盒模型介绍 box-sizing：content-box;（标准盒模型） 盒子的总宽度
css盒模型有几种？分别是？
05-19
CSS盒模型有两种： 1. W3C盒子模型（标准盒子模型）：它将width和height属性应用到内容区域，而不包括边框（border），内边距（padding）和外边距（margin）。 2. IE盒子模型（传统盒子模型）：它将width和height属性应用到内容区域，包括边框（border）和内边距（padding），但是不包括外边距（margin）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值