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;
}

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

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

相关文章

数据结构进阶——AVL树

数据结构进阶——AVL树 0. 前言1. AVL树的概念2. AVL树节点&#xff0c;和树的定义3. AVL树的插入4. AVL树的旋转5. AVL树的验证6. AVL树的删除&#xff08;了解&#xff09;7. AVL树实现完整代码8. AVL树的性能 0. 前言 学习本章&#xff0c;需要大家先掌握搜索二叉树&#xf…

「6.18福利」精选大厂真题|笔试刷题陪伴|明天正式开屋啦 - 打卡赢价值288元丰厚奖励

&#x1f370;关于清隆学长 大家好&#xff0c;我是清隆&#xff0c;拥有ACM区域赛 银牌&#x1f948;&#xff0c;CCCC天梯赛 国一&#xff0c;PTA甲级 98 分。 致力于算法竞赛和算法教育已有 3 年&#xff0c;曾多次 AK 互联网大厂笔试&#xff0c;大厂实习经验丰富。 打卡…

ai智能语音机器人好不好用,语音识别

智能语音机器人的真正价值是帮助企业解决电销上带来的一些问题&#xff0c;可以提高效率。为电销人员节省大量的时间与精力&#xff0c;提高电销水平&#xff0c;那我们一起来看看智能语音机器人好不好用 1、真人式语音群呼 用智能语音机器人打电话给客户的时候是真人的声音&a…

常见端口大全

常见默认端口 1、HTTP: 80 2、HTTPS: 443 3、FTP: 21 4、FTPS : 990 5、SSH: 22 6、Telnet: 23 7、SMTP: 25 8、DNS : 53 9、DHCP: 67 (服务器), 68 (客户端) 10、TFTP : 69 11、HTTP Alt: 8080 12、POP3: 110 13、 NNTP: 119 14、NTP : 123 15、IMAP: 143 16、SNMP : 161 17、…

国家商用密码算法-SM4Tool.jar

SM4Tool.jar可能是指一个特定的Java工具集&#xff0c;用于实现SM4&#xff08;国家商用密码算法之一&#xff09;的加密和解密功能。SM4是一种分组密码算法&#xff0c;广泛应用于中国的各种安全通信场景中&#xff0c;如金融、电子政务、物联网等。由于我没有直接访问或运行特…

新手如何入门Web3?

一、什么是Web3&#xff1f; Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;致力于将各种在线活动变得更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;涵盖了包括数字货币、去中心化应用、智能合约等在内的多个方面。它的主要特点包括去中心化、区…

2024软考各科目难度怎么样?怎么选?

在2024年的软考中&#xff0c;各科目难度因专业领域和具体内容的差异而有所不同。以下是对软考高级、中级和初级科目难度的分析&#xff1a; &#xff08;1&#xff09;高级科目难度分析&#xff1a; 下半年高级考试科目有&#xff1a;系统分析师、系统架构设计师、网络规划设…

cesium ClippingPolygon多边形裁切

1.多边形裁切 1.1 基本流程 cesium117版本添加了多边形裁切功能&#xff0c;本文分析源码&#xff0c;看看是如何处理的。多边形裁切的大概流程分为4部分: 通过经纬度坐标传入多个闭合的边界&#xff1b;将多个边界打包成两张纹理&#xff0c;一张是每个多边形的坐标&#xf…

语音识别相关文章整理目录

一、语音大模型架设与功能实现 使用sherpa-ncnn进行中文语音识别&#xff08;ubuntu22&#xff09;-CSDN博客文章浏览阅读953次&#xff0c;点赞30次&#xff0c;收藏26次。请注意&#xff0c;需要首先安装安装了所有必要的依赖项&#xff0c;包括 CMake、Git 和一个合适的 C/…

程序启动 报错 no main manifest attribute

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

本地localhost与目标地址跨域问题的解决方法

场景 开发过程中遇到一个控件&#xff0c;上传图片到某cdn&#xff0c;目标地址对localhost会有跨域问题&#xff1a; 解决方法 参照此博客&#xff0c;将本地地址定义为某网址&#xff0c;如abc&#xff1a; win10修改本地host文件&#xff0c;用以增加自定义本地访问域名12…

flash存储器测试

Flash存储器测试是指对闪存设备进行的一系列诊断和验证操作&#xff0c;以确保其性能、可靠性和完整性。这些测试对于确保数据正确存储和在设备寿命内可靠地访问数据至关重要。 Flash存储器测试通常包括以下几种类型的测试&#xff1a; 读取测试&#xff1a;检查存储器中的数据…

装机后操作纪录

刚刚装完机 什么都没有 就像在一片一望无际的草原 要恢复原来笔记本的“秩序” 就像在这个草原建立全新的王国 1、关于显示器电脑屏幕图标巨大且糊的处理方法 用一台可正常使用的电脑&#xff0c;到主板官网下载相关驱动。(铭瑄B760M D4 WIFI驱动下载) 2、关于桌面没有显示“…

[Python学习篇] Python元组

元组&#xff08;Tuple&#xff09;&#xff1a;元组是不可变的&#xff0c;一旦创建就不能修改其内容。这意味着你不能增加、删除或更改元组中的元素。元组使用小括号()表示。元组可以一次性存储多个数据&#xff0c;且可以存不同数据类型。 定义元组 语法&#xff1a; # 存…

GitLab安装部署以及bug修复

使用git&#xff0c;还需要一个远程代码仓库。常见的github、gitee这种远程代码仓库&#xff0c;公司中一般不会使用&#xff0c;因为他们是使用外网的&#xff0c;不够安全。一般企业都会搭建一个仅内网使用的远程代码仓库&#xff0c;最常见就是 GitLab 安装准备 需要开启s…

从11个视角看全球Rust程序员1/4:深度解读JetBrains最新报告

讲动人的故事,写懂人的代码 五个月前,编程界的大佬JetBrains发布了他们的全球开发者年度报告。 小吾从这份报告中找出了下面11个关于全球程序员如何使用Rust的有趣的趋势,让你学习和使用Rust更轻松。 1 这两年有多少程序员在工作中使用了Rust? 2 全球程序员使用Rust有多…

php排序算法

一&#xff0c;冒泡排序 冒泡排序是最简单最通用的一种排序&#xff0c;基本思想&#xff1a;在一组数据中&#xff0c;每次将相邻的两个数来比较&#xff0c;如果前面的数比后面的数大&#xff0c;就交换两个数的位置&#xff0c;否则不交换。由此可得&#xff0c;在排序过程中…

join和left join性能比较

1、join和left join性能比较&#xff08;AI生成&#xff09; 在MySQL中&#xff0c;JOIN和LEFT JOIN的效率并不是绝对的&#xff0c;它们之间的性能差异取决于多种因素&#xff0c;如表的大小、使用的索引、查询的复杂性等。 一般来说&#xff1a; 如果两个表之间的连接条件能…

设备保养计划不再是纸上谈兵,智能系统让执行更到位!

在物业管理的日常工作中&#xff0c;我们常常听到“设备保养台账”“设备保养计划”“设备保养记录”等等这些词&#xff0c;但你是否真正了解它们的含义&#xff1f;是否知道一个完善的设备保养计划、记录、台账对于物业运营的重要性&#xff1f;今天&#xff0c;我们就来深入…

【车载开发系列】基本通信总线常识及通信协议

【车载开发系列】基本通信总线常识及通信协议 基本通信总线常识及通信协议 【车载开发系列】基本通信总线常识及通信协议一. 协议分类二. 通信方式分类三. 同步和异步四. 波特率五. 通讯协议横向比对六. 通讯协议总结一. 协议分类 常见通信协议通常可以分为并行通信协议和串行…