CSS盒子模型简介

最新推荐文章于 2024-07-27 09:56:28 发布

肉锅盔

最新推荐文章于 2024-07-27 09:56:28 发布

阅读量6.3k

点赞数 2

本文链接：https://blog.csdn.net/languagelmz/article/details/79948864

版权

1.基本概念

首先，什么是盒子模型呢？所有的html元素都可以看作是盒子，顾名思义，就像是对元素进行了一个包装，丰富了元素的内容，方便了设计与布局。盒子模型（Box Model）具体包括了外边距（Margin），边框（Border），内边距（Padding）和内容（Content）。

下面以具体的实例来说明。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ECharts</title>
<meta name="description" content="">
<meta name="keywords" content="">

</head>
<style type="text/css">
/* common styling */
 #box {
    width: 100px;
    border: 20px solid blue;
    padding: 20px;
    margin: 20px;
 }
</style>
<body>
<div id="box">
  盒子模型
</div>

</body>

<script type="text/javascript" >

</script> 

</html>

页面效果：

打开Chrome调试，进行验证：

2.box-sizing属性

一般情况下，设置了边界或是内外边距后，元素的所占空间会发生改变，开发者可以通过设置box-sizing属性，来对元素整体进行高度和宽度的设置，包括内边距和边界整体的高度和宽度。

content-box：width，height控制content区域的宽和高
padding-box：width，height控制content和padding区域的宽和高（目前只有Firefox支持）
border-box：width，height控制content，padding和border区域的宽和高

下面以具体的实例来说明。使用的是Chrome浏览器，测试的是border-box。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ECharts</title>
<meta name="description" content="">
<meta name="keywords" content="">

</head>
<style type="text/css">
/* common styling */
 #box {
    width: 100px;
    height: 50px;
    border: 20px solid blue;
    padding: 20px;
    margin: 20px;
 }
 #box1 {
    border: 20px solid blue;
    padding: 20px;
    margin: 20px;
    box-sizing: border-box;
 }
</style>
<body>
<div id="box">
  盒子模型
</div>
<div id="box1">
  盒子模型
</div>
</body>

<script type="text/javascript" >

</script> 

</html>