admin管理员组

文章数量:817359

【第六篇】盒子模型

在CSS中,所有的元素都被一个个的“盒子”包围着,理解这些“盒子”的基本原理,是我们使用CSS实现准确布局,处理元素排列的关键。

目录

盒子模型

margin属性的设置

padding属性

border属性

块级盒子和内联盒子

块级盒子

内联盒子

内联块级盒子

 盒子模式的切换

盒子尺寸问题


盒子模型

在页面布局中每个元素都被当成一个盒子。每个盒子由四个部分组成,分别为内容区,内边距区,边框区和外边距区。

margin属性的设置

margin属性表示盒子的外边距,可以控制盒子与盒子之间的间距 ,由于margin有上右下左四个方向。故可以通过分别设置四个方向的距离,来控制对应的外边距。有时候也会用来控制对齐。

margin-top:用于设置上外边距。

margin-right:用于设置右外边距。

margin-bottom:用于设置下外边距。

margin-left:用于设置左外边距。

margin:相当于margin-top,margin-right,margin-bottom,margin-left的总称。可以统一设置外边距。它存在一些简写形式。当只有一个属性值时表示将四个方向的外边距设置为相同的值。当有两个属性值x1和x2时表示将上下外边距设置为x1,将左右外边距设置为x2。当有三个属性值x1,x2和x3时表示将上外边距设置为x1,将左右外边距设置为x2,将下外边距设置为x3。当有四个属性值x1,x2,x3和x4时表示将上外边距设置为x1,将右外边距设置为x2,将下外边距设置为x3,左外边距设置为x4。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">:root{background-color: gray;}.first{background-color: lightblue;border: 1px solid black;margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;}.second{border: 1px solid white;}.third{background-color: lightblue;border: 1px solid black;margin: 10px 20px 30px 40px;}</style><title>盒子模型</title>
</head>
<body>
<div class="first">第一个盒子
</div>
<div class="second">第二个盒子</div>
<div class="third">第三个盒子</div>
<div class="second">第四个盒子</div>
</body>
</html>

效果:

padding属性

padding属性同margin类似,存在四个方向控制的属性padding-right,padding-right,padding-bottom和padding-left,以及总的控制方式padding。只不过它控制的是内边距。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">:root{background-color: gray;}.first{background-color: lightblue;border: 1px solid black;padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}.second{border: 1px solid white;}.third{background-color: lightblue;border: 1px solid black;padding: 10px 20px 30px 40px;}</style><title>盒子模型</title>
</head>
<body>
<div class="first">第一个盒子第一个盒子第一个盒子第一个盒子第一个盒子第一个盒子
</div>
<div class="second">第二个盒子</div>
<div class="third">第三个盒子第三个盒子第三个盒子第三个盒子第三个盒子</div>
<div class="second">第四个盒子</div>
</body>
</html>

效果:

border属性

border属性用来控制盒子模型的边框特性。同padding和margin类似,也存在四个方向控制的属性。分别是border-top,border-right,border-bottom和border-left,以及同时控制四个方向的border属性。由于一边的边框又由边框宽度,边框线性和边框颜色控制,所以还有对应的border-width,border-style和border-color属性。

不过通常我们只用border属性来设定。这里border通常还有一个特殊的用法就是绘制三角形!

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">:root{background-color: gray;}.first{border: 10px solid;border-color: red orange green blue;}.bottomtrangle::after{content: "";border-style: solid;border-width: 10px;border-color: white transparent transparent;position: relative;top: 15px;left: 5px;}.uptrangle::after{content: "";border-style: solid;border-width: 10px;border-color: transparent transparent white transparent;position: relative;top: -16px;left: 5px;}       </style><title>盒子模型</title>
</head>
<body>
<div class="first">border属性的演示
</div>
<div class="second">下面演示通过边框来绘制三角形</div>
<div class="bottomtrangle">这里是一个向下箭头的三角形</div>
<div class="uptrangle">这里是一个向上箭头的三角形</div>
</body>
</html>

效果:

 

块级盒子和内联盒子

在CSS中根据盒子的表现特性不同,可以分为两种盒子,一种为块级盒子,另一种为内联盒子。

块级盒子

块级盒子又称为block box。

一个块级盒子具有如下行为特征:

  1. 独占一行,在宽度方向上会占据父容器所有的可用空间。
  2. 每个块级盒子表示一个换行。
  3. 可以设置width和height属性。
  4. padding,margin和border属性会将其他元素从当前盒子周围“推开”。

 

块级盒子的页面元素有:h1~h6,p,div等

内联盒子

内联盒子又称为inline box。

一个内联盒子具有如下特征:

  1. 盒子不会换行。
  2. width和height属性不起作用。
  3. 垂直方向上内边距、外边距以及边框会被应用但不会把其他盒子推开。
  4. 水平方向上内边距、外边距以及边框会被应用且会把其他盒子推开。

 

内联盒子的页面元素有:a,span,em,strong等。

举例:

该示例主要是为了显示两种类型盒子的特定。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">div[name="block"]{background-color: gray;}div[name="block"] div:first-child{border: 1px solid red;width: 200px;height: 200px;}div[name="block"] div:last-child{border: 1px solid green;margin: 10px auto;}div[name="inline"]{background-color: lightblue;}div[name="inline"] span:first-of-type{border: 1px solid whitesmoke;width: 200px;height: 200px;padding: 20px 100px;}div[name="inline"] span:last-of-type{border: 1px solid black;margin: 20px 100px;}div[name="inline"] div{border: 1px solid black;}</style><title>盒子模型</title>
</head>
<body>
<div class="container"><div name="block">这是一个存放了两个块级盒子的父容器。<div>第一个子块级盒子</div><div>第二个子块级盒子</div></div><div name="inline">这是一个存放了两个内联盒子的父容器。<br><span>第一个子内联盒子</span><span>第二个子内联盒子</span><div>这是内联盒子下方的块级盒子</div></div>
</div>
</body>
</html>

效果:

内联块级盒子

内联块级盒子又称为inline-block,它具有内联盒子不换行的特性,又有块级盒子设置长宽属性和设置内外边距和边框的特性。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">div[name="block"]{background-color: gray;}div[name="block"] div:first-child{border: 1px solid red;width: 200px;height: 200px;}div[name="block"] div:last-child{border: 1px solid green;margin: 10px auto;}div[name="inline"]{background-color: lightblue;}div[name="inline"] span:first-of-type{border: 1px solid whitesmoke;width: 200px;height: 200px;padding: 20px 100px;}div[name="inline"] span:last-of-type{border: 1px solid black;display: inline-block;width: 200px;height: 200px;margin: 20px 100px;}div[name="inline"] div{border: 1px solid black;}</style><title>盒子模型</title>
</head>
<body>
<div class="container"><div name="block">这是一个存放了两个块级盒子的父容器。<div>第一个子块级盒子</div><div>第二个子块级盒子</div></div><div name="inline">这是一个存放了两个内联盒子的父容器。<br><span>第一个子内联盒子</span><span>第二个子内联盒子</span><div>这是内联盒子下方的块级盒子</div></div>
</div>
</body>
</html>

 效果:

 

 盒子模式的切换

在CSS中可以通过display属性来改变盒子模式。通常用来进行页面布局。

display:inline表示设置盒子为内联盒子。

display:block表示设置盒子为块级盒子。

display:inline-block表示设置盒子为内联块级盒子。

display:none表示隐藏盒子。

display:flex表示弹性盒子。

display:grid表示网格布局。

关于布局这一块详见后面的布局篇章。

盒子尺寸问题

默认情况下盒子的尺寸即width和height表示的是内容区域的width和height。在这种情况下,如果设置了内外边距和边框,就会产生一些意想不到的效果。例如将两个左悬浮的子元素的宽度分别设置为50%,并设置了边框为1px时,会发现两个子元素不能在一行显示。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">*{margin: 0;padding: 0;}div[name="inline"]{background-color: lightblue;color: white;}div[name="inline"] div:first-of-type{float: left;width: 50%;border: 1px solid white;background-color: darkred;}div[name="inline"] div:last-of-type{float: left;width: 50%;border: 1px solid white;background-color: darkblue;}</style><title>盒子模型</title>
</head>
<body>
<div class="container"><div name="inline"><div>第一个子内联盒子</div><div>第二个子内联盒子</div></div>
</div>
</body>
</html>

效果:

 为了解决这个问题CSS中设置了box-sizing属性,用来控制盒子模型的width和height的计算范围是从哪个区域开始计算的。

box-sizing:border-box表示width和height计算的区域是边框及以内的区域。

box-sizing:content-box表示width和height计算的区域是内容区域。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">*{margin: 0;padding: 0;}div[name="inline"]{background-color: lightblue;color: white;}div[name="inline"] div:first-of-type{box-sizing: border-box;float: left;width: 50%;border: 1px solid white;background-color: darkred;}div[name="inline"] div:last-of-type{box-sizing: border-box;float: left;width: 50%;border: 1px solid white;background-color: darkblue;}</style><title>盒子模型</title>
</head>
<body>
<div class="container"><div name="inline"><div>第一个子内联盒子</div><div>第二个子内联盒子</div></div>
</div>
</body>
</html>

效果:

 

本文标签: 第六篇盒子模型