【Web前端】盒子模型_元素分类_表格

1、盒子模型

1.1简介

  • CSS盒子模型是在网页设计中经常用到的CSS技术所使用的一种思维模型。包括内容(content)、内边距(padding)、边框(border)、外边距(margin)

1.2边框(border)

1.2.1简介

  • 边框是环绕内容区和填充的边界。
  • 边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

1.2.2颜色

  • border-top-color上边框颜色
  • border-right-color 右边框颜色
  • border-bottom-color下边框颜色
  • border-left-color 左边框颜色
  • border-color 四个边框统一颜色
  • border-color: red green;上下是red,左右是green
  • border-color: red yellow green; 上是red,下是green,左右是 yellow
  • border-color: red yellow green pink;按顺时针赋值,上red yellow green pink

1.2.3宽度

  • border-width10px;
  • border-top-width10px;
  • border-bottom-width10px;
  • border-rightwidth10px;
  • border-left-width10px;

1.2.4样式

border-style:solid;

  • solid: 实线
  • dotted: 小圆点线
  • dashed: 虚线
  • double: 双实线
  • hidden: 隐藏

1.3内边距(padding)

1.3.1简介

  • 内边距是内容区和之间的空间。
  • 内边距的属性有五种 ,即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。

1.4外边距(margin)

1.4.1简介

  • 外边距位于盒子的最外围,是添加在边框外周围的空间。外边距使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。
  • 外边距的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷外边距属性margin,其具体的设置和使用与填充属性类似。

1.5内容(content)

1.5.1简介

  • 内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。
  • 内容区有三个属性,width、height 和overflow。

2、元素分类

2.1元素分类

  • 行级元素
  • 块级元素
  • 内联块元素

2.2行级元素inline

  • 默认在同一行显示
  • 后面可以继续跟同类型标签
  • 宽度是由内容撑开的
  • 不支持用户设置宽度
  • 不支持用户设置高度
  • 不支持上下外边距,支持左右外边距

2.3块级元素block

  • 默认独占一行
  • 支持CSS所有控制的指令
  • 如果没有设置宽度,默认占满一行
  • 如果没有设置高度,高度由内容撑开

2.4内联块元素inline-block

  • 元素在一行显示
  • 支持宽和高设置

3、表格

3.1基本标签

  • table标签:表格最外层元素定义
  • tr标签:定义表格的行
  • td标签:定义单元格
  • th标签:表头单元格,默认文字居中加粗
  • caption标签:表格的标题
  • theadtbodytfoot是表格语义化,标识表头、表身、表脚部分,没有实质意义

3.2表格合并

  • 跨占列: colspan
  • 跨占行:rowspan

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch 实现情感分析

情感分析 情感分析是 NLP 一种应用场景,模型判断输入语句是积极的还是消极的,实际应用适用于评论、客服等多场景。情感分析通过 transformer 架构中的 encoder 层再加上情感分类层进行实现。 安装依赖 需要安装 Poytorch NLP 相关依赖 pip install t…

免费SSL证书?轻松申请攻略来了!

在当今的互联网时代,网络安全已经成为一个不容忽视的重要课题。随着在线交流和交易活动的增加,保护网站和用户信息的重要性日益突显。SSL证书,即安全套接字层证书,它为互联网通信提供了加密服务,确保数据的安全性和完整…

光伏远动通讯屏的组成

光伏远动通讯屏的组成 远动通讯屏主要用于电力系统数据采集与转发,远动通讯屏能够采集站内的各种数据,如模拟量、开关量和数字量等,并通过远动通讯规约将必要的数据上传至集控站或调度系统。这包括但不限于主变和输电线路的功率、电流、电压等…

怎么设置一天多个时间点的闹钟提醒?

在日常生活中,我们经常需要在一天的不同时间点完成特定的任务,如定时喝水、定时查看后台数据、定时吃药等。这时候,如果能有一款软件,可以在一条日程里轻松设置多个时间点的闹钟提醒,那将大大提高我们的工作效率和生活…

如何理解GTX接收通道相关模块?(高速收发器三)

前文讲解了GTX的时钟及发送通道相关内容,本文讲解GTX接收通道的一些功能及其IP配置,接收往往比发送设计更难,与调制解调,加密解密其实相差不大,后者难度都比前者高出很多。GTX的接收通道的功能相比发送通道更加重要&am…

西奥CHT-01软胶囊硬度测试仪:重塑行业标杆,引领硬度测试新纪元

西奥CHT-01软胶囊硬度测试仪:重塑行业标杆,引领硬度测试新纪元 在当今医药领域,软胶囊作为一种广泛应用的药品剂型,其品质的稳定性和安全性直接关系到患者的健康。而在确保软胶囊品质的各项指标中,硬度测试尤为关键。…

AIGC实战——多模态模型DALL.E 2

AIGC实战——多模态模型DALL.E 2 0. 前言1. 模型架构2. 文本编码器3. CLIP4. 先验模型4.1 自回归先验模型4.2 扩散先验模型 5. 解码器5.1 GLIDE5.2 上采样器 6. DALL.E 2 应用6.1 图像变体6.2 先验模型的重要性6.3 DALL.E 2 限制 小结系列链接 0. 前言 DALL.E 2 是 OpenAI 设计…

领域驱动设计架构演进

领域驱动设计由于其强调对领域的深入理解和关注业务价值,其架构演进依赖于领域的变化和特定领域中的技术实践。 初始阶段 一个单体架构,所有的功能都集成在一个应用程序中,领域模型可能还不完全清晰,甚至并未形成。这个阶段主要是为了验证产品的可行性,快速迭代并尽快推…

有没有国内个人可用的GPT平替?推荐5个AI工具

随着AI技术的快速发展,AI写作正成为创作的新风口。但是面对GPT-4这样的国际巨头,国内很多小伙伴往往望而却步,究其原因,就是它的使用门槛高,还有成本的考量。 不过,随着GPT技术的火热,国内也涌…

2023年度合肥市优秀知识产权服务机构评选申报主体条件、材料和时间程序须知

一、申报主体 在合肥市行政区域内登记注册的知识产权服务机构, 二、申报条件 (一)在合肥市登记注册时间满1年,营业执照经营范围包含知识产权代理、服务等相关内容; (二)在全国专利代理信息公示平台进行备案; (三)有稳定的专业服务人才队伍和服务对象…

【SSL证书】免费单域名SSL证书怎么申请

1、访问证书颁发机构(CA):比如JoySSL、ZeroSSL、各大云平台等,这些机构提供免费的SSL证书申请,并支持单域名证书。在网站上注册账号,并根据提示选择单域名证书进行申请。 !!&#xf…

工厂模式应用实例

引言 设计模式概念 设计模式(Design Pattern)的官方概念可以表述为:在软件设计中,设计模式是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。它是针对特定问题或特定场景的解决方案,是一种经过…

使用STM32CubeMX进行STM32F4的定时器配置

目录 1. Pin脚2. 配置2.1 时钟配置2.2 RCC配置2.3 Timer配置2.4 输出文件 3. 代码3.1 使能定时器3.2 回调函数 1. Pin脚 2. 配置 2.1 时钟配置 timer3时钟挂载在APB1上: 时钟配置如下: 外部使用8MHz晶振 开启内部16MHz晶振 使用锁相环 开启最高100MHz。…

揭秘依赖注入:软件开发人员的基本指南

Dependency injection (DI) is a design pattern and programming technique to manage dependencies between different components. 依赖注入(DI)是一种用于管理不同组件之间依赖关系的设计模式和编程技术。 In DI, the dependencies of a class or ot…

机台统一管理有多困难?但现在出现可行的解决方案了

机台的统一管理对于企业来说对提高生产效率、降低成本、优化资源配置以及保障生产安全等方面都具有至关重要的作用。但企业机台统一管理却存在实际的困难,主要体现在: 多样化的设备和运作模式:由于机台设备可能来自不同的厂商,其规…

如何描述自己的算法?

算法的表达 好的,让我们来一起探讨如何向别人介绍我们的算法。说话很简单,但要把话说清楚,说明白就不那么容易了。同样的道理,能够通俗易懂,直观清晰和严谨地描述一个算法,也是一项具有挑战性的任务。接下…

106短信群发平台在金融和法务行业的应用分析

一、金融行业应用 1.客户通知与提醒:银行、证券、保险等金融机构经常需要向客户发送各类通知和提醒,如账户余额变动、交易确认、扣费通知、理财产品到期提醒等。106短信群发平台可以快速、准确地将这些信息发送到客户的手机上,确保客户及时获…

.NET邮箱API发送邮件的步骤?怎么配置API?

.NET邮箱API发送邮件需要注意哪些?如何使用API发信? 在.NET环境中,使用邮箱API发送邮件是一个常见的需求。无论是企业级的邮件通知,还是个人项目中的邮件验证,都少不了.NET邮箱API的帮助。下面,AokSend将详…

我的创作纪念日(365天)

时间如白驹过隙,转眼间,我已经在技术写作这条路上走过了365个日夜。回望2023年5月9日,我敲下了第1篇技术博客的标题——《什么是代理IP?代理IP有什么用途》。那一天,平凡而又不平凡,因为我决定将自己的知识…

政安晨【零基础玩转各类开源AI项目】:基于Ubuntu系统本地部署使用GPT-SoVITS进行语音克隆与TTS语音生成

目录 介绍 什么是TTS 安装Miniconda 框架功能 测试通过的环境 开始 1. 安装好miniconda 2. 进入下载的GPT-SoVITS目录 3. 创建虚拟环境并执行脚本 4. 执行过程中可能会出错 5. 下载预训练模型 6. 训练过程中可能会报错 7. 使用过程中可能出错 8.以下是使用全过程…
最新文章