CSS基础属性

news2024/10/6 22:21:22

【三】基础属性

【1】高度和宽度

（1）参数

  • width（宽度）：用于设置元素的宽度。可以使用具体的数值（如像素值）或百分比来指定宽度。

  • height（高度）：用于设置元素的高度，使用方式与 width 属性类似。

  • max-width（最大宽度）：用于设置元素的最大宽度，防止元素的宽度超过指定的值。

  • max-height（最大高度）：用于设置元素的最大高度，防止元素的高度超过指定的值。

  • min-width（最小宽度）：用于设置元素的最小宽度，确保元素的宽度不会小于指定的值。

  • min-height（最小高度）：用于设置元素的最小高度，确保元素的高度不会小于指定的值。

  • 单位：像素（px）、百分比（%）

（2）注意事项
  • 行内标签无法设置高度和宽度，写了也无法生效
  • 行内标签的高度是由其内容决定的，并且会根据内容的大小自动调整
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
     div, span{
         background-color: green;
         height: 50px;
         width: 50px;
     }
    </style>
</head>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

请添加图片描述

【2】字体属性

  • 字体属性用于控制文本的字体样式和外观
（1）参数
  • font-family（字体系列）：用于指定文本的字体系列。您可以通过指定多个字体名称来创建字体回退机制，以确保在用户计算机上找不到第一个字体时能够使用备用字体。
  • font-size（字体大小）：用于设置文本的字体大小。可以使用像素（px）、百分比（%）或其他单位来指定字体大小。
  • font-weight（字体粗细）：用于设置文本的字体粗细。常用的取值包括 normal（普通）、bold（粗体）、bolder（更粗）和 lighter（更细）。
  • font-style（字体样式）：用于设置文本的字体样式，常用的取值包括 normal（普通）、italic（斜体）和 oblique（倾斜）
  • color （颜色）：可以使用预定义的颜色名称（如 red、blue、green 等），也可以使用十六进制值（如 #ff0000 表示红色）或 RGB 值（如 rgb(255, 0, 0) 也表示红色）来指定颜色。
（2）示例
  • 如果用户计算机上安装了 Arial 字体，则使用 Arial 字体显示文本；如果没有 Arial 字体，则使用 Helvetica 字体；如果连 Helvetica 字体也没有，则使用 sans-serif 字体作为备选
p {
  font-family: Arial, Helvetica, sans-serif;
}
  • 字体：大小24像素、加粗、斜体
p {
	font-size: 24px;
    font-weight: bold;
    font-style: italic;
}

【3】文字属性

  • 文字属性用于控制文本的布局、间距和装饰等
（1）参数

  • text-align（文本对齐）：用于设置文本在容器中的对齐方式。常用的取值包括 left（左对齐）、right（右对齐）、center（居中对齐）和 justify（两端对齐）。

  • text-decoration（文本装饰）：用于设置文本的装饰效果，如下划线、删除线等。常用的取值包括 none（无装饰）、underline（下划线）、overline（上划线）和 line-through（删除线）。

  • text-transform（文本转换）：用于控制文本的大小写转换。常用的取值包括 none（不转换）、uppercase（转换为大写字母）和 lowercase（转换为小写字母）。

  • letter-spacing（字间距）：用于设置字母之间的间距。可以使用像素（px）或其他单位来指定间距值

  • text-indent （首行缩进）：该属性用于指定文本块中首行相对于其余行的缩进量。可以使用像素（px）、百分比（%）或其他单位来指定缩进值。

（2）示例
  • 文本上划线、转换为大写、字间距5个像素
  • 首行缩进两个字符、居中（比缩进优先级高）
p {
    text-align: center;
    text-decoration: overline;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-indent: 2em;
}

【4】背景属性

  • 背景属性用于设置元素的背景样式，包括背景颜色、背景图片、背景重复等
（1）参数
  • background-color（背景颜色）：用于设置元素的背景颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。
  • background-image（背景图片）：用于设置元素的背景图片。可以使用图片的 URL 来指定背景图片。
  • background-repeat（背景重复）：用于设置背景图片的重复方式。常用的取值包括 repeat（默认，水平和垂直重复）、repeat-x（水平重复）、repeat-y（垂直重复）和 no-repeat（不重复）
  • background-position（背景位置）：用于设置背景图片的位置。可以使用关键词（如 top、bottom、left、right）或像素（px）来指定位置。第一个参数控制左边的距离，第二个参数是上距离。
  • background-attachment （背景附着）：该属性用于指定背景图片是否随元素的滚动而滚动，或者固定在视口中的位置不动。
    • scroll（默认值）：背景图片会随元素的滚动而滚动。
    • fixed：背景图片会固定在视口中的位置，不随元素的滚动而滚动。
    • local：背景图片会随元素内部内容的滚动而滚动，即背景图片不会超出元素的边界。
    • inherit：从父元素继承 background-attachment 的值。
    • 注意：在移动设备上，fixed 值可能会导致背景图片无法正常显示
  • background-size 控制背景图片的缩放比例和大小，属性接受两个参数，分别用于指定背景图片的宽度和高度。常用的取值包括：
    • auto（默认值）：保持背景图片的原始大小。
    • cover：将背景图片等比例缩放，使其完全覆盖背景区域。可能会裁剪图片。
    • contain：将背景图片等比例缩放，使其完全适应背景区域。可能会在背景区域内留有空白。
    • <length>：使用具体的长度值（如像素或百分比）来指定背景图片的宽度和高度。
    • <percentage>：使用百分比值来指定背景图片的宽度和高度，相对于背景区域的大小。
（2）示例
  • 背景图片image、背景图片重复（默认）
  • 背景附着固定、图片大小等比例缩放完全适应
div {
  width: 400px;
  height: 400px;
  background-image: url("image.jpg");
  background-attachment: fixed;
  background-size: contain;
}

【5】边框属性

  • 设置元素的边框样式、宽度和颜色
（1）参数
  • border-width（边框宽度）：可以使用具体的长度值（如像素）或预定义的关键字来指定边框的宽度。常用的关键字包括 thin、medium 和 thick，分别代表细、中等和粗的边框宽度。
  • border-style（边框样式）：可以使用预定义的样式关键字或具体的样式值来指定边框的样式。常用的样式关键字包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。
  • border-color（边框颜色）：可以使用颜色名称、十六进制值、RGB 值或 HSL 值来指定边框的颜色。
  • border-radius （边框圆角）：
    • 单个长度值：指定所有四个角的圆角半径，例如 border-radius: 10px;。
    • 两个长度值：第一个值指定左上角和右下角的圆角半径，第二个值指定右上角和左下角的圆角半径，例如 border-radius: 10px 20px;。
    • 四个长度值：分别指定左上角、右上角、右下角和左下角的圆角半径，顺序为顺时针方向，例如 border-radius: 10px 20px 30px 40px;。
（2）示例
  • 四周边框
  • 宽2个像素、虚线、红色、圆角10像素
/*两种方式等价，参数顺序无所谓*/
div{
    border-width: 2px;
    border-style: dashed;
    border-color: red;
    border-radius: 10px;
}
div {
    border: 2px dashed red;
    border-radius: 10px;
}

  • 仅左边有边框

  • 宽4个像素、实线、蓝色

div{
  border-left: 4px solid blue;
}

【6】显示属性display

  • 控制元素在页面中的显示方式
（1）参数
  • block：将元素显示为块级元素，会独占一行，并且默认情况下会在上下方向上产生一定的间距。块级元素可以设置宽度、高度、内边距和外边距。
  • inline：将元素显示为内联元素，不会独占一行，会在同一行内尽可能占据所需的空间。内联元素不能设置宽度、高度、上下内边距和上下外边距。
  • inline-block：将元素显示为内联块级元素，不会独占一行，但可以设置宽度、高度、内边距和外边距。内联块级元素会在同一行内尽可能占据所需的空间。
  • none：将元素隐藏，不会在页面中显示。隐藏的元素不会占据空间，并且对页面布局没有影响。
  • table：用于设置元素的显示类型为表格。该元素将按照表格的方式进行布局和显示，类似于HTML中的<table>元素
（2）示例
  • 行内标签也可以设置宽度和高度
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
div, span {
    background-color: aqua;
    height: 50px;
    width: 50px;
}
span{
    display: block;
}
    </style>
</head>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

请添加图片描述

  • 隐藏

  • display:none    隐藏标签(重点)  页面上不会保留位置也不显示
visibility:hidde  也是隐藏标签 但是位置会保留

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
    p, div, span{
        background-color: aqua;
    }
    p {
        display: none;
    }
    div {
        visibility: hidden;
    }
    </style>
</head>
<p>段落标签</p>
<div>块级标签</div>
<br>
<span>行内标签</span>
</html>

请添加图片描述

【7】溢出属性overflow

  • 溢出属性（overflow property）用于控制当内容超出容器尺寸时的处理方式。
  • 应用于具有限定尺寸的容器
（1）参数
  • visible：默认值。当内容超出容器尺寸时，会显示在容器外部，可能会覆盖其他元素。这意味着溢出的内容会在容器外部可见。
  • hidden：当内容超出容器尺寸时，会被裁剪隐藏，不会显示在容器外部。溢出的内容将被隐藏，无法通过滚动或其他方式查看。
  • scroll：当内容超出容器尺寸时，会显示滚动条，以便用户可以通过滚动来查看溢出的内容。即使内容没有超出容器尺寸，也会显示滚动条，但是处于禁用状态。
  • auto：当内容超出容器尺寸时，会根据需要显示滚动条。如果内容没有超出容器尺寸，不会显示滚动条。
（2）示例
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
        div {
            height: 100px;
            width: 100px;
            border: 5px solid red;
            float: left;
            margin: 20px;
        }

        .d1 {
            overflow: visible;
        }
        .d2 {
            overflow: hidden;
        }
        .d3 {
            overflow: scroll;
        }
        .d4 {
            overflow: auto;
        }
    </style>
</head>
<body>
<span>
    <div class="d1">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
    <div class="d2">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
    <div class="d3">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
    <div class="d4">
    人类文明可能发生技术突变的领域有：物理学、生物学、计算机科学、寻找外星文明。其中寻找外星文明是所有技术领域中变数最大的，一旦发生，其影响力将超过另外三个领域的总和。
    </div>
</span>

</body>
</html>

请添加图片描述

  • 头像
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
        body {
            margin: 0;
            background-color: #4e4e4e;
        }

        #d1 {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            border: 3px solid white;
            margin: 0 auto;
            overflow: hidden;

        }

        #d1 > img {
            width: 100%; /* 占标签100%比例 */
        }

    </style>
</head>
<body>
<div id="d1">
    <img src="image.jpg" alt="">
</div>

</body>
</html>

【8】透明度opacity

  • 指元素或颜色的可见程度
（1）参数
  • opacity 属性：
    • opacity 属性用于设置元素的整体透明度。
    • 它的取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
    • 透明度的值会影响元素及其内容的可见程度。
    • 例如，设置 opacity: 0.5; 将使元素半透明，即可见度为 50%。
  • rgba() 函数：
    • rgba() 函数用于设置颜色的透明度。
    • 它接受四个参数：红色值、绿色值、蓝色值和透明度值。
    • 透明度值的范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
    • 例如，background-color: rgba(255, 0, 0, 0.5); 将设置背景色为红色，并将透明度设置为 50%。
（2）示例
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF8">
    <style>
    #p1 {
        opacity: 0.5;
    }
    #p2 {
        background-color: rgba(255, 0, 0, 0.5);
    }
    </style>
</head>
<body>
<p id="p1">段落二</p>
<p id="p2">段落一</p>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【JGit】分支管理实践

【JGit】分支管理实践

本文紧接【JGit】简述及学习资料整理。 以下梳理了使用 JGit 进行 Git 操作的实践 JGit实践 主函数 public static void main(String[] args) throws Exception {String localDir "D:\\tmp\\git-test\\";String gitUrl "http://192.168.181.1:3000/root/g…
阅读更多...
如何合理规划PCB叠层

如何合理规划PCB叠层

目录 引言 6层板叠层设计方案 8层板叠层设计方案 10层板叠层设计方案 12层板叠层设计方案 总结 引言 PCB叠层是决定电子产品EMC性能的关键因素，合理的叠层布局，可以使得PCB上的差模和共模辐射最小化，反之，则可能放大这些辐射的干扰。 通常会从以下的因素中，对PCB的叠…
阅读更多...
图扑数字孪生“光储充”一体化智慧充电站

图扑数字孪生“光储充”一体化智慧充电站

近年来&#xff0c;蔚来、理想、特斯拉等电动汽车凭借独特的优势已成为全球消费者的“新宠儿”。随着新能源车保有量迅速增长&#xff0c;充电需求不断上升&#xff0c;充电桩对区域电网的冲击也日益显著。 “光储充”一体化模式&#xff0c;即“光伏储能汽车充电”&#xff0…
阅读更多...
关于Windows 10中剪贴板的知识，看这篇文章就差不多了

关于Windows 10中剪贴板的知识，看这篇文章就差不多了

本文介绍了如何在Windows10中使用剪贴板。除了有关复制、粘贴和清除剪贴板的信息外&#xff0c;还包括有关将项目固定到剪贴板的信息。 如何将内容复制到Windows 10剪贴板 Windows 10操作系统中的剪贴板比以前的剪贴板体验更先进。使用新的剪贴板&#xff0c;你可以查看复制到…
阅读更多...
fastApi笔记04-查询参数和字符串校验

fastApi笔记04-查询参数和字符串校验

额外校验 使用Query可以对查询参数添加校验 from typing import Unionfrom fastapi import FastAPI, Queryapp FastAPI()app.get("/items/") async def read_items(q: Union[str, None] Query(defaultNone, max_length50)):results {"items": [{"…
阅读更多...
【力扣hot100】刷题笔记Day8

【力扣hot100】刷题笔记Day8

前言 到了大章节【链表】了&#xff0c;争取两三天给它搞定&#xff01;&#xff01; 160. 相交链表 - 力扣&#xff08;LeetCode&#xff09;】 双指针 参考题解&#xff0c;相比于求长度右对齐再一起出发的方法简洁多了 class Solution:def getIntersectionNode(self, head…
阅读更多...
zabbix5.0利用percona监控MySQL

zabbix5.0利用percona监控MySQL

具体来说包括: Percona Monitoring Plugins 这是一组用于收集MySQL实例各种性能指标和状态的插件脚本,包括: mysqld_stats.pl - 收集服务器状态计数器mysqld_statement_replay.pl - 进行负载模拟测试pt-status - 收集InnoDB资源使用情况等 Percona Templates 基于这些插件收集…
阅读更多...
gitlab 项目上线，项目上线后回滚

gitlab 项目上线，项目上线后回滚

gitlab 项目上线&#xff0c;项目上线后回滚 1.需要自己有个gitlab项目环境&#xff0c;没有找我&#xff0c;docker-compose 一键环境启动 2.发起合并请求3.选择合并的分支4.点击创建合并&#xff0c;然后确认合并合并完成&#xff0c;进行回滚操作&#xff0c;在合并详情页…
阅读更多...
wo-gradient-card是一款采用uniapp实现的透明辉光动画卡片

wo-gradient-card是一款采用uniapp实现的透明辉光动画卡片

采用uniapp-vue3实现&#xff0c;透明辉光动画卡片&#xff0c;卡片内容包含标签、标题、副标题、图片 支持H5、微信小程序&#xff08;其他小程序未测试过&#xff0c;可自行尝试&#xff09; 可用于参考学习 可到插件市场下载尝试&#xff1a; https://ext.dcloud.net.cn/plu…
阅读更多...
仿12306校招项目-前后端运行

仿12306校招项目-前后端运行

目录 1.git 克隆 2.设置JDK版本 3.sql脚本导入数据 4.启动中间件 5.运行后端 6.运行前端 1.git 克隆 打开 IntelliJ IDEA&#xff0c;菜单栏顶部找到 Git -> Clone 选项。找到 Clone 这个按钮输入 gitgitee.com:nageoffer/12306.git或者https://gitee.com/nageoffer/…
阅读更多...
什么是企业数字化转型的关键要素？

什么是企业数字化转型的关键要素？

企业数字化转型的关键要素通常包括以下几个方面&#xff1a; 战略规划&#xff1a;企业需要制定清晰的数字化转型战略&#xff0c;明确转型的目标、路径和时间表&#xff0c;确保数字化转型与企业整体战略相一致&#xff0c;为企业提供明确的指导。 数据驱动&#xff1a;数据是…
阅读更多...
Android 7.0以上charles无法抓取部分https包问题

Android 7.0以上charles无法抓取部分https包问题

首先保证配置一切正确 手机通过访问chls.pro/ssl下载.pem证书&#xff0c;如无法安装&#xff0c;在文件管理器中将后缀名改为.crt 在设置中安装该证书 Charles-Proxy - SSL Proxying Setting - Include 添加需要抓包的URL:443即可 以上基本配置结束后&#xff0c;看下代码 代…
阅读更多...
极狐GitLab 如何重置管理员密码

极狐GitLab 如何重置管理员密码

在之前安装极狐GitLab 的文章中提到&#xff0c;极狐GitLab 安装成功后&#xff0c;初始登录密码会放在 /etc/gitlab/initial_root_password 文件下&#xff0c;用户可以使用初始用户名 root 及文件内的初始密码即可登录极狐GitLab 实例。 但是有些情况下&#xff0c;可能会发…
阅读更多...
第39期 | GPTSecurity周报

第39期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…
阅读更多...
[office] EXCEL表格不能使用键盘箭头切换单元格该怎么解决- #媒体#经验分享#知识分享

[office] EXCEL表格不能使用键盘箭头切换单元格该怎么解决- #媒体#经验分享#知识分享

EXCEL表格不能使用键盘箭头切换单元格该怎么解决? EXCEL表格不能使用键盘箭头切换单元格该怎么解决&#xff1f; 1、入下图所示的键盘。 图中红色标记“1”的地方是Scroll Lock指示灯。Scroll Lock就是“滚动锁定”的意思。当该指示灯亮起来的时候&#xff0c;在excel表格中操…
阅读更多...
Java的Stream流【详解】

Java的Stream流【详解】

目录 一.概念 二.Stream流处理数据的步骤 1.得到集合或者数组的Stream流。 2.调用Stream流的中间方法对数据进行处理 3.调用Stream流的终结方法获取处理的结果 一.概念 是Jdk8开始新增的一套API (java.util.stream.*)&#xff0c;可以用于操作集合或者数组的数据。 好处: S…
阅读更多...
【卷积神经网络中用1*1 卷积有什么作用或者好处呢？】

【卷积神经网络中用1*1 卷积有什么作用或者好处呢？】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;深度学习 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 1*1 卷积有什么作用或者好处呢 作用降维和增加非线性特征组合和交互网络的宽度和深度调整全连接替代增强…
阅读更多...
vue2的ElementUI的form表单报错“Error: [ElementForm]unpected width”修复

vue2的ElementUI的form表单报错“Error: [ElementForm]unpected width”修复

1. 问题 ElementUI的form表单&#xff0c;当动态切换显示表单时报错 Error: [ElementForm]unpected width。 翻译过来就是form表单的label宽度width出了问题。 2. 分析 参数说明类型可选值默认值label-width表单域标签的宽度&#xff0c;例如 ‘50px’。作为 Form 直接子元…
阅读更多...
2024-02-20（DataX，Spark）

2024-02-20（DataX，Spark）

1.Oracle利用DataX工具导出数据到Mysql。Oracle利用DataX工具导出数据到HDFS。 只是根据导入导出的目的地不同&#xff0c;DataX的Json文件书写内容有所不同。万变不离其宗。 书写的Json格式的导入导出规则文件存放再Job目录下的。 2.Spark概念 Apache Spark是用于大规模数…
阅读更多...
将yolov8权重文件转为onnx格式并在c#中使用

将yolov8权重文件转为onnx格式并在c#中使用

yolo模型转ONNX 在yolov8中&#xff0c;我们将训练结果的.pt权重文件转换为onnx格式只需要使用ultralytics库中的YOLO类&#xff0c;使用pip安装ultralytics库&#xff0c;然后执行下面python代码 from ultralytics import YOLO# 加载YOLOv8模型 model YOLO("best.pt&q…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023