当前位置: 首页 > news >正文

CSS入门基础2

目录

1.标签类型

2.块元素

3.行内元素 

4.行内块元素

5.标签行内转换

6.背景样式


1.标签类型

  • 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个
  • HTML标签一般分为块标签和行内标签两种类型:
    • 块元素
    • 行内元素。

2.块元素

  • 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
  • 块元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
  • 特点:
    • 总是从新行开始
    • 高度、宽度、行高、外边距以及内边距都可以控制
    • 宽度默认是容器的100%
    • 可以容纳内联元素和其他块元素

3.行内元素 

  • 行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
  • 行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
  • 特点:
    • 和相邻行内元素在一行上
    • 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
    • 默认宽度就是它本身内容的宽度
    • 行内元素只能容纳文本或则其他行内元素

4.行内块元素

  • 行内元素:<img />、<input />>
  • 特点:
    • 默认宽度就是它本身内容的宽度
    • 宽度,高度,行高、外边距以及内边距都可以控制

5.标签行内转换

  • 块转行内:display:inline;

  • 行内转块:display:block;

  • 块、行内元素转换为行内块: display: inline-block;

6.背景样式

  • 1.背景颜色:background-color

.box {/* 下面3种写法是等价的 */background-color: red;background-color: rgb(255, 0, 0);background-color: #ff0000;
}
  • 2.背景图片:background-image
.box {background-image: url("./cat.jpg");
}
  • 3.图片重复方式:background-repeat
    • 属性值:repeat | repeat-x | repeat-y | no-repeat
    • 描述:设置背景图片
    • repeat:默认。背景图像将在垂直方向和水平方向重复。
    • repeat-x:背景图像将在水平方向重复。
    • repeat-y:背景图像将在垂直方向重复。
    • no-repeat:背景图像将仅显示一次。

.box {/* repeat 默认值,默认情况下,在水平和垂直方向上都重复*/background-repeat: repeat;background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: no-repeat;
}
  • 4.图片位置:background-position
.box {background-position: 40px 40px;(水平位置、垂直位置)background-position: 20% 20%;background-position: right bottom;
}

相关文章:

CSS入门基础2

目录 1.标签类型 2.块元素 3.行内元素 4.行内块元素 5.标签行内转换 6.背景样式 1.标签类型 标签以什么方式进行显示&#xff0c;比如div 自己占一行&#xff0c; 比如span 一行可以放很多个HTML标签一般分为块标签和行内标签两种类型&#xff1a; 块元素行内元素。 2.块…...

Mac vscode could not import github.com/gin-gonic/gin

问题背景&#xff1a; 第一次导入一个go的项目就报红 问题分析&#xff1a; 其实就是之前没有下载和导入gin这个web框架包 gin是一个golang的微框架&#xff0c;封装比较优雅&#xff0c;API友好&#xff0c;源码注释比较明确。 问题解决&#xff1a; 依次输入以下命令。通…...

MySQL修改用户权限(宝塔)

在我们安装好的MySQL中&#xff0c;很可能对应某些操作时&#xff0c;不具备操作的权限&#xff0c;如下是解决这些问题的方法 我以宝塔创建数据库为例&#xff0c;创建完成后&#xff0c;以创建的用户名和密码登录 这里宝塔中容易发生问题的地方&#xff0c;登录不上去&#…...

论文阅读(一种新的稀疏PCA求解方式)Sparse PCA: A Geometric Approach

这是一篇来自JMLR的论文&#xff0c;论文主要关注稀疏主成分分析&#xff08;Sparse PCA&#xff09;的问题&#xff0c;提出了一种新颖的几何解法&#xff08;GeoSPCA&#xff09;。 该方法相比传统稀疏PCA的解法的优点&#xff1a;1&#xff09;更容易找到全局最优&#xff…...

Chrome/Edge浏览器视频画中画可拉动进度条插件

目录 前言 一、Separate Window 忽略插件安装&#xff0c;直接使用 注意事项 插件缺点 1 .无置顶功能 2.保留原网页&#xff0c;但会刷新原网页 3.窗口不够美观 二、弹幕画中画播放器 三、失败的尝试 三、Potplayer播放器 总结 前言 平时看一些视频的时候&#xff…...

pg修炼之道学习笔记

一、数据库逻辑结构介绍 1、一个pg数据库服务下有多个db&#xff08;多个数据库&#xff09;&#xff0c;当应用连接到一个数据库时&#xff0c;一般只能访问这个数据库中的数据&#xff0c;而不能访问其他数据库的内容&#xff08;限制&#xff09; 2、表索引&#xff1a;一…...

使用宝塔面板部署Django应用(不成功Kill Me!)

使用宝塔面板部署Django应用 文章目录 使用宝塔面板部署Django应用 本地操作宝塔面板部署可能部署失败的情况 本地操作 备份数据库 # 备份数据库 mysqldump -u root -p blog > blog.sql创建requirements # 创建requirements.txt pip freeze > requirements.txt将本项目…...

c++深拷贝、浅拷贝

在 C 中&#xff0c;深拷贝和浅拷贝是两个重要的概念&#xff0c;尤其在涉及动态内存分配和指针成员时。这两个概念描述了对象复制时的行为。 浅拷贝 浅拷贝是指复制对象时&#xff0c;仅复制对象的基本数据成员&#xff0c;对于指针成员&#xff0c;只复制指针地址&#xff…...

k8s核心组件

Master组件&#xff1a; kube-apiserver&#xff1a;用于暴露Kubernetes API&#xff0c;任何资源请求或调用操作都是通过kube-apiserver提供的接口进行。它是Kubernetes集群架构的大脑&#xff0c;负责接收所有请求&#xff0c;并根据用户的具体请求通知其他组件工作。etcd&am…...

反编译腾讯vmp

反编译腾讯vmp 继续学习的过程 多翻译几个vmp 学习 看看他们的是怎么编译的 写一个自己的vmp function __TENCENT_CHAOS_VM(U, T, g, D, j, E, K, w) {// U指令起点// T是指令list// g是函数this 或window对象// D是内部变量和栈}for (0; ;)try {for (var B !1; !B;) {let no…...

Ollama:本地部署大模型 + LobeChat:聊天界面 = 自己的ChatGPT

本地部署大模型 在本地部署大模型有多种方式&#xff0c;其中Ollama方式是最简单的&#xff0c;但是其也有一定的局限性&#xff0c;比如大模型没有其支持的GGUF二进制格式&#xff0c;就无法使用Ollama方式部署。 GGUF旨在实现快速加载和保存大语言模型&#xff0c;并易于阅读…...

JS中splice怎么使用

在JavaScript中&#xff0c;splice() 是一个数组方法&#xff0c;用于添加/删除项目&#xff0c;并返回被删除的项目。这个方法会改变原始数组。 splice() 方法的基本语法如下&#xff1a; array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start&#xff08;必…...

Flutter项目,Xcode15, 编译正常,但archive报错

错误提示 PhaseScriptExecution [CP]\ Embed\ Pods\ Frameworks /Users/目录/Developer/Xcode/DerivedData/Runner-brgnkruocugbipaswyuwsjsnqkzm/Build/Intermediates.noindex/ArchiveIntermediates/Runner/IntermediateBuildFilesPath/Runner.build/Release-iphoneos/Runner…...

云动态摘要 2024-06-17

给您带来云厂商的最新动态&#xff0c;最新产品资讯和最新优惠更新。 最新优惠与活动 [低至1折]腾讯混元大模型产品特惠 腾讯云 2024-06-06 腾讯混元大模型产品特惠&#xff0c;新用户1折起&#xff01; 云服务器ECS试用产品续用 阿里云 2024-04-14 云服务器ECS试用产品续用…...

【JavaScript脚本宇宙】图像处理新纪元:探索六大JavaScript图像处理库

揭开图像处理的奥秘&#xff1a;六款顶级JavaScript库详解 前言 在现代Web开发中&#xff0c;图像处理变得越来越重要。从图像比较到图像编辑&#xff0c;每个步骤都需要高效、强大的工具来完成。JavaScript生态系统为开发者提供了丰富的图像处理库&#xff0c;这些库不仅功能…...

使用python调ffmpeg命令将wav文件转为320kbps的mp3

320kbps竟然是mp3的最高采样率&#xff0c;有点低了吧。 import os import subprocessif __name__ __main__:work_dir "D:\\BaiduNetdiskDownload\\周杰伦黑胶\\魔杰座" fileNames os.listdir(work_dir)for filename in fileNames:pure_name, _ os.path.spli…...

程序启动 报错 no main manifest attribute

1、报错问题 未找到启动类 2、可能的原因 启动没加注解maven打包插件没有设置...

java-内部类 2

### 8. 内部类的访问规则和限制 #### 8.1 访问外部类的成员 内部类可以直接访问外部类的成员变量和方法&#xff0c;包括私有成员。例如&#xff1a; java class OuterClass { private String outerField "Outer field"; class InnerClass { void di…...

【小技巧】pycharm中自动换行的实现

pycharm如何自动换行 pycharm在setting里面设置自动化换行 具体步骤如下&#xff1a; &#xff08;我这边用的版本为PyCharm 2023.3版本&#xff09; 1、打开pycharm&#xff0c;选择“file”&#xff08;文件&#xff09; 2、选择“Setting“&#xff08;设置&#xff09;…...

如何修改倍福CX7000PLC IP地址

我们可以通过登录网页修改PLC的IP地址,这个需要我们知道PLC的初始IP地址 1、浏览器直接输入PLC 的IP地址 2、点击修改按钮(就是那个旋转) 修改IP地址前DHCP要先disable关闭 。 3、DHCP关闭 4、点击保存 5、在CAT3里搜索 在SYSTEM双击,之后点击搜索,具体过程可以参考下…...

python安装flask,flask框架,使用静态文件、模板、get和post请求

flask框架安装 pip install flask1.创建app.py文件 启动运行 # 导入Flask类 from flask import Flask#Flask类接收一个参数__name__ app Flask(__name__)# 装饰器的作用是将路由映射到视图函数index app.route(/) def index():return Hello World# Flask应用程序实例的run方…...

Docker:Harbor

目录 一、Harbor介绍 二、安装 Harbor 2.1 环境准备 2.2下载 Harbor 3.3 修改配置&#xff08;可选&#xff09; 3.4 启动 Harbor 3.5访问 Harbor 三、使用 Harbor 3.1 管理Harbor 一、Harbor介绍 Docker Harbor 是由 VMware 公司开源的一款企业级的 Docker Registry …...

2024 6.10~6.16 周报

一、上周工作 完成毕设 二、本周计划 吴恩达的机器学习、实验-回顾之前密集连接部分&#xff0c;调整损失函数 三、完成情况 3.1 机器学习的两种主要类型&#xff1a; 监督学习&#xff08;supervised learning&#xff09;&#xff08;实际中使用最多的&#xff09;&…...

clickhouse学习笔记(四)库、表、分区相关DDL操作

目录 一、数据库操作 1、创建数据库 2、查询及选择数据库 3、删除数据库 二、数据表操作 1、创建表 2、删除表 3、基本操作 ①追加新字段 ②修改字段类型或默认值 ③修改字段注释 ④删除已有字段 ⑤移动数据表&#xff08;重命名&#xff09; ⑥清空表 三、默认值…...

聚焦现代商贸物流愿景 构筑供应链金融服务体系|第二届京津冀现代商贸物流金融创新发展百人大会成功举办

6月16日&#xff0c;以“链产业筑高地赢未来——聚焦现代商贸物流愿景、构筑供应链金融服务体系”为主题的第二届京津冀现代商贸物流金融创新发展百人大会(以下简称“百人大会”)&#xff0c;在2024中国廊坊国际经济贸易洽谈会&#xff08;以下简称“廊坊经洽会”&#xff09;开…...

解锁数据潜力:数据提取与治理的终极指南

解锁数据潜力&#xff1a;数据提取与治理的终极指南 在当今信息爆炸的时代&#xff0c;数据已成为企业决策的核心驱动力。然而&#xff0c;仅仅拥有海量数据并不足以确保竞争优势&#xff0c;关键在于如何有效地提取、治理和利用这些数据。本文将为您揭示数据提取技术的奥秘&a…...

行列视(RCV)报表中的时间是如何处理的?

答&#xff1a;行列视&#xff08;RCV&#xff09;作为一套独立、且用于数据加工、处理和展示的系统&#xff0c;具有一套独立的时间处理机制。报表中的指标除了数据值外&#xff0c;最重要的属性就是时间。主要规则介绍如下&#xff1a; 实时数据&#xff0c;时间是指当前时间…...

成员变量和for循环里面的变量不冲突原因

今天写项目&#xff0c;发现一个类中有一个成员变量与for循环块中的局部变量重名了&#xff0c;但是也没有报错&#xff0c;功能也是正常的&#xff0c;然后了解了一下原因&#xff1a; 成员变量和 for 循环块中的变量不冲突的原因在于它们的作用域&#xff08;Scope&#xff…...

如何使用任意浏览器远程访问本地搭建的Jellyfin影音平台

文章目录 前言1. Jellyfin服务网站搭建1.1 Jellyfin下载和安装1.2 Jellyfin网页测试 2.本地网页发布2.1 cpolar的安装和注册2.2 Cpolar云端设置2.3 Cpolar本地设置 3.公网访问测试4. 结语 前言 本文主要分享如何使用Windows电脑本地部署Jellyfin影音服务并结合cpolar内网穿透工…...

CEM美国培安消解罐内管 CEM40位 55ML 微波消解罐

内罐采用高纯实验级进口增强改性处理TFM材料或PFA材料&#xff0c;我厂加工的微波罐能与原厂仪器匹配&#xff0c;而且是盖、体通配&#xff0c;无尺寸误差。精选材质&#xff0c;未添加回料&#xff0c;洁净的加工环境&#xff0c;优化了加工工艺&#xff0c;确保低本底&#…...

建筑网站设计/sem优化师是什么意思

面包板是创客硬件布置电路非常常用的器件&#xff0c;它可以看做是一个很大的电路板&#xff0c;只不过这个电路板不需要焊接&#xff0c;只需要将元器件插在面包板上就可以了&#xff0c;非常方便&#xff0c;也降低了硬件设计的难度&#xff1b;至于为什么叫面包板&#xff0…...

东莞疫情感染人数/国内seo公司排名

http://blog.csdn.net/nvniaobi/article/details/49966227 版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 搞了好几天的FLV封装&#xff0c;话说封装真是个苦力活&#xff0c;有时候思路不是很清晰的时候&#xff0c;真心有点乱。 网上关于H264封…...

一个人做网站现实吗/网络营销软件站

原文: http://coolshell.cn/articles/11564.html TCP是一个巨复杂的协议&#xff0c;因为他要解决很多问题&#xff0c;而这些问题又带出了很多子问题和阴暗面。所以学习TCP本身是个比较痛苦的过程&#xff0c;但对于学习的过程却能让人有很多收获。关于TCP这个协议的细节&…...

做外汇需要关注哪几个网站/百度收录检测

为什么80%的码农都做不了架构师&#xff1f;>>> 本篇Blog是一个简单的Storm入门例子&#xff0c;目的让读者明白Storm是怎样的运行机制。以及后续会放出的几篇Storm高级特性以及最终将Storm融入Hadoop 2.x的YARN中。目的读者是已经进阶大数据的Hadoop&#xff0c;Sp…...

建设网站的具体步骤是什么/每天看七个广告赚40元的app

寻源到付款&#xff08;S2P&#xff09;是端到端的过程&#xff0c;通过在采购过程中添加战略性采购&#xff0c;S2P向采购到付款&#xff08;P2P&#xff09;迈进了一步。在此过程中&#xff0c;寻找最佳供应商并制定工作的行为与他们的交易会添加到流程中&#xff0c;最终导致…...

wordpress aplayer/郑州制作网站公司

跨境电商发展了这么多年&#xff0c;从最开始的亚马逊&#xff0c;eBay到速卖通&#xff0c;Lazada再到现在很多新出平台&#xff0c;可谓五花八门。很多主流平台卖家都有使用测评补单来增加产品权重、提高销量。经常有小众平台的卖家咨询我他做的平台能否像亚马逊那样通过测评…...