认识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【认识CSS样式中的盒子模型】在一般环境下，<div>,<ul>,<h>,<p>,<ol>,<table>等块级标签都具备了盒子模子的特征

以上内容就是认识CSS样式中的盒子模型的内容啦，希望对你有所帮助哦！