CSS盒子模型简介

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>



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页