前端成长之路:CSS盒子模型

news2024/12/16 12:27:16

盒子模型是页面布局的核心,通过盒子模型才能更好的进行页面布局。

网页布局的本质

网页布局的核心本质其实是:HTML网页元素就是一个个的盒子box,通过CSS可以设置好盒子的样式,和盒子需要摆放的位置;简单说来就是通过CSS摆盒子(盒子是网页元素)。

盒子模型(Box Model)

盒子模型就是:将HTML页面中的布局元素看作是一个矩形的盒子,也就是一个用于盛装内容的容器。CSS盒子模型本质上就是一个“盒子”,这个盒子可以看作这几部分组成:border(盒子的边框)、margin(外边距)、padding(内边距)和content(内容):

边框(border)

border属性可以设置元素的边框。边框主要是由三部分组成:边框的宽度(粗细)、边框的样式、边框的颜色。

边框宽度

border-width属性可以设置边框的粗细,其单位是px。

边框样式

border-style属性可以设置边框的样式,边框的样式有多种:

  1. none(默认): none表示没有边框,当边框样式为none时,边框的宽度设置也没有作用。(很好理解,边框都没有了,设置宽度也没有用)。
  2. solid:将边框样式设置为单实线(这是最常用的样式)。
  3. dashed:将边框样式设置为虚线。
  4. dotted:将边框样式设置为点线。

可以通过border-top/-bottom/-left/-right来分别指定盒子的上下左右不同方向的边框,如可以只指定盒子的下边框:

边框颜色

直接通过border-color属性指定边框颜色,颜色指定还是有三种方式(直接使用定义好的颜色、rgb表示法、十六进制表示法),定义十分简单。

需要学习一个边框的简写方式:可以直接在border属性中定义这些边框的属性:

这定义了一个宽度为1px的红色虚线边框,这些属性值没有顺序。

表格中的细线边框

通过border-collapse属性可以控制浏览器绘制表格边框的方式,其控制的是相邻单元格的边框。可以通过设置border-collapse: collapse来让两个相邻单元格的边框合并在一起。

我们给表格添加边框,然后看一下没有collapse属性的表格在页面中的样子:

表格中的每一个单元格都是一个盒子,有自己的边框, 但是这样的表格完全不符合我们的预期:日常中我们看见的表格明显不是这种样式的,此时就需要给整个表格设置相邻单元格边框合并属性border-collapse了:

这样之后,表格中相邻单元格的边框就会合并,页面中展示的表格才是更加符合我们预期的表格。

还需要注意:边框会影响盒子的实际大小: 边框会额外增加盒子的大小,相当于盒子的实际大小是“盒子设置的原本大小 + 边框的大小”,这会略微的影响盒子的大小,进而影响我们布局,对于这个问题,我们有两种方案解决:1.测量盒子大小时,不测量其边框的大小;2.如果测量时包含了盒子的边框大小,那么设置width、height属性时需要减去边框大小。

内边距(padding)

盒子模型中的padding属性用于设置内边距,也就是盒子边框和内容之间的距离。内边距也是有四个方向(left、right、top、bottom)上下左右都有内边距,可以通过padding-left/-right/-top/-bottom指定,但是padding的简写使用得更加广泛:

padding属性的简写是根据padding属性的值的个数进行判断的:

  1. padding有一个值:padding: 5px,一个值,代表上下左右都有内边距。
  2. padding有两个值:padding: 5px 10px;,两个值,代表上下边距和左右边距分别是5和10.
  3. padding有三个值:padding: 5px 10px 20px,三个值,代表其上内边距5px,左右边距为10px,下边距为20px。
  4. padding有四个值:padding: 5px 10px 20px 30px,四个值,代表上内边距为5px、右内边距为10px、下内边距为20px、左内边距为30px,是顺时针方向。

当我们给盒子指定了内边距padding值之后,发生了两件事情:

  1. 盒子中的内容和边框之间有了距离,添加了内边距。
  2. padding内边距也会影响盒子的实际大小。换句话说,假如盒子已经具有了宽度和高度,此时再指定内边框的大小,会将盒子的大小撑大(因为要保证盒子大小是设置的值,但是现在有了内边距,所以说要撑大盒子才可以保证)。

解决方法就是让设置的weight和height减去padding内边距的值即可。padding内边距还可以撑开盒子,也会影响到盒子的实际大小,解决方法和上面的方法类似。但是假如本身没有指定盒子的width/height的属性,那么padding内边距不会撑开盒子。

外边距(margin)

margin用于设置外边距,就是用于设置盒子和盒子之间的大小,margin外边距的属性和padding内边距的设置一模一样,也是分上下左右四个方向,此处不过多赘述。

外边距的典型应用

水平居中

通过设置外边距可以让块级盒子水平居中,但是必须满足两个条件:

  1. 盒子的宽度(width)属性必须设置。
  2. 盒子的左右外边距都设置为auto。

这样设置之后,块级元素就可以水平居中了。上述方法是用于块级元素的水平居中,行内元素(或行内块元素)使用text-align:center属性即可。

外边距合并

使用margin定义块级元素的垂直外边距时,可能会出现外边距合并。主要有两种情况:

  1. 相邻的块元素垂直外边距的合并。

当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top ,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

这种垂直合并问题的解决方法是:在父元素或子元素上添加边框或内边距,就可以避免外边距合并,但是尽量只给每一个盒子添加一个margin值。

  1. 嵌套块元素垂直外边距的塌陷。

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值(塌陷就很形象)。

解决方法:1.可以为父元素定义边框、或者上内边距;2.为父元素添加overflow:hidden属性。还有其他方法,此处不再展开。

清除内外边距

网页中的很多元素都带有默认的内外边距,而且在不同的浏览器默认的值也有所差异,为了网页在不同浏览器上的显示一致性,在布局前一般习惯清除网页元素的内外边距:

这样我们再设置每个元素的内外边距就在浏览器中显示一样的内容了。注意:行内元素为了照顾其兼容性,不要设置其上下内外边距,尽量只设置左右内外边距;如果不得不设置上下,建议先转换为块级元素或者行内块元素。

盒子模型的新东西

在CSS3中新增了盒子模型的一些新的属性。

圆角边框

新增了圆角边框的样式,这样我们的盒子就可以变成圆角了。通过border-radius属性设置元素的外边框圆角。

可以看见,盒子确实变圆润了。radius的参数可以设置为数值(单位:像素)或者百分比;假如盒子是个正方形,想要设置为一个圆,那么直接写50%即可(或者可以将高度修改为宽度一半)。 也可以分开进行赋值:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius;分别对应左上、右上、左下、右下。

盒子阴影

可以使用box-shadow属性为盒子添加阴影,其语法如下:

盒子阴影不占用空间,不会影响其他盒子的布局排列。

文字阴影

可以通过text-shadow设置文字阴影:

其设置方式和盒子阴影类似,了解一下即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2260492.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LeetCode刷题 -- 字符串

目录 最长公共前缀题目解析算法原理代码 最长回文子串题目解析算法原理代码 二进制求和题目解析算法原理代码 字符串相乘题目解析算法原理代码 最长公共前缀 题目链接 题目解析 只需找出字符串中的公共的最长字符串即可 算法原理 1.法一:两两字符串比较,…

4G模块详解

在之前的教程中,无线通信技术我们学习了蓝牙和 WiFi,今天我们要来学习 4G。 4G 模块在距离上有个突破,它不像蓝牙短距离,也不像 WiFi 只能在局域网,4G 模块可使用户无论在哪,只要有 4G 网络信号覆盖&#…

uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能

前言 这次的标题有点长,主要是想要表述的功能点有点多; 简单做一下需求描述 产品要求在商品详情页的头部轮播图部分,可以单击预览大图,同时在预览界面可以双指放大缩小图片并且可以移动查看图片,双击放大&#xff0…

数据地图怎么做?推荐这款数据可视化地图生成器

在数字化与信息化高速发展的今天,企业迎来了前所未有的发展机遇,规模迅速扩张,市场版图不断延伸。然而,伴随着这种快速的发展,一个不容忽视的问题逐渐浮出水面——如何精准高效地掌握分布在各地的分公司、业务点乃至整…

hive—常用的日期函数

目录 1、current_date 当前日期 2、now() 或 current_timestamp() 当前时间 3、datediff(endDate, startDate) 计算日期相差天数 4、months_between(endDate, startDate) 日期相差月数 5、date_add(startDate, numDays) 日期加N天 6、date_sub(startDate, numDays) 日期减…

【原生js案例】如何让你的网页实现图片的按需加载

按需加载,这个词应该都不陌生了。我用到你的时候,你才出现就可以了。对于一个很多图片的网站,按需加载图片是优化网站性能的一个关键点。减少无效的http请求,提升网站加载速度。 感兴趣的可以关注下我的系列课程【webApp之h5端实…

大模型运用-Prompt Engineering(提示工程)

什么是提示工程 提示工程 提示工程也叫指令工程,涉及到如何设计、优化和管理这些Prompt,以确保AI模型能够准确、高效地执行用户的指令,如:讲个笑话、java写个排序算法等 使用目的 1.获得具体问题的具体结果。(如&…

相位小数偏差(UPD)估计基本原理

PPP中的一个关键性难题在于非差模糊度固定,成功固定非差模糊度可以使 PPP 的收敛速度和定位精度得到显著提升 。 相位小数偏差 (UPD) 是致使相位模糊度失去整数特性的主要因素,精确估计并校正 UPD 是实现非差模糊度固定的重要前提,也是实现…

ES倒排索引实现? ES 索引文档过程?ES并发下读写一致?

ES倒排索引实现, ES 索引文档过程,ES并发下读写一致 一、Elasticsearch的基本概念二、Elasticsearch的工作原理简述三、Elasticsearch的应用场景四、面试问题问题1:Elasticsearch中的分片和副本是如何工作的?分片和副本的大小和数…

【h5py】 提取mat文件中的HDF5格式的数据

h5py 提取mat文件中的HDF5格式的数据 使用纯Python查看数据配合Matlab后,使用Python查看数据 一、使用纯Python查看文件数据内容 原理:当HDF5存储的是struct类型数据,解析时要像一棵树,我们需要逐层次的去解析,直到…

【数据分享】2013-2023年我国省市县三级的逐年CO数据(免费获取\excel\shp格式)

空气质量数据是在我们日常研究中经常使用的数据!之前我们给大家分享了2000-2023年的省市县三级的逐年PM2.5数据、2000-2023年的省市县三级的逐年PM10数据、2013-2023年的省市县三级的逐年SO2数据、2000-2023年省市县三级的逐年O3数据和2008-2023年我国省市县三级的逐…

《九重紫》逐集分析鉴赏第一集(下)

主标题:《九重紫》一起追剧吧 副标题:《九重紫》逐集分析鉴赏第一集(下)/《九重紫》逐集分析鉴赏1 接上回分解,窦昭和宋墨都安置城外万佛寺 交谈没一会儿,天还未亮,兵临寺下 记住这个人&…

Summarizing and Understanding Large Graphs

Summarizing and Understanding Large Graphs【总结和理解大规模图】 ☆ 研究背景 大规模图的理解和可视化是一个重要的开放性问题现有的社区发现和聚类方法无法很好地总结图的特征需要一种能够发现和描述图中重要结构的方法 ★ 成果简介 提出了VoG(Vocabulary-based summar…

人工智能系统

介绍人工智能 的基础书 点击这里 1.1 深度学习的历史,现状与发展 本章将介绍深度学习的由来,现状和趋势,让读者能够了解人工智能系统之上的深度学习负载的由来与趋势,为后面理解深度学习系统的设计和权衡形成初步的基础。我们在后…

康佳Android面试题及参考答案(多张原理图)

JVM 内存分布和分代回收机制是什么? JVM 内存主要分为以下几个区域。 堆(Heap)是 JVM 管理的最大的一块内存区域,主要用于存放对象实例。所有线程共享堆内存,在堆中又分为年轻代(Young Generation)和老年代(Old Generation)。年轻代又分为 Eden 区和两个 Survivor 区(…

(css)element中el-select下拉框整体样式修改

(css)element中el-select下拉框整体样式修改 重点代码(颜色可行修改) // 修改input默认值颜色 兼容其它主流浏览器 /deep/ input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.50); } /deep/ input::-moz-input-placeholder {color: rgba…

论文概览 |《Sustainable Cities and Society》2024.12 Vol.116

本次给大家整理的是《Sustainable Cities and Society》杂志2024年12月第116期的论文的题目和摘要,一共包括52篇SCI论文! 论文1 Enhancing road traffic flow in sustainable cities through transformer models: Advancements and challenges 通过变压…

【电源专题】开关转换器的三种过流保护方案

开关转换器内部集成功率开关,使限流保护成为基本功能。常用限流方案有三种:恒流限流、折返限流和打嗝模式限流。 恒流限流 对于恒流限流方案,当发生过载情况时,输出电流保持恒定值(ILIMIT)。因此,输出电压会下降。这种方案通过逐周期限流实现,利用流经功率开关的峰值电感…

网络与安全

文章目录 网络协议OSI七层模型TCP/IP协议族TCP协议UDP协议HTTP协议HTTPS协议 SocketSocket编程粘包与拆包 网络安全常见网络攻击及防护放火墙网络加密技术 跨域问题 网络协议 网络协议是计算机网络中设备和系统之间进行数据交换的规则和约定。它定义了数据的格式、传输方式、处…

鸿蒙项目云捐助第六讲鸿蒙App应用的首页导航资讯推荐功能的实现

鸿蒙项目云捐助第六讲鸿蒙App应用的首页导航资讯推荐功能的实现 前面的教程中已实现了启动页,登录页,注册页及首页的部分功能。这里有一些朋友提出问题,如何设置登录页面的背景图片。这里稍带说一个这个功能的实现。 一、登录页面的背景图片…