盒子模型的简介
创始人
2024-05-30 01:36:40
0次
盒子的组成
一个盒子由外到内可以分成四个部分：
margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是css属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
盒子的类型
- 第一种是W3C标准的盒子模型（标准盒模型）
- 第二种IE标准的盒子模型（怪异盒模型）
标准盒模型与怪异盒模型的表现效果的区别之处
- 标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度
W3C标准盒模型下盒子的大小 = width （ content ） + border + padding + margin
- 怪异盒模型中的width指的是内容、边框、内边距总的宽度；height指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小 = width （ content + border + padding ） + margin
如何在CSS 设置这两个模型
标准盒模型：
box-sizing: content-box怪异盒模型：
box-sizing: border-box定位：
- 绝对定位（参考点是左上的原点）
position:absolute;
(跟top/bottom/left/right联合使用)
- 相对定位（参考点是本身的位置）
position:relative;
(跟top/bottom/left/right联合使用)
- 固定定位
position:fixed;
(跟top/bottom/left/right联合使用)
包含块的设置：
设置为包含块的元素，参考点就是这个元素左上角的一点，
移动的范围就是包含块元素的大小
- 浮动定位
float:none/left/right;
注意：如果有一个元素要浮动，相邻的元素也需要加上浮动！！！
- 清除浮动：
clear:left/right/both;
注意：如果想要此元素不浮动，就使用
- 溢出属性：
overflow:hidden/scroll/visibility(默认显示);
text-overflow:ellipsis;(文本超出后用…显示)
- 层叠
z-index:数字（不要单位）;
数字越大越在上面，越小越在下面
- 设置居中：
margin:0px auto;
相关内容
热门资讯
秘鲁总统任命前司法部长阿拉纳为...
秘鲁总统博鲁阿尔特（左）和新任总理爱德华多·阿拉纳（右）在宣誓仪式上新华社利马5月14日消息，秘鲁总...
原油：WTI下跌 美国原油库存...
原油下跌，此前有政府报告显示，美国原油库存创两个月来最大增幅，抵消了世界两大经济体贸易战暂停带来...
长江精工钢结构（集团）股份有限...
股票简称：精工钢构 股票代码：600496 编号：临2025-065转债简称：精工转债 转债代码...
山东高速路桥集团股份有限公司关...
证券代码：000498 证券简称：山东路桥 公告编号：2025-42山东高速路桥集团股份有限公司关...
丽珠医药集团股份有限公司关于回...
证券代码：000513、01513 证券简称：丽珠集团、丽珠医药 公告编号：2025-042丽珠医药...
因存在安全隐患，福特公司召回约...
央视记者当地时间5月14日获悉，福特汽车公司宣布，由于存在可能导致车辆在行驶过程中丧失制动功能、增加...
“土原料”变“潮产品”
青海兄弟乳业生物科技有限公司张成龙获“2025 IMW世界甜品巧克力&手工冰淇淋大赛暨2025意大利...
顺我者富 逆我者贫——解读特朗...
美国众议院共和党提出的新税收法案草案中，富人和企业投资者明显受益，而移民、顶尖私校等被特朗普长期...
青稞“链”上黄金道 产业升级加...
5月13日，海东市互助土族自治县青稞产业园内，青稞香飘满链。生产线轰鸣声中，金黄青稞粒经低温烘焙化作...
青海多措并举维护广告市场良好秩...
本报讯 （记者 董洁） 5月14日，记者从青海省市场监督管理局获悉，为切实维护全省广告市场秩序，保障...
厦门钨业股份有限公司关于向控股...
证券代码：600549 证券简称：厦门钨业 公告编号：临-2025-046厦门钨业股份有限公司关于...
安徽古麒绒材股份有限公司首次公...
安徽古麒绒材股份有限公司（以下简称“发行人”）首次公开发行不超过５，０００万股人民币普通股（Ａ股）（...
中蒙第二条跨境铁路开工
新华社呼和浩特5月14日电（记者 赵泽辉） 14日，中蒙两国能源合作重要通道——中蒙甘其毛都至嘎...
匠心与创新
本报记者 谭梅 刘珂瑜在青海兄弟乳业生物科技有限公司的生产车间里，看着张成龙专注调试冰淇淋配方的身影...
持续推动优质医疗资源扩容下沉
本报乌鲁木齐讯（全媒体记者 郑娅莉） 记者从自治区人民政府新闻办公室5月13日召开的新闻发布会上...
芜湖三联锻造股份有限公司关于投...
证券代码：001282 证券简称：三联锻造 公告编号：2025-031芜湖三联锻造股份有限公司关于...
国内首套氧化铝焙烧智能系统投运
原标题：国内首套氧化铝焙烧智能系统投运（记者滕继濮 实习记者夏天一 通讯员王晶）记者14日从中铝国际...
“头雁”竞飞强交流
经验互学促...
“我常常在想，作为当代年轻人该如何实现自己的价值？到村任职的大半年时间，让我找到了答案——将个人理想...
《国务院2025年度立法工作计...
新华社北京5月14日电 经党中央、国务院同意，国务院办公厅日前印发《国务院2025年度立法工作计划...
我省举办《信访工作条例》集中宣...
本报讯 （记者 张晓英） 5月14日，省信访工作联席会议办公室、省信访局联合西宁市县两级信访部门在西...