CSS盒子模型简介

原创 2018年04月15日 15:27:07

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>



盒子模型简介

一、W3C标准的盒子模型                                  二、IE盒子模型                                   ...
  • RanQi2016
  • RanQi2016
  • 2016-07-24 11:41:53
  • 743

CSS中盒子模型的总结

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。...
  • u014745194
  • u014745194
  • 2017-06-03 18:08:38
  • 589

神奇的CSS盒子模型

CSS盒子模型:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。这两种盒子模型都包含有内容(content)、填充(padding)、边框(border)、...
  • Eavan_Zhou
  • Eavan_Zhou
  • 2016-08-23 11:23:27
  • 3718

简述对CSS的盒子模型理解?

CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: bor...
  • u012396955
  • u012396955
  • 2016-12-29 13:42:06
  • 4014

WEB前端学习 Day 1(DIV+盒子模型+CSS文本+实例)

关于html,用得最多的就是DIV。所以先把DIV学好,搞懂他的一些特性。其次,文字在一个网页里面也是很重要的,所以先学CSS文本。从html下手,那么,DIV是什么? DIV就是一个块,在DIV里...
  • sdanfy
  • sdanfy
  • 2015-10-22 01:20:14
  • 2686

css盒子模型实例

.html代码如下: 2 3 4 CSS Box Model 5 6 body 7 { 8 backg...
  • yayun0516
  • yayun0516
  • 2014-11-25 10:02:38
  • 1057

CSS中盒子模型详解

CSS中块状结构类似于盒子模型,如下图: 从左至又分别是外边距,边框,内边距,内容,下面我们来分别测试这几个属性。 我先做一个没有任何修饰的盒子模型: 代码如下: .t...
  • hxy19971101
  • hxy19971101
  • 2016-07-08 09:44:58
  • 1395

CSS的盒子模型案例

CSS的功能可谓强大,作为程序员,不能只在后台默默无闻,也要到前台爽一把,意思意思,这样自己干活从前台 界面到后台数据库就算是全能了。能给自己省了不少力气,艺多不压身嘛,下面来介绍一下CSS里面的盒...
  • a352193394
  • a352193394
  • 2012-03-23 21:07:01
  • 2848

介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

(1)有两种, IE 盒子模型、W3C 盒子模型; (2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border); (3)区  别: IE的conten...
  • yangxuesong5555
  • yangxuesong5555
  • 2018-03-01 21:31:46
  • 113
收藏助手
不良信息举报
您举报文章:CSS盒子模型简介
举报原因:
原因补充:

(最多只允许输入30个字)