CSS盒子模型注意点

最新推荐文章于 2023-04-20 09:28:31 发布
最新推荐文章于 2023-04-20 09:28:31 发布
阅读量827 收藏 1
点赞数
分类专栏： Web 文章标签： CSS 盒子模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soindy/article/details/62425970
版权

CSS盒子模型注意点:
1. 两个盒子是嵌套关系, 如果设置了里面一个盒子的margin-top,外边的盒子也会被顶下来.
2. 可以给外边的盒子添加border属性或者设置overflow: hidden,避免上面现象.
3. 但是如果要控制这种嵌套关系的话,最好不要使用margin属性,因为margin本身就是控制兄弟关系的.而应该使用padding属性.
4. 使用margin: 0 auto; 可以控制水平居中,而且只能控制水平方向.

大大大大大桃子
关注
专栏目录
盒模型-web前端必须掌握的重要基础2
qq_50012618的博客
10-20 185
什么是盒模型呢？ 每一个标签都是一个矩形，像有一个盒子，所以HTML页面的布局有时可以理解为多个盒子组合嵌套排列而成。 而最简单的width和height就抛开不提了。以下是我自己学习后整理出的有关笔记。 一、外边距margin和内边距padding 1、外边距：外边距主要注意的知识点为三部分：它有1~4个值、它是由顺时针赋值的且由上开始、第三部分也是最重要的部分就是叠压现象和塌陷问题了。 下面是一些有关的小知识点： 外边距叠压现象：常态下，兄弟标签间的上下间距以大值为准 。（）（） 塌.
CSS盒子模型的使用以及注意事项
BoBo2333的博客
10-26 634
一、css盒子模型元素及其方向如下图所示： ①边框和内容之间的距离内边距是padding，边框的距离是border，margin外边距，是两个盒子之间的距离。 ②盒子的实际宽度，高度=content+padding+border+margin ③其中的border属性又可以分为：1.边框宽度：border-width，可以自定义，也可以用thin细，medium中，thick粗来表示。2.边框样...
CSS盒子模型注意细节
weixin_44667072的博客
07-16 264
什么是盒子模型： 一个标签就是一个盒子，可以通过6大属性(margin，border,padding，width，height，background-color)来设置这个盒子。 同时，标签分男标签和女标签。对于男盒子来说，6大属性都有作用。对于女盒子来说，width，height不起作用，padding 和 margin在水平方向上有作用，在垂直方向上没有作用。 <!DOCTYPE h...
HTML中CSS盒子模型注意事项及其解决方法
Lee-mumu的博客
02-17 804
1、组成： content -> padding -> border -> margin content：内容区域，由width和height组成 padding：内边距 margin：外边距 注：背景颜色填充到margin以内的区域包括border。 padding不能为负，margin可以为负。 <!DOCTYPE html> <html lang="en...
盒子模型的注意点
fuyun2000的专栏
08-05 662
一般的元素都会产生一个元素框，它包含内容区(width,height)，内边距(padding)，边框(border)，外边距(margin)。他们控制着元素框的整体高度与宽度。位于元素框的中心是一个内容区，子元素就位于这个内容区中。内容区的高度和宽度分别由width和height决定，应该注意的是这里的width，height并不是元素的整体宽与高，只是内容区的高与宽。很多初学者都会错误
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
css盒子模型 css margin 外边框合并
09-25
对于CSS盒子模型的学习，除了了解上述的基础知识点外，开发者还应该熟练掌握如何通过各种CSS选择器来选择元素，并通过CSS属性来控制元素的布局与显示效果。通过不断实践和解决实际问题，才能真正掌握CSS盒子模型的...
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
盒子模型要注意的问题
weixin_34388207的博客
07-23 227
0.默认块级元素会自动向右伸展，块级元素设置width属性后，盒子所占屏幕宽度是width+padding+border+margin 1.标准DOM流里，相邻块级元素之间的竖直距离不是margin-bottom和margin-top的总和，而是两者中的较大者。2.父子关系的盒子，子盒子的margin以父块的content作为参考。（如果子元素的高度超过父盒子的height值，IE和Firefox...
CSS--盒子模型详解
weixin_30569153的博客
03-23 89
目录 图解 盒模型尺寸基准 使用浏览器的开发者工具，查看元素高(宽)度时，遇到的问题 一、图解 说明：由内而外依次是content、padding（内边距）、border（边框）、margin（外边距）。 举个例子：一个快递车里放了许多快递包裹（盒子包装的），每个包裹里面又放了不同的东西。 content：真正容纳其他东西的区域。比如快...
CSS盒子模型
无区新手的博客
05-09 2403
1.&lt;div&gt;标记     div是英文division的缩写，意为“分割、区域”。&lt;div&gt;标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。&lt;div&gt;与&lt;/div&gt;之间相当于一个“盒子”，可以设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标记都...
盒模型知识点汇总（附实例、图解）
weixin_45135068的博客
07-31 1420
目录 边框属性 1.1 表格边框 1.2 圆角框的使用 1.3 关于input标签边框默认初始化的内容 内边框属性 外边距 3.1 盒子水平居中 3.2 margin垂直合并现象 3.3 margin包含塌陷现象及解决方法 关于盒子大小的计算 盒子模型布局稳定性 css3盒模型 盒子阴影box-shadow 页面初始化 正文 边框属性 /* 设置上边框的宽度 */ border-top-width: 10px; /* 设置上边框的颜色 */ border-top-co
第四章.盒子模型重难点详解(下)
liuzizhoufaith的博客
03-31 374
盒子模型(box model)也叫框模型 CSS将页面中的所有元素都设置为了一个矩形的盒子. 将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
第四章.盒子模型重难点详解(上)
liuzizhoufaith的博客
03-31 230
盒子模型(box model)也叫框模型 CSS将页面中的所有元素都设置为了一个矩形的盒子. 将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
教你吃透CSS的盒子模型(Box Model)
孙叫兽的博客
07-21 689
目录 CSS 盒子模型(Box Model) 元素的宽度和高度 浏览器的兼容性问题 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外.
css盒模型重点知识点
好记性不如烂键盘
04-23 598
一、思考 基本概念：基本模型 + ie模型； 那么有几个问题延伸出来了： 这两个模型的区别是什么？ css中如何设置这两个模型？ js如何获取模型的宽高？ 肯定还有相关的一些实例题（根据盒模型解释边距重叠）； BFC与IFC; 二、两种模型的区别； 区别； 标准盒模型的宽度就仅仅是content的宽度；而IE模型的宽度是指的content+padding+bo...
CSS学习知识整理（四）Css 盒子模型
12程序猿的博客
07-07 253
Css 盒子模型 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 不同部分的说明： Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 ...
一个简单的盒模型嵌套---一个大盒子里面嵌套两个中盒子，右边中盒子嵌套六个小盒子
世上无难事，只要肯攀登
04-20 3870
六个小盒子下面有一点空，再加一个盒子来存放文本。
css盒子模型知识点
最新发布
12-06
CSS盒子模型的知识点包括以下内容： 1. 盒子模型的四个部分：内容区域、内边距、边框和外边距； 2. 盒子模型的属性：width、height、padding、border、margin等； 3. 盒子模型的标准盒模型和IE盒模型； 4. 盒子模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值