认识CSS样式中的盒子模型

良多小伙伴知道上面是盒模子，可是并不知道它具体指什么，并且都有什么特征。今天我就来教大师理解盒模子

方式/步调

1
起首盒子模子顾名思义就是“盒子”与里面的“物品”的关系。所以我们先假设一个盒子而且里面放着块物体
2
我们把盒子当当作页面元素，好比<div>标签。而盒子里面的物品是盒子模子的内容，这个内容可所以文字，也可所以图片，还可所以别的的标签元素
3
我们盒子与物品之间的距离叫盒子模子的填充物（padding）
4
我们把盒子与另一个盒子之间的距离叫盒子模子的外边距（margin）
5
我们把盒子的边框（图中红色的处所），在样式内外叫border
6
值得注重的是，内填充（padding），外边距（margin），边框（border）都有4个偏向。好比内填充就有：padding-top, padding-right, padding-bottom, padding-left。若是我们把padding-right的值改小了，那么物品（元素）就会往右移
7
若是想设心猿意马元素的高度或者宽度的话，则必需要注重：里面的物品的现实高度应该是它原本的高度（像素单元）加上上下内填充以及上下边框才是它的现实高度。宽度则是同理的
8
在一般环境下，<div>,<ul>,<h>,<p>,<ol>,<table>等块级标签都具备了盒子模子的特征