在HTML文档中所有的标签元素均可以看做是一个盒子模型,在CSS中“box model”这个术语经常被用来设计和布局页面排版是使用。
CSS盒子模型本质上类似于盒子,它包括外边距、边框宽度、内边距、内容。它封装了HTML的标签元素。
其中:
Margin(外边距) - 清除边框外的区域,外边距是透明的,常用来设置外部与其他标签元素之间的距离。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的,常用来设置其与内部标签元素之间的距离。
Content(内容) - 盒子的内容,显示文本和图像,就是我们经常看到的内容部分。
比如说:
<p>hello mihguan</p> <p>hello mihuguan</p>这个标签在显示的时候其margin、border、padding均为0px,并且透明,所以我们看到的只是其content的盒子。
上述实例如果想要两个p标签元素之间的距离增大,我们可以设置:
p{ margin:15px; }这样设置的话,标签margin盒子宽度为5px;这样就是说两个p标签之间的距离增加了5+5=10px.
上述设置并不能做到精确的要求,因为只是要求两个p标签之间增加距离,但是标签元素的左右也增加了距离。如果想要设置盒子模型中任意一个方向的高度或者宽度,我们使用一下属性:
margin-top:可以单独设置margin盒子中的上边距离;
margin-right:可以单独设置margin盒子中的右边距离;
margin-bottom:可以单独设置margin盒子中的下边距离;
margin-left:可以单独设置margin盒子中的左边距离;
其他属性padding,border也具有top right bottom left四个方向。
1、设置p标签的下边框为1px;
代码:
<style> p{ border-bottom: 1px solid black; } </style> <p>hello mihuguan</p> <p>hello mihuguan</p>显示如下:
2、设置span标签的边框为1px,内边距为5px;
span{ margin-top:20px; border: 1px solid black; padding: 10px; } </style> <span>hello mihuguan</span>效果如下:
学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~
HTML2019-12-22
HTML2019-12-09
HTML2020-02-29
HTML2020-03-28
我的世界2020-04-24
python2019-10-26