前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【融职培训】Web前端学习 第2章 网页重构6 盒子模型

【融职培训】Web前端学习 第2章 网页重构6 盒子模型

作者头像
学习猿地
发布2020-06-16 15:53:03
3400
发布2020-06-16 15:53:03
举报
文章被收录于专栏:学习猿地

一、盒子模型概述

我们可以把一个网页分解成一个个区域,大的区域内部可以嵌套小的区域,就像融职教育的首页一样。

红色的区域是最大的区域,整个网页由三部分红色区域组成,蓝色区域在红色区域之中,绿色区域最小。每个区域都可以看做一个盒子,一个网页就是由一个个大大小小的盒子嵌套而成。

盒子之间或内外是有边距的,通过以下属性控制盒子的边距

margin:外边距

padding:内边距

盒子模型还会涉及到我们之前学过的一个属性

border:设置元素的边框

二、盒子模型属性讲解

margin

margin属性可以控制元素的外边距,简单的说就是设置margin的这个元素与其相邻的元素或外部容器元素的距离,对应有四个属性,上下左右:

margin-top:上外边距

margin-bottom:下外边距

margin-left:左外边距

margin-right:右外边距

我们以margin-top属性为例,实例代码如下所示:

1.box1{ 2 width:300px; 3 height:300px; 4 background-color: #f00; 5} 6.box2{ 7 width:300px; 8 height:300px; 9 background-color: #0f0;10 margin-top:50px;11 margin-left:80px;12}

如代码所示,box2因为设置了margin-top:50px;它与相邻的box1之间有了50px的距离,我们再来看下一个例子。

1.box1{ 2 width:300px; 3 height:300px; 4 background-color: #f00; 5} 6.box2{ 7 width:100px; 8 height:100px; 9 background-color: #0f0;10 margin:50px 0 0 80px;11}

margin设置多个值,设置如下:

margin:value - 将上下左右都设置成value值

margin:value1 value2 value3 value4; - 4个值分别是上右下左

margin:value1 value2; - 第一个值表示上下,第二个值表示左右

margin:value1 value2 value3; -第一个值表示上,第二个值表示左右,第三个值表示下。

关于margin属性还有一个常用的技巧,可以将块元素水平居中展示(关于块元素的更多内容,会在下一节讲解)。

定义一个class为box的div,设置样式如下:

1.box{2 width:100px;3 height:100px;4 background-color:red;5 /* 为margin设置两个值,第一个值为上下的外边距,第二个值为左右的外边距。 */6 margin:0 auto;7}

左右外边距的值设置为auto,元素就会根据其父级容器的实际宽度,将元素左右两边的外边距设置为相同的值,这样元素就实现了水平居中的效果。

padding

padding属性可以控制元素的内边距,简单的说就是控制容器与内部元素之间的距离,与margin一样,padding也有对应的四个属性分别表示上下左右

padding-top:上内边距

padding-bottom:下内边距

padding-left:左内边距

padding-right:右内边距

我们以padding-top为例,实例代码如下所示。

1.box1{ 2 width:300px; 3 height:300px; 4 background-color: #f00; 5 padding-top:50px; 6} 7.box2{ 8 width:100px; 9 height:100px;10 background-color: #0f0;11}

大家可以看到,设置了padding之后,元素的宽度和高度会有变化,先保留这个问题,我们先看盒子模型的下一个属性。

border

我们在前几节内容中已经解除了border这个属性,用法如下所示

1.box{2 /* 设置一像素,红色,实现边框 */3 border:1px solid red;4}

其实设置border样式是一个简写,它其实包含了三个属性

border-style

border-width

border-color

上面的代码可以转换成完整的写法

1.box{2 /* 边框宽度 */3 border-width:1px;4 /* 边框样式 */5 border-style:solid;6 /* 边框颜色 */7 border-color:red;8}

关于border-style比较常用的值如下所示

值描述

none定义无边框

dotted定义点状边框

dashed定义虚线

solid定义实线

double定义双线

了解以上内容之后,我们在后续的课程中,还是会继续简写border属性。这里顺便说一下,border属性简写的三个值是没有顺序要求的,我们可以写成

1.box{2 border:blue 1px solid;3}4/* 或者 */5.box{6 border:blue solid 1px;7}

都不会影响显示效果。

宽高的计算

在我们之前学习的内容中了解到通过width和height属性可以设置元素的宽高,但元素的实际宽高可能与我们设置的width和height属性不同。因为在默认情况下:

元素的实际宽度 = border-left + border-right + width + padding-left + padding-right;

元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom;

实例代码如下所示。

1.box{2 width:300px;3 height:300px;4 background-color: #f00;5 padding-left:50px;6 border-right:50px solid blue;7}

我们可以看到,div元素的实际宽度是300+50+50=400px。

但是在实际开发中,为了方便计算,我们希望设置的width的值就是原生的实际宽度,不再希望考虑padding和border的加减运算,我们可以通过box-sizing属性实现这个功能,代码如下所示。

1.box{2 width:300px;3 height:300px;4 background-color: #f00;5 padding-left:50px;6 border-right:50px solid blue;7 box-sizing: border-box; /*原生的实际宽度就是width的宽度*/8}

通过设置box-sizing: border-box; 元素的实际宽度就是width设置的宽度,而padding和border的值是显示在width值内部的。

其实在实际开发中,将元素设置box-sizing: border-box;确实会给开发带来便利,所以我们可以在元素初始化的时候,将box-sizing: border-box;赋值给所有元素。

1*{2 margin:0px;3 padding:0px;4 box-sizing: border-box;5}

这样,我们既能清楚所有元素的默认边距,又能便利地设置元素的宽度和高度值。

三、课后练习

制作一个简易版的文章列表,要求如下:

列表容器边框为蓝色,宽度为980px。

列表元素宽900px,边框为红色,每一个列表元素都包含着文章标题和文章描述。

列表元素之间的间距为20px。

文章标题与列表上边距距为10px。

文章描述与标题的上边距为10px,距离底部边距为10px。

文章标题与文章列表距离列表的左边距为20px。

列表整理有三个元素。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/06/12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档