【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://xiahunao.cn/news/3019519.html

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

相关文章

C++——list和string

list与string 前言一、listlist.hList的节点类List的迭代器类list类list.h 完整实现 list.cppList的节点类List的迭代器类list类list.cpp 完整实现 二、stringstring.hstring.cpp 总结 前言 C容器的学习开始啦! 大家先来学习list! 紧接着string和vector…

C#高级编程笔记-泛型

本章的主要内容如下: ● 泛型概述 ● 创建泛型类 ● 泛型类的特性 ● 泛型接口 ● 泛型结构 ● 泛型方法 目录 1.1 泛型概述 1.1.1 性能 1.1.2 类型安全 1.1.3 二进制代码的重用 1.1.4 代码的扩展 1.1.5 命名…

基于随机森林与支持向量机的高光谱图像分类(含python代码)

目录 一、背景 二、代码实现 三、项目代码 一、背景 基于深度学习的教程(卷积神经网络)详见:基于卷积神经网络的高光谱图像分类详细教程(含python代码)-CSDN博客 在高光谱图像分类领域,随机森林&#…

「JavaEE」多线程案例1:单例模式阻塞队列

多线程案例分析 单例模式饿汉模式懒汉模式指令重排序 阻塞队列生产者消费者模型实现阻塞队列 单例模式 单例模式是一种设计模式。所谓“单例”,就是只有一个实例 如果某个类在一个进程中只应该创建出一个实例(或者说原则上不应该有多个)&…

PostgreSQL自带的命令行工具13- pg_waldump

PostgreSQL自带的命令行工具13- pg_waldump 基础信息 OS版本:Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本:16.2 pg软件目录:/home/pg16/soft pg数据目录:/home/pg16/data 端口:5777pg_waldump 是 Po…

目标检测CNN 目标检测发展历程 应用场景 智慧交通 自动驾驶 工业生产 智慧医疗

目标检测 目标检测是计算机视觉领域中的一个重要任务,其主要目的是让计算机能够自动识别图像或视频帧中所有目标的类别,并在目标周围绘制边界框以标示出每个目标的位置。 目标检测的过程通常包括两个主要步骤:目标定位和目标分类。目标定位是确定图像中是否存在感兴趣的目…

51单片机keil编程中遇到的问题(持续更新)

字符无法打印报错 查看特殊功能寄存器名字的时候也会报错,因为无法编译通过,导致头文件的定义内容无法查找 keil编译中 error C127: ‘xx’: invalid storage class 这种一般是在编写头文件或源文件时,在声明函数的结尾没有添加分号&…

SOCKET编程(1):基本概念

基本概念 socket分类 socket提供了**流(stream)和数据报(datagram)**两种通信机制,即流socket和数据报socket 流socket基于TCP协议,是一个有序、可靠、双向字节流的通道,传输数据不会丢失、不会重复、顺序也不会错乱 数据报socket基于UDP…

今天遇到一个GPT解决不了的问题

问题描述 你好,postman的一个post请求,编辑器里面放了一个很长的json数据,报Tokenization is skipped for long lines for performance reasons. This can be configured via editor.maxTokenizationLineLength.,但是同样的数据&a…

Star15.3k,开源数据可视化分析工具项目

好东西来了,这是一个人人可用的开源数据可视化分析工具项目,V 哥迫不及待的要给大家推荐这个项目,帆软、Tableau 等商业 BI 工具的开源替代,已在 Github 上被 Star了15.3k了,大家一起来了解一下。自己搭建起来可用&…

QSplitter分裂器的使用方法

1.QSplitter介绍 QSplitter是Qt框架提供的一个基础窗口控件类,主要用于分割窗口,使用户能够通过拖动分隔条来调节子窗口的大小。 2.QSplitter的添加方法 (1)通过Qt Creator的界面设计工具添加; (2&#xf…

DrissionPage

声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!本文章未经许…

RUST 编程语言使构建更安全的软件变得更加容易。RUST ALL THE THINGS 需要什么?

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

机器学习:基于K-近邻(KNN)、高斯贝叶斯(GaussianNB)、SVC、随机森林(RF)、梯度提升树(GBDT)预测葡萄酒质量

前言 系列专栏:机器学习:高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目,每个项目都处理一组不同的问题,包括监督和无监督学习、分类、回归和聚类,而且涉及创建深度学…

车辆充电桩|基于Springboot+vue的车辆充电桩管理系统的设计与实现(源码+数据库+文档)

车辆充电桩管理系统 目录 基于Springboot+vue的车辆充电桩管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1 前台功能模块 4.1.1 首页功能 4.1.2 用户后台管理 2 后台功能模块 4.2.1 管理员功能 4.2.2 维修员功能 四、数据库设计 五、核…

公众号流量主的收益怎么样?

公众号之前是一个私域平台,没有粉丝基本是没有推荐的,所以之前入门的门槛还是很高的,但是今年公众号和视频号改变了推流的机制,现在发的文章会进入到流量池中,进入到公域流量,所以发布的优质文章会大爆的&a…

演唱会新风:允许部分歌手闭麦,让观众先唱

演唱会市场的热度从2023年延续至今,出现了一些“倒反天罡”的现象。 例如:让歌迷在台下给歌手唱歌。 5月6日抖音娱乐榜第一的消息是“第一次见辟谣观众没假唱的”。原因是凤凰传奇在常州和北京鸟巢先后举办两场演唱会,其中鸟巢演唱会被认为…

工程技术SCI期刊,中科院三区,一投就中,国人友刊!

一、期刊名称 Industrial Management & Data Systems 二、期刊简介概况 期刊类型:SCI 学科领域:工程技术 影响因子:5.5 中科院分区:3区 出版方式:订阅模式/开放出版 版面费:$4120 三、期刊征稿范…

500的项目研发成本2000?

上个月接了一个小程序的二开项目,功能不多就2个诉求:调整首页数据排序规则,帖子详情增加一个海报,报了一个我认为还比较合适的价格500。 当我拿到代码的那一刻有点小害怕,因为这个客户的之前合作过一次,项…

Chromium编译指南2024 Windows11篇-获取 Chromium 的源代码(五)

前言 在《Chromium编译指南2024(四)》中,我们完成了Git 的初始化配置。 现在,我们将进一步讨论如何获取 Chromium 的源代码,并准备构建所需的文件。 1. 获取Chromium的源代码 在合适的位置准备一个文件夹&#xff…