盒子是用来储存物品的 我们可以将一个盒子理解为 一个快递的包裹，有内容 +有填充物 +纸盒子。 一个盒子的组成部分: 在css中的一个盒子的组成部分 内容(content)+内填充(padding)+边框(border)+外边距(margin) 一个盒子的主要属性 :width、height、paddding、border、margin。 如何计算一个盒子的总宽度 一个盒子的总宽度=盒子里面内容的长度+左右两边的填充+左右两边的边框线 注意:一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度他应该是由其内容来决定的。 源代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/ height: 100px; /*这里的height属性值得是盒子里面内容的高度*/ padding:20px; /*内填充 盒子里面内容到边框的距离*/ border:1px solid #f00; /*外边框*/ } </style> </head> <body> <div class="box">文本文本文本文本八点考达拉扣税的牌可打拉萨扩大</div> </body> </html>提到盒子就不得不讲的两个属性 : margin(外边距 )跟(padding) 内填充。 pdding是内填充的意思 指的是盒子中间的内容到边框之间的距离。padding 是有四个方向的 所以我们能够分别的描述 这四个方向的padding 方法有两种 ：第一种 我们称之为小属性，第二种我们称之为简写属性 小属性： padding-top 上内填充 padding-right 右内填充 padding-bottom:下内填充 padding-lift 左内填充. 简写属性: padding:这个属性是有方向的 可以同时表示四个方向 这个属性的方向是有顺序的。 顺序是 顺时针的方向 也就是 上右下左 这个顺序 padding:20px 30px 40px 50px； 他的内边距为上边距20px，右边距为30px 下边距为40px 左边距为50px margin： margin 他表示及外边距的意思 它是指盒子与盒子之间的距离 margin 他也是有四个方向的 所以我们能够通过四个方向对其进行描述 方法有两种:第一种我们称之为小属性，第二章我们称之为简写属性. 小属性 margin-top：上外边距 margin-right:右外边距 margin-bottom：下外边距 margin-left :做外边距 简写属性 margin：简写属性它是有方向的 这里的方向 是一个顺时针的方向 他的方向是的顺序是： 上、右、下、左 margin：10px;表示上右下左这四个方向的外边距为10像素 margin：10px 20px；表示上下这两个方向的外边距为10像素 左右两个方向的外边距 为20像素 margin：10px 20px 30px；表示上边距为10像素 左右边距 为20像素 下外边距 为30像素 margin：10px 20px 30px 40px；表示上外边距为10像素 右外边距 为20像素 下外边距为30像素 左边距为40像素 源代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 100px;/*这里的WIDTH属性值得是盒子里面内容的宽度*/ height: 100px; /*这里的height属性值得是盒子里面内容的高度*/ /*使用小属性来描述内填充*/ padding-top: 20px; padding-right:30px; padding-bottom: 40px; padding-left: 50px; border:1px solid #f00; /*外边框*/ } </style> </head> <body> <div class="box">文本文本文本文本八点考达拉扣税的牌可打拉萨扩大</div> </body> </html>