关于css:CSS盒子模型基本介绍和用法

39次阅读

共计 1434 个字符，预计需要花费 4 分钟才能阅读完成。

CSS 盒子模型是一个蕴含多个属性的容器, 其中包含边框, 边距, 填充和内容自身。它用于创立网页的设计和布局。它能够用作自定义不同元素布局的工具包。Web 浏览器依据 CSS 框模型将每个元素出现为矩形框。

Box-Model 在 CSS 中具备多个属性。其中一些如下：

边界
边距
填充
内容

下图阐明了盒子模型。

边区：它是框的边距和边距之间的区域。其尺寸由边框的宽度和高度给出。

保证金区域：该区域由边界和边距之间的空间组成。边距区域的尺寸是边距框宽度和边距框高度。将元素与其相邻元素离开是很有用的。

填充区域：它包含元素的填充。该区域实际上是内容区域四周和边框内的空间。其尺寸由填充盒的宽度和填充盒的高度给出。

内容范畴：该区域蕴含诸如文本, 图像或其余媒体内容之类的内容。它受内容边缘的限度, 其尺寸由内容框的宽度和高度确定。

范例 1：

<!DOCTYPE html>
     <head>
         <title>CSS Box Model</title>
         <style>
             .main {
                 font-size:36px;
                 font-weight:bold;
                 Text-align:center;
             }
             .gfg {
                 margin-left:60px;
                 border:50px solid #009900;
                 width:300px;
                 height:200px;
                 text-align:center;
                 padding:50px;
             }
             .gfg1 {
                 font-size:42px;
                 font-weight:bold;
                 color:#009900;
                 margin-top:60px;
                 background-color:#c5c5db;
             }
             .gfg2 {
                 font-size:18px;
                 font-weight:bold;
                 background-color:#c5c5db;
             }
         </style>
     </head>
     <body>
         <div class = "main">CSS Box-Model Property</div>
         <div class = "gfg">
             <div class = "gfg1">lsbin</div>
             <div class = "gfg2">A computer science portal for geeks</div>
         </div>
     </body>
</html>

范例 2：

<!DOCTYPE html>
     <head>
         <style>
         .main {
             font-size:32px;
             font-weight:bold;
             text-align:center;
         }
         #box {
             padding-top:40px;
             width: 400px;
             height: 100px;
             border: 50px solid green;
             margin: 50px;
             text-align:center;
             font-size:32px;
             font-weight:bold;
         }
         </style>
     </head>
      
     <body>
         <div class = "main">CSS Box-Model Property</div>
         <div id = "box">lsbin</div>
     </body>
</html>

输入如下：

更多前端开发相干内容请参考：lsbin – IT 开发技术：https://www.lsbin.com/

查看以下更多 CSS 相干的内容：