当前位置: 首页 > 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双击,之后点击搜索,具体过程可以参考下…...

Souliss嵌入式状态同步框架:轻量级去中心化智能家居通信实践

1. Souliss 智能家居网络框架深度解析&#xff1a;面向嵌入式工程师的底层通信架构实践指南Souliss 是一个专为资源受限嵌入式节点设计的轻量级、去中心化智能家居网络框架。其核心目标并非构建通用物联网平台&#xff0c;而是解决真实家庭场景中多协议共存、低功耗节点协同、边…...

AI辅助开发:让Kimi帮你写智能切换Win11右键菜单的脚本

今天想和大家分享一个实用的小技巧&#xff1a;如何用AI辅助开发&#xff0c;快速搞定Win11右键菜单的个性化定制。作为一个从Win7升级到Win11的老用户&#xff0c;我一直不太习惯新版右键菜单的折叠设计&#xff0c;特别是常用的"刷新"、"新建"选项需要多…...

OpenClaw+GLM-4.7-Flash:个人网络安全监控助手

OpenClawGLM-4.7-Flash&#xff1a;个人网络安全监控助手 1. 为什么需要个人网络安全监控 去年我的开发机遭遇了一次恶意脚本攻击&#xff0c;导致本地Git仓库被篡改。事后排查发现&#xff0c;攻击者通过一个陈旧的SSH密钥漏洞入侵&#xff0c;而系统日志里其实早有异常登录…...

资源监控告警:OpenClaw+Qwen3-32B镜像守护个人服务器

资源监控告警&#xff1a;OpenClawQwen3-32B镜像守护个人服务器 1. 为什么需要智能化的个人服务器监控&#xff1f; 去年我的个人服务器连续宕机三次——第一次因为内存泄漏导致OOM崩溃&#xff0c;第二次被挖矿程序占用全部CPU资源&#xff0c;第三次则是磁盘写满后无人察觉…...

PlayCover 2.0重构Mac游戏体验:社交与云服务双引擎驱动革新

PlayCover 2.0重构Mac游戏体验&#xff1a;社交与云服务双引擎驱动革新 【免费下载链接】PlayCover Community fork of PlayCover 项目地址: https://gitcode.com/gh_mirrors/pl/PlayCover 在Mac平台运行iOS游戏长期面临两大痛点&#xff1a;缺乏社交连接与跨设备数据同…...

PyTorch实战:从零构建ResNet50模型(CIFAR10训练+测试+ONNX转换)

1. ResNet50模型基础认知 第一次接触ResNet50时&#xff0c;我被它的"残差连接"设计惊艳到了。传统神经网络随着层数增加会出现梯度消失问题&#xff0c;而ResNet通过跨层直连通道&#xff0c;让信息能够无损传递到更深层。这就好比在高速公路上设置应急车道&#xf…...

告别Finalshell内存焦虑:实测Xshell 8与MobaXterm,哪款才是低资源占用的SSH神器?

深度评测&#xff1a;Xshell 8与MobaXterm如何解决SSH工具的资源占用难题&#xff1f; 当你的开发工作流被频繁的内存告警打断时&#xff0c;选择一款轻量高效的SSH工具就成为了提升生产力的关键。作为每天需要连接多台服务器的开发者&#xff0c;我深刻理解那种看着任务管理器…...

vLLM-v0.17.1实操手册:Prometheus监控指标接入与告警配置

vLLM-v0.17.1实操手册&#xff1a;Prometheus监控指标接入与告警配置 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;由加州大学伯克利分校的天空计算实验室(Sky Computing Lab)开发&#xff0c;现已发展为社区驱动的开源项目。这个框…...

Go语言广播系统设计:基于Channel的高性能事件分发机制

引言 在后端系统架构中&#xff0c;事件广播是一种常见的通信模式。本文将深入分析一个基于Go语言channel实现的广播管理器&#xff0c;探讨其设计思想、实现细节以及在实际项目中的应用价值。 参考代码 点击直达 背景与需求 在许多应用场景中&#xff0c;我们需要实现一对…...

DeepSeek LintCode 3866.有效子数组的数量 public int validSubarrays(int[] nums)

这是关于LintCode 3866 “有效子数组的数量”的问题。这是一个典型的单调栈应用问题&#xff0c;需要计算数组中所有满足特定条件的子数组数量。 问题理解 有效子数组的定义&#xff1a; 对于数组 nums 中的某个子数组 nums[i..j]&#xff08;i ≤ j&#xff09;&#xff0c;如…...