css的盒模型

已于 2022-08-27 19:16:10 修改
阅读量331 收藏 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
关注
专栏目录
利用css写一个土星圆环
qq_52303179的博客
05-17 253
利用css写一个土星圆环 第一个divoutBox我们是用于制作圆环，第二个divcircle我们是用于制用球，同时在CSS里面，我们使用after的伪元素，实现了外边的环 整个案例效果图 整个案例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
CSS盒模型
weixin_47782618的博客
04-09 1433
1. 盒模型的概念 CSS盒模型本质上是一个盒子，封装着周围的HTML元素，它包括外边距margin，边框border，内边距padding和实际内容content。 把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。 2. 标准盒模型 根据W3C的规范，盒子实际内容content的宽度和高度等于我们设置的width和height，而盒子总宽度=width+padding+border+mar
CSS 的 border-radius
星环
08-19 676
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 805
transform--style属性指定嵌套元素是怎样在三维空间中呈现。 值 描述 flat 子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置。   然后我就自己用这个属性写咯一个比较炫的星环动画。 html代码：
css盒子模型
2301_80840100的博客
06-22 3415
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS盒子模型
a13641376265的博客
08-06 814
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
CSS 盒子模型
m0_52861684的博客
08-28 1556
CSS 盒子模型总结。
深入理解 CSS 盒子模型
My_wife_QBL的博客
07-08 845
CSS 盒子模型是网页布局的核心概念，理解盒子模型的各个组成部分及其计算方式，对于进行精确的网页布局至关重要。通过设置widthheightpaddingborder和margin属性，可以控制元素的尺寸和位置。使用box-sizing属性可以选择不同的盒子模型，简化布局计算。在实际开发中，可能会遇到一些常见问题，如外边距重叠、盒子模型的兼容性问题和元素尺寸超出预期。通过合理使用 CSS 属性和技巧，可以有效解决这些问题，创建出美观、高效的网页布局。
CSS盒模型布局
m0_74995879的博客
04-16 1149
css盒模型喔！
理解CSS盒子模型及其应用
WXLink的博客
09-10 2221
在CSS中，盒子模型可以被理解为每一个HTML元素都被看作一个方形的盒子。内容区（Content）：盒子的实际内容区域，可以是文字、图片或其他任何HTML元素。内边距（Padding）：内容区与边框之间的空间。内边距是透明的，会影响到盒子的整体大小。边框（Border）：围绕内容区和内边距的可视边界。边框的宽度和样式可以根据设计需求来调整。外边距（Margin）：边框外部的空间，用于盒子与其他盒子之间的距离。理解CSS盒子模型是成为前端开发者的基石之一。
boxmodel:CSS盒模型编辑器界面构建器输入试用
05-14
BoxModel-CSS盒子模型编辑器 BoxModel是一个jQuery插件，可帮助用户创建紧凑的表单输入，以编辑html表单中的box模型css。 它可以提交几个详细信息，例如单独的值以及可以在CSS块中使用的组合的优化单位。 它支持鼠标...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
CSS+盒模型,css盒模型面试题,HTML源码.zip
10-15
**CSS盒模型** 在网页设计中，CSS（层叠样式表）盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距（padding）、边框（border）以及外边距（margin）组成，...
CSS中的行盒（line-boxes）和行内盒子（line-box）
星环
09-03 4177
CSS中的行盒（line-boxes）和行内盒子（line-box）以及盒模型的关系。
CSS margin-top溢出的问题
星环
06-25 3042
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="...
黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）
最新发布
m0_63763668的博客
11-04 796
浮动属性 float,left 表示左浮动,right 表示右浮动浮动后的盒子顶对齐浮动后的盒子具备行内块特点父级宽度不够,浮动的子级会换行浮动后的盒子脱标子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果双伪元素法浮动本质作用是实现图文混排效果。
深入理解CSS盒模型及面试常见题解析
了解CSS盒模型对于前端开发人员来说至关重要，尤其在设计响应式网站布局时更显重要。 盒模型由以下几部分组成： 1. 内容区域（content area）：元素的实际内容，如文本、图片等，大小可通过CSS的width和height属性...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值