前端设计的常用属性,CSS的盒模型,页面布局的利器

时间:2022-03-29 13:51:31

在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到。相信经常布局写页面的朋友们对盒属性一定不陌生。在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编就为大家讲一讲盒属性中的CSS样式如何使用。

承接文章:通栏导航栏的制作,综合使用CSS属性,代码不超过30

技术等级:初级 | 适合前端开发的初学者阅读学习。

前端设计的常用属性,CSS的盒模型,页面布局的利器

希望收藏了这篇文章的你同时也可以关注一下“web前端edu”的微信号,因为这些文章都是连载的,并且是经过系统的归纳和总结的。塌下心来认真阅读,你一定会学到对你有用的知识。

盒属性主要涉及到三类CSS属性:

  • padding

  • margin

  • border

一、CSS中的盒概念:

CSS技术将HTML中所有的元素都认为是一个“盒子”,并把这个“盒子”分为了三个组成部分,这三个组成部分分别叫做“填充”、“边界”、“边框”。顾名思义,盒子的主要功能就是盛放东西,CSS的意思是将各个HTML标记对看做了容器,而标记对内部存放的文本、图片、列表、表格、表单等都被看做了容器所盛放的内容。

前端设计的常用属性,CSS的盒模型,页面布局的利器

web前端/html5学习群:250777811

一个装有地球的盒子

CSS技术为盒子的三个组成部分下了明确的定义:

  1. 填充:指盒子边框与盒子内容之间的距离。

  2. 边界:指盒子与盒子之间的距离。

  3. 边框:指填充与边界之间的部分。

前端设计的常用属性,CSS的盒模型,页面布局的利器

CSS的盒模型

盒子的三个组成部分中,“填充”和“边界”只提供了相关的距离属性,而“边框”提供了相关的距离属性、颜色属性和样式属性。

二、调整盒子的填充距离:

CSS技术利用padding系列属性来调整盒子的填充距离。

前端设计的常用属性,CSS的盒模型,页面布局的利器

web前端/html5学习群:250777811

CSS技术利用padding系列属性来调整盒子的填充距离

padding属性的取值为四个数值,按照“上、右、底、左”的顺序排列书写,之间用空格隔开。

padding属性的使用格式:

padding:top right bottom left;

padding属性的取值:

  • 带有单位的长度值。

  • auto

  • 百分比

padding属性还派生出下列四个子属性,用于调整四个方向上单独的填充距离:

  • padding-top,设置盒子顶部填充的距离。

  • padding-right,设置盒子右侧填充的距离。

  • padding-bottom,设置盒子底部填充的距离。

  • padding-left,设置盒子左侧填充的距离。

注意:盒子的填充具备了数值后,为了保证盒子的大小不发生变化,必须修改盒子的宽度和高度。

  • 盒子的实际高度=盒子的期望高度-盒子的顶部填充距离-盒子的底部填充距离

  • 盒子的实际宽度=盒子的期望宽度-盒子的左侧填充距离-盒子的右侧填充距离

例如:希望创建一个宽度为500,高度为300的盒子。同时顶部填充距离为10像素,左侧填充距离为20像素,右侧和底部填充均不设置,则padding属性取值如下:

padding:10px 0 0 20px;

因此,计算盒子的实际宽高:

  1. 盒子的实际高度=300px-10px-0px=290px

  2. 盒子的实际宽度=500px-20px-0px=480px

所以,该盒子的CSS代码应设置为如下所示:

width:480px; height:290px;

padding:10px 0 0 20px;

当然,有开发经验的人一定知道,CSS3技术提供了一个名为box-sizing的属性,避免了这类填充相减的复杂操作。在后续的文章中,我会为大家全面介绍CSS3技术的使用。

三、调整盒子的边界距离:

CSS技术利用margin系列属性来调整盒子的边界距离。

前端设计的常用属性,CSS的盒模型,页面布局的利器

CSS技术利用margin系列属性来调整盒子的边界距离

margin属性的取值为四个数值,按照“上、右、底、左”的顺序排列书写,之间用空格隔开。

margin属性的使用格式:

margin:top right bottom left;

margin属性的取值:

  • 带有单位的长度值(可以取负值)。

  • auto

  • 百分比

margin属性还派生出下列四个子属性,用于调整四个方向上单独的边界距离:

  • margin-top,设置盒子顶部边界的距离。

  • margin-right,设置盒子右侧边界的距离。

  • margin-bottom,设置盒子底部边界的距离。

  • margin-left,设置盒子左侧边界的距离。

四、调整盒子的边框

CSS技术利用border系列属性来调整盒子的边框。

前端设计的常用属性,CSS的盒模型,页面布局的利器

web前端/html5学习群:250777811

CSS技术利用border系列属性来调整盒子的边框

1、调整盒子边框的粗细:

  • border-top-width,设置盒子顶部边框的粗细。

  • border-right-width,设置盒子右侧边框的粗细。

  • border-bottom-width,设置盒子底部边框的粗细。

  • border-left-width,设置盒子左侧边框的粗细。

  • border-width,设置盒子四个方向边框的粗细。

border-width属性的使用格式:

border-width:top right bottom left;

2、调整盒子边框的颜色:

  • border-top-color,设置盒子顶部边框的颜色。

  • border-right-color,设置盒子右侧边框的颜色。

  • border-bottom-color,设置盒子底部边框的颜色。

  • border-left-color,设置盒子左侧边框的颜色。

  • border-color,设置盒子四个方向边框的颜色。

border-color属性的使用格式:

border-color:top right bottom left;

3、调整盒子边框的样式:

  • border-top-style,设置盒子顶部边框的样式。

  • border-right-style,设置盒子右侧边框的样式。

  • border-bottom-style,设置盒子底部边框的样式。

  • border-left-style,设置盒子左侧边框的样式。

  • border-style,设置盒子四个方向边框的样式。

border-style属性的使用格式:

border-style:top right bottom left;

border-style属性有如下所示的取值:

  • none,盒子无边框。

  • solid,盒子边框为实线。

  • dashed,盒子边框为虚线。

  • dotted,盒子边框为点边框。

  • double,盒子边框为双实线边框。

  • groove,盒子边框为沟槽状。

  • ridge,盒子边框为脊状。

  • inset,盒子边框为凹陷状。

  • outset,盒子边框为凸出状。

4、设置盒子一个位置的边框效果:

CSS还提供了可以设置盒子单个位置边框效果的属性。

  • border-top,设置盒子顶部边框的效果。

  • border-right,设置盒子右侧边框的效果。

  • border-bottom,设置盒子底部边框的效果。

  • border-left,设置盒子左侧边框的效果。

使用格式:

border-top:style width color;

例如:border-top:solid 1px #ff0000;

5、设置盒子所有边框具有相同的效果:

CSS技术还提供了可以调整盒子所有边框都具有相同外观的属性。

  • border,设置盒子四个方向所具备边框外观效果。

使用格式:

使用格式:

border:style width color;

例如:border:solid 1px #ff0000;

web前端/html5学习群:250777811

欢迎关注此公众号→【web前端EDU】跟大佬一起学前端!欢迎大家留言讨论一起转发