CSS:盒子模型

CSS:盒子模型

    • 盒子模型
      • 盒子模型的组成
      • 盒子内容
      • 边框 border
      • 内边距 padding
      • 盒子实际大小计算
        • CSS3的盒子类型
          • content-box
          • border-box
      • 外边距 margin
        • 外边距合并
          • 相邻块元素垂直外边距合并
          • 嵌套块元素垂直外边距塌陷
      • 行内元素的内外边距
    • 盒子相关属性
      • 圆角边框
      • 盒子阴影


盒子模型

所谓盒子模型,其实就是把HTML中的布局元素看作是一个矩形的盒子,或者承装内容的容器。
盒子模型在页面布局中,可以起到嵌套,堆叠,布局的效果。

盒子模型的组成

CSS:盒子模型_第1张图片
盒子模型主要由五个元素组成,分别是盒子内容 - content盒子内边距 - padding盒子边框 - border盒子外边距 - margin。接下来我们一一介绍:


盒子内容

所谓盒子的内容,其实就是盒子可以存放内容的区域,在没有学习盒子模型前,其实我们就已经会设置盒子内容的大小了。
盒子模型中,盒子的大小由宽高:heightwidth来定义。
当宽高不足放下其内容物时,其内容区域就会被内容物撑开,此时盒子的内容就是不可控的了,所以在给宽高时就应该给足,保证每一个盒子都在预料之中。


边框 border

border属性可以设置盒子的边框,边框主要由边框粗细,边框样式,边框颜色组成:
属性:

属性 作用
border-width 设置边框粗细,单位是px
border-style 设置边框样式
border-color 设置边框颜色

边框样式 border-style的属性值

属性值 效果
none 没有边框(默认值)
solid 实线边框
dashed 虚线边框
dotted 点线边框

边框样式效果如下:
CSS:盒子模型_第2张图片
边框简写:
边框的三个属性是可以连写在同一个border属性中的,但是要按照指定的顺序:边框粗细,边框样式,边框颜色。
示例:
CSS:盒子模型_第3张图片
边框单方向设置:
边框样式是可以指定方向的,四个方向分别对应:top,bottom,left,right。直接衔接在border后面即可:border-topborder-bottomborder-leftborder-right

示例:
CSS:盒子模型_第4张图片


内边距 padding

padding用于设置盒子的内边距,即边框与内容之间的距离。
padding的属性值为px。

chrome浏览器可以开启调试窗口,查看每个盒子五大属性,后面讲解边距问题时,都会结合调试窗口来讲解:
CSS:盒子模型_第5张图片
我们先来看看内边距的效果:

可以看到,在内边距增加的过程中,我们的盒子变大啦,内部的文字距离边框也越来越远。
其中绿色的区域就是内边距的区域,内边距的两个主要作用就是:撑开盒子大小,以及控制边框与内容的距离。

与border一样,也有可以在四个方向单独设置内边距的方法:padding-toppadding-bottompadding-leftpadding-right
示例:


盒子实际大小计算

从先前对盒子内边距的改变,我们发现整个边框都变大了,可以知道,盒子的大小不仅仅是内容的大小,而是由多部分的组成。
在默认情况下,盒子的大小为:(内容宽度 + 左右内边距+ 左右边框粗细) × (内容高度 + 上下内边距+ 上下边框粗细)
简单来说就是盒子的长×宽。

比如下面的盒子:
CSS:盒子模型_第6张图片
这个盒子的宽高都是100px,上下左右边框各5px,上下左右内边距各20px。最后的大小就是:(100 + 5 + 5 + 20 + 20)* (100 + 5 + 5 + 20 + 20)

CSS3的盒子类型

在CSS3中,增添了一种盒子类型,我们刚才的计算公式,是针对于content-box,CSS3增添了一种border-box。
接下来我为大家介绍一下:
盒子类型的切换,是通过border-sizing属性,属性值默认为content-box。

content-box

这种盒子类型,在设置宽高width和height时,作用于内容content区域,也就是说,后续在设置内边距和边框时,都是在content区域往外拓展,保证content是指定的宽高。
效果如下:

可以看到,不论我们怎样修改边距和边框,content的大小都是恒定的。

border-box

conten-box是宽高作用域content,那么border-box就是宽高作用于边框了。在这种盒子类型下,设置的宽高会作用于边框,后续在设置内边距和边框时,都会在边框区域向内拓展,保证边框的值是指定的宽高。
效果如下:

在这种盒子模型下,我们的外部蓝色边框没有发生过大小改变,后续调整内边距和边框大小,反而是压缩了内容的区域。

第二种盒子的实际大小非常容易计算,就是指定的width × height


外边距 margin

以上内容都是用于控制盒子本身是属性,而外边距,则是控制盒子之间的距离。
外边距通过margin属性来控制,单位是px。
也可以指定固定的方向的外边距:margin-topmargin-bottommargin-leftmargin-right

我们先来看一下外边距的效果:

此处橙色的区域就是外边距,我们通过外边距,撑开了盒子之间的距离,这就是外边距的主要作用。

margin属性,除了可以用px以外,还有一个属性值:auto,其代表居中。

外边距合并

我们看到刚刚的外边距的图片:
CSS:盒子模型_第7张图片
这张图有一个端倪,我们发现,上面盒子的下外边距,和下面盒子的上外边距合并了。如果没有合并,两个盒子的距离本应该是到侧边距离的两倍才对。这就是外边距合并问题。

相邻块元素垂直外边距合并

刚刚展示的是相邻块级元素的外边距合并,这种边距合并是难以避免的,在开发时,我们最好只设置一个方向的边距值,不要让相邻元素交界的地方设置两个外边距。
比如刚刚的两个盒子,如果想让其距离为100px,可以将上面盒子的margin-bottom = 100px; 下面盒子的margin-top = 0;。这样就没有边距的合并,我们的盒子间距就更可控了。


嵌套块元素垂直外边距塌陷

我们先看案例:

CSS:盒子模型_第8张图片
在上面的代码中,出现了一个问题,就是我们为粉色盒子设置了50px外边距,它与页面边界是50px没有问题;但是我们的蓝色盒子有10px的外边距,上方的外边距却没有生效。这就是嵌套块元素的塌陷问题:
对于两个嵌套关系的块元素,父元素有上外边距的同时,子元素也有上外边距,此时父元素的上外边距会变成两个上外边距之间较大的,子元素的上外边距会变成0

那遇到这个问题,应该如何解决?
有很多种解决方法,在此介绍几种目前能理解的:

1.为父级元素设置上边框
2.为父级元素设置上内边距

CSS:盒子模型_第9张图片
第一张图片为塌陷状态,第二张图使用了上内边距,第三张图片使用的上边框。

此处有的时候上边框带着颜色会让我们的盒子不美观,可以使border-color属性值为transparent,代表颜色为透明色,即第四张图片的情况。


行内元素的内外边距

行内元素的内外边距,并非全部有效,遵循以下规则:

水平方向的margin和padding布局是有效的
垂直方向的margin和padding布局是无效的


盒子相关属性

圆角边框

在CSS3中,新增了圆角边框样式border-radious。
属性值有两种形式,分别是数值形式和百分比形式。
这个地方的属性值是指一个圆的半径,将这个半径的圆形贴合到四个角落,得到的曲线就是一个圆角边框。
CSS:盒子模型_第10张图片

如果是正方形,想要设置为一个圆,把数值修改为高度或宽度的一半即可,或者直接写为50%


盒子阴影

CSS3新增了盒子阴影box-shadow。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
属性值:

属性值 效果
h-shadow 必需,水平阴影位置,允许负值
v-shadow 必须,垂直阴影位置,允许负值
blur 可选,模糊距离
spread 可选,阴影尺寸
color 可选,阴影颜色
inset; 可选,控制阴影内外,outsite为外部阴影(默认)

h-shadow 和v-shadow:
改变阴影位置:

blur:
改变阴影模糊度:

spread:
改变阴影扩散范围:

color:
改变阴影颜色:
CSS:盒子模型_第11张图片

inset:
将阴影放在盒子内部:
CSS:盒子模型_第12张图片


你可能感兴趣的:(前端开发,css,前端)