css的盒模型

已于 2022-08-27 19:16:10 修改
阅读量294 收藏 1
点赞数
分类专栏： css html 文章标签： css 前端 html
于 2019-04-09 15:12:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15601471/article/details/89048780
版权
css 同时被 2 个专栏收录
5 篇文章 2 订阅
订阅专栏
html
2 篇文章 1 订阅
订阅专栏

基本概念

盒模型由内向外分别是content、border、padding和margin。
盒子模型有两种一种是标准模型，一种是IE模型。

标准模型

标准模型

IE模型

在这里插入图片描述
标准盒模型中，盒模型的宽高只是内容（content）的宽高，
IE模型中，盒模型的宽高指的是，内容（content)+内边距（padding)+边框(border)的总宽高。

盒子的实际宽度 = content+padding+border+margin

通过css控制

box-sizing:content-box; // 标准模型(默认)

box-sizing: border-box; // IE模型
undeflined
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css盒子模型
08-22
CSS盒子模型有两种类型：W3C标准盒子模型和IE盒子模型（也称为怪异盒模型）。在标准模型中，元素的总宽度和高度等于内容区域加上内边距和边框；而在IE模型中，总尺寸仅包含内容区域，内边距和边框被加到了总宽度和...
CSS 的 border-radius
星环
08-19 626
CSS的border-radius border-radius: 10px 10px 10px 10px; 注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果只有三个值则依次为 左上角，右上角和左下角，右下角，如果只有两个值则依次为左上角和右下角，右上角和左下角。 上面的写法等效于 border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;
transform-style ~ animation (css3星环运动)
chenxi1025的博客
08-19 790
transform--style属性指定嵌套元素是怎样在三维空间中呈现。 值 描述 flat 子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置。   然后我就自己用这个属性写咯一个比较炫的星环动画。 html代码：
利用css写一个土星圆环
qq_52303179的博客
05-17 186
利用css写一个土星圆环 第一个divoutBox我们是用于制作圆环，第二个divcircle我们是用于制用球，同时在CSS里面，我们使用after的伪元素，实现了外边的环 整个案例效果图 整个案例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS 盒子模型
12-14
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明：...
CSS中的行盒（line-boxes）和行内盒子（line-box）
星环
09-03 3791
CSS中的行盒（line-boxes）和行内盒子（line-box）以及盒模型的关系。
CSS margin-top溢出的问题
星环
06-25 3006
html如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 357
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
flex：1
m0_47999208的博客
07-25 261
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
css性能优化的方法
jht_520的博客
07-21 370
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
css 作业 2
没有 bug 的代码是不完美的！
07-25 490
写完了
CSS相关记录
oThrowsException的博客
07-24 628
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
智能编程，一触即发：使用AIGC优化CSS——提升前端开发效率与质量
最新发布
程序边界
07-25 1129
利用关键帧创建动画使用网格和Flexbox等布局技巧对表单元素进行样式化，包括单选按钮嵌入字体以及与排版相关的样式利用伪元素和媒体查询进行条件样式化Martine Dowden是一位作家、演讲者和能力卓越的首席技术官。Michael Gearon是一位用户体验设计师和前端开发者，曾与许多知名品牌合作过。本书通过12个项目逐步引导设计师和开发者学习CSS。
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1212
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
CSS的常见难见
weixin_62432037的博客
07-24 1032
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
Programming in the Large CSSE2002
w976j_的博客
07-25 465
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
CSS盒模型详解：布局设计的关键
通过掌握CSS盒模型，开发者可以灵活地创建出响应式设计，适应不同设备和屏幕尺寸，确保网站的美观与功能性。在实际开发过程中，熟练运用盒模型的各种属性和概念，能够提升页面的可维护性和用户体验。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值