ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

盒模型

2022-09-05 14:03:26  阅读:198  来源: 互联网

标签:box 模型 height content 设置 border


CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。

 

根据盒子大小的计算方式不同盒模型分成了两种,

标准盒模型和怪异盒模型。

 

标准模型,

给盒设置 `width` 和 `height`,实际设置的是 content box。`padding` 和 `border `再加上设置的宽高一起决定整个盒子的大小。

 

怪异盒模型,

给盒设置 `width` 和 `height`,包含了`padding`和`border `,设置的 `width` 和 `height`就是盒子实际的大小

 

默认情况下,盒模型都是标准盒模型

 

设置标准盒模型:`box-sizing:content-box`

设置怪异盒模型:`box-sizing:border-box`

标签:box,模型,height,content,设置,border
来源: https://www.cnblogs.com/yueyiviolet/p/16657871.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有