网站首页 > 技术文章正文

《Web前端技术H5+CSS3》笔记--第六章盒子模型「云图智联」

hmc789 2024-11-24 16:44:31 技术文章 2 ℃

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1.1 盒子模型

在学习盒子模型之前，先来看一个生活中的例子。假如墙上排列着几幅画。对于每幅画来说，都有一个边框，在英文中称为border；每个画框中，画和边框通常都会有一定的距离，这个距离称为内边距，在英文中称为padding；每一幅画间也不是紧挨着的，也存在一些距离称为外边距，在英文中称为margin。

在CSS中，一个独立的盒子模型由content（页面内容）、border（边框）、padding（内边距）、margin（外边距）四部分组成

1.content：位于最中间，页面的主要显示内容，也就是这幅画的本身2.border：位于内边距外面，如果没有内边距就是包着内容的外框。它一般具有一定的厚度，也就是这幅画的画框3.padding：位于边框内部的空隙，是内容与边框的距离，也就是画框和图之画之间的空隙4.margin：位于边框内部空隙，边框外面周围的距离，也就是每幅画之间的空隙

1.1.1 边框

边框（border）有三个属性，分别是color（颜色）、width（粗细）和style（样式）。在网页中设置边框样式时，尝尝需要将这三个属性很好地配合起来，才能达到良好的页面效果。在使用CSS设置边框时，分别使用border-color、border-width和border-style设置边框的颜色、粗细和样式

border-color

border-color的设置方法与文本的color属性或背景颜色bancground-color属性的设置方法完全一样，也是使用十六进制设置边框的颜色，如红色为#FF0000，也可以使用RGBA的颜色表示方法。

由于盒子模型分为上、下、左、右四个边框，因此在设置边框颜色时，可以按上、右、下、左的顺序来设置四个边框颜色，也可以同时设置四个边框的颜色。border-color属性设置方法如下：

属性说明举例border-top-color设置上边框颜色border-top-color:#369border-right-color设置右边框颜色border-right-color:#369border-bottom-color设置下边框颜色border-bottom-color:#FAE45Bborder-left-color设置左边框颜色border-left-color:#EEFF34border-color设置四个边框颜色为同一个颜色border-color:#EEFF34

当使用border-color属性同时设置四条边框颜色时，设置顺序按顺时针方向上、右、下、左设置边框颜色，属性值之间以空格隔开。没有设置属性值的找对边

例如：border-color:#369 #000 #F00 #00F;四个属性按上、右、下、左依次对号入座。

例如：border-color:#369 #000 #F00;三个属性值按上、右、下、左依次对号入座。#369对应上边框，#000对应右边框，#F00对应下边框，发现到“左”的时候没有属性值了，这时候找它的对边。因为“左”的对边是“右”所以#000对应左边框

以后无论给出几个属性值都按照“上、右、下、左”“没有找对边”的方式来对应

border-width

border-width用来指定border的粗细程度，它的值有thin、medium、thick和像素值

thin ：设置细的边框

medium：默认值，设置中等的边框一般的浏览器都将其解析为2px

thick：设置粗的边框

像素值：表示具体的数值，自定义设置边框的宽度，如1px、5px等

border-style

border-style用来指定border的样式，它的值有none、hidden、dotted、dashed、solid、double、groove、ridge和outset，其中none、dotted、dashed、solid在实际网页制作中是经常用到的值。none表示无边框，dotted表示点线边框，dashed表示虚线边框，solid表示实现边框。由于dotted和dashed在大多数浏览器显示为实线，因此在实际网页中，为了浏览器兼容性，常用none和solid。

值含义none默认无边框dotted定义一个点线边框dashed定义一个虚线边框solid定义实线边框double定义两个边框。两个边框的宽度和 border-width 的值相同groove定义3D沟槽边框。效果取决于边框的颜色值ridge定义3D脊边框。效果取决于边框的颜色值inset定义一个3D的嵌入边框。效果取决于边框的颜色值outset定义一个3D突出边框。效果取决于边框的颜色值

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*设置div边框，1px黑色的实线边框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*设置第一个p标签边框为1px的点状虚线*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*设置第二个p标签边框为1px的虚线边框*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*设置第三个p标签边框为4px的双线边框*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.2 外边距

外边距（margin）位于盒子边框外，指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离，例如示例1效果图中标题与div上边框之间的距离，以及标题与下方表单之间的距离都是由h2外边距产生的。从图中也可以看到页面内容并没有紧贴浏览器，而是与浏览器有一定的距离，这就是因为body本身也是一个盒子，也有一个外边距，这也是由body的外边距产生的。

外边距与边框一样，也分为上外边距、右外边距、下外边距、左外边距，使用方法和border-color方法一样。

1.1.3 内边距

内边距（padding）用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。内边距与外边距一样，也分为上内边距、右内边距、下内边距、左内边距，设置方式和设置顺序也都一样，请参照border-color设置方法。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width: 200px;        height: 200px;        border: 1px solid black;  /*设置div边框，1px黑色的实线边框*/    }    p:nth-of-type(1){        width: 100px;        border: 1px dotted red;  /*设置第一个p标签边框为1px的点状虚线*/margin-top: 30px; /*距离顶部的距离30px*/padding: 40px;   /*所有填充都是40px*/    }    p:nth-of-type(2){        width: 100px;        border: 1px dashed yellow;/*设置第二个p标签边框为1px的虚线边框*/margin-left: 20px;  /*距离左侧的距离20px*/    }    p:nth-of-type(3){        width: 100px;        border: 4px double blue;/*设置第三个p标签边框为1px的双线边框*/margin: 50px;  /*4个边距50px*/    }</style></head><body><div><p>第一段落</p><p>第二段落</p><p>第三段落</p></div></body></html>

1.1.4 盒子模型的尺寸

在CSS中，width和height指的是内容区域的宽度和高度。增加了边框、内边距和外边距后不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。

示例

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{        width:100px;/*div宽度100px*/height:100px;/*div高度100px*/padding:5px;/*div上右下左外边距5px*/margin:10px;/*div上右下左内边距10px*/border:1px solid #000;/*div上右下左边框为1px*/    }</style></head><body><div></div></body></html>

运行之后会发现div的实际总宽度为112px而不是100px这说明把宽度width设置为100px是不能达到最终要求的盒子总宽度为100px的。

修改上面代码如下：

div{        width:88px;/*div宽度100px*/height:88px;/*div高度100px*/padding:5px;/*div上右下左外边距5px*/margin:10px;/*div上右下左内边距10px*/border:1px solid #000;/*div上右下左边框为1px*/    }

盒子模型的计算方法：

盒子模型内盒总尺寸=border（上下/左右）+padding（上下/左右）+内容宽度

1.1.5 box-sizing拯救布局

为了解决上述问题CSS3添加了一个盒子模型属性box-sizing，能够事先定义盒子模型的尺寸解析方式

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

box-sizing: content-box|border-box|inherit:

值说明content-box这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外border-box指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit指定 box-sizing 属性的值，应该从父元素继承

示例

div {        width:100px;        height:100px;        padding:5px;        margin:10px;        border:1px solid #000;        -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;        box-sizing: border-box;    }

2.1 圆角边框

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

在 CSS3 中，创建圆角是非常容易的。

在 CSS3 中，border-radius 属性用于创建圆角：

2.1.1 圆角边框语法

border-radius:length{1,4}

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

1.border-radius:length{1}设置一个属性值表示top-left,top-right,bottom-right和bottom-left四个值是一样的，也就是元素四个圆角效果一样

2.border-radius:length{2}设置两个属性值表示top-left等于bottom-right，并且取第一个值，top-right等于bottom-left，并且取第二个值，也就是左上角和右下角取第一个值，右上角和左下角取第二个值

3.border-radius:length{3}设置三个属性值，第一个值是top-left,第二个值是top-right和bottom-left，第三个只是bottom-right

4.border-radius:length{4}设置四个属性值，第一个值是top-left，第二个值是top-right第三个值bottom-right第四个值bottom-left

示例

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:10px solid red;       -webkit-border-radius:20px;       -moz-border-radius:20px;       border-radius:20px;/*div四个角都是圆角，值为20px*/   }</style></head><body><div></div></body></html>

2.1.2 使用border-radius制作特殊图形

制作圆形

利用border-radius属性制作圆角时有两个要点

1.元素的宽度和高度必须相同 2.圆角的半径为元素宽度的一般，或者直接设置圆角半径值为50%

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       width:100px;       height:100px;       border:4px solid red;       -webkit-border-radius:50%;       -moz-border-radius:50%;       border-radius:50%;/*div四个角都是圆角，值为20px*/   }</style></head><body><div></div></body></html>

制作半圆

利用border-radius属性制作半圆的方法和制作圆形的方法一样，只是元素的宽度与圆角的方为要配合一直，不同的宽度和高度比例，以及圆角的方位，可以制作上半圆、下半圆、左半圆、右半圆

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:100px;        height:50px;        -webkit-border-radius:50px50px00;        -moz-border-radius:50px50px00;        border-radius:50px50px00;    }   div:nth-of-type(2){        width:100px;        height:50px;        -webkit-border-radius: 0050px50px;        -moz-border-radius: 0050px50px;        border-radius: 0050px50px;    }   div:nth-of-type(3){        width:50px;        height:100px;        -webkit-border-radius:050px50px0;        -moz-border-radius:050px50px0;        border-radius:050px50px0;    }   div:nth-of-type(4){        width:50px;        height:100px;        -webkit-border-radius:50px0050px;        -moz-border-radius:50px0050px;        border-radius:50px0050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

制作半圆形的要点：

1.当制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值2.当制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

制作扇形

遵循“三通，一不同”原则，“三同”是元素宽度、高度、圆角半径相同，“一不同”是圆角取值位置不同

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{       background: red;       margin:30px;   }    div:nth-of-type(1){        width:50px;        height:50px;        -webkit-border-radius:50px000;        -moz-border-radius:50px000;        border-radius:50px000;    }   div:nth-of-type(2){        width:50px;        height:50px;        -webkit-border-radius: 050px00;        -moz-border-radius: 050px00;        border-radius: 050px00;    }   div:nth-of-type(3){        width:50px;        height:50px;        -webkit-border-radius:0050px0;        -moz-border-radius:0050px0;        border-radius:0050px0;    }   div:nth-of-type(4){        width:50px;        height:50px;        -webkit-border-radius: 00050px;        -moz-border-radius: 00050px;        border-radius: 00050px;    }</style></head><body><div></div><div></div><div></div><div></div></body></html>

3.1 盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

1.inset：阴影类型，可选值，如果不设置，默认的投影方式是外阴影；如果设置了inset表示内阴影

2.x-offset：X轴位移，用来指定阴影水平位移量，其值可以是正值，也可以是负值，如果问正值，阴影在对象的右边；反之，阴影在对象的左边

3.y-offset：Y轴位移，用来指定因应垂直位移量，其值可以是正值，也可以是负值，如果为正值，阴影在对象的底部；反之，阴影在对象的右边

4.blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围，值越大阴影向外模糊的范围就越大，阴影的边缘就越模糊。这个值只能是正值，如果为0，则表示不具有模糊效果，是可选值

5.color：阴影颜色，定义绘制阴影时所使用的颜色。阴影颜色可以是十六进制颜色，RGB、RGBA透明色等，不写这个值会用浏览器的默认色代替，由于浏览器默认色不一样，因此建议不要省略这个值

与用图片来制作盒子阴影相比，利用box-shadow属性修改阴影效果要方便的多，并且从box-shadow的语法上可以看出它的每个属性值都是可以自由设置的，这就意味着我们可以随意设置出不同的阴影效果

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{        width:100px;        height: 100px;        border:1px solid red;        -webkit-border-radius:8px;        -moz-border-radius:8px;        border-radius:8px;        margin:20px;        -webkit-box-shadow:  20px10px#06C;        -moz-box-shadow:  20px10px#06C ;        box-shadow:  20px10px#06C ;    }</style></head><body><div></div></body></html>

4.1 总结

1.盒子模型的概念、盒子模型的边框、外边距和内边距在网页中的使用方法2.使用border、padding、margin美化图片、div、列表、表单元素等网页元素3.精确计算盒子模型的尺寸，并且可以通过box-sizing选择盒子模型的解析方式4.使用border-radius给元素添加圆角效果，以及制作特殊的图形5.使用box-shadow给元素添加内、外阴影效果

免费学习视频欢迎关注云图智联：https://e.yuntuzhilian.com/

上一篇：深入浅出超好用的 CSS 阴影技巧
下一篇：「干货」移动端Web页面适配

猜你喜欢

最新留言

网站首页 > 技术文章 正文

《Web前端技术H5+CSS3》笔记--第六章 盒子模型「云图智联」