【CSS学习】--- 盒子模型

一、前言:这篇只作为本人的笔记,以后慢慢再补充。

   页面中的所有元素都可以被看作一个一个的“盒子”。这些盒子都包含了:内容(content)、内边距(padding)、边框(border)以及外边距(margin)。盒子的最内部分是实际的内容,直接包围内容的是内边距,内边距的边缘是边框,边框以外是外边距。其中内边距和外边距是透明的,内边距会显示该元素的背景色,外边距显示的是父元素的背景色。如下图所示:

 

下面我们逐步学习CSS中的盒子模型。

二、内容

   盒子中的物品即是内容,可以是文本、图片等各种信息。内容的大小由width和height定义,增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加盒子的总尺寸。

 注意:

行内非替换元素将会忽略width和height属性。具体用法请查看:CSS 尺寸

三、内边距:padding

   内边距(padding)是内容区和边框之间的空间,也称为填充,width和height属性不会改变填充和外边距的大小。填充的大小使用padding属性设置。padding 属性接受长度值或百分比值,但不允许使用负值

   百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。

   可以给padding指定1个值,2个值或4个值。

/*四个方向的内边距都设置为10px*/
h3{padding: 10px;}
/*上下内边距为10px,左右内边距为5px*/
h3{padding: 10px 5px;}
/*顺时针设置各方向的内边距,即上右下左内边距,依次为10px 8px 7px 6px*/
h3{padding: 10px 8px 7px 6px;}

四、边框:border

   元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。

 注意:

CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。

 如果希望边框出现,就必须声明边框样式,否则border-style默认为none。

具体可参考:CSS 边框

五、外边距:margin

   外边距是围绕着元素边框的空白区域。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值

注意:

margin属性对于

具体参考:CSS 外边距

六、盒子模型中的计算

七、最后

   这篇只作为本人的笔记,以后慢慢再补充。

原文地址:https://www.cnblogs.com/huwt/p/10540942.html