CSS基础属性

【三】基础属性

【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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

小程序端学习

小程序端学习

P2 创建Uni-app 分离窗口 一样的Ctrl S P3 细节知识点 创建新的小程序页面
阅读更多...
设计模式浅析(六) ·命令模式

设计模式浅析(六) ·命令模式

设计模式浅析(六) 命令模式 日常叨逼叨 java设计模式浅析&#xff0c;如果觉得对你有帮助&#xff0c;记得一键三连&#xff0c;谢谢各位观众老爷&#x1f601;&#x1f601; 命令模式 概念 命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式&#xff0c…
阅读更多...
C#知识点-13（进程、多线程、使用Socket实现服务器与客户端通信）

C#知识点-13（进程、多线程、使用Socket实现服务器与客户端通信）

进程 定义&#xff1a;每一个正在运行的应用程序&#xff0c;都是一个进程 进程不等于正在运行的应用程序。而是为应用程序的运行构建一个运行环境 Process[] pros Process.GetProcesses();//获取电脑中所有正在运行的进程//通过进程&#xff0c;直接打开文件//告诉进程&…
阅读更多...
解决IDEA搜不到插件

解决IDEA搜不到插件

File -> Settings -> Plugins https://plugins.jetbrains.com/ 完成以上操作即可搜到插件
阅读更多...
小程序--组件通信

小程序--组件通信

一、父传子 与vue利用props类似&#xff0c;小程序是利用自定义属性&#xff1a;properties // components/my-nav/my-nav.js Component({// 小程序组件默认样式是隔离&#xff0c;addGlobalClass设置为true可允许外部修改样式options: {addGlobalClass: true,// 只要使用到具…
阅读更多...
面试经典150题——生命游戏

面试经典150题——生命游戏

​"Push yourself, because no one else is going to do it for you." - Unknown 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力求解 之所以先暴力求解&#xff0c;是因为我开始也没什么更好的思路&#xff0c;所以就先写一种解决方案&#xff0c;没准写着写…
阅读更多...
OJ链接——打印从1到最大的n位数

OJ链接——打印从1到最大的n位数

目录 1. 题目描述2. 示例3. 分析思路4. 完整代码 1. 题目描述 输入数字 n&#xff0c;按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3&#xff0c;则打印出 1、2、3 一直到最大的 3 位数 999。 用返回一个整数列表来代替打印n 为正整数&#xff0c;0 < n < 5 链接在…
阅读更多...
mac m1调试aarch64 android kernel最终方案

mac m1调试aarch64 android kernel最终方案

问题 这是之前的&#xff0c;调试android kernel的方案还是太笨重了 完美调试android-goldfish(linux kernel) aarch64的方法 然后&#xff0c;看GeekCon AVSS 2023 Qualifier&#xff0c;通过 sdk-repo-linux_aarch64-emulator-8632828.zip 进行启动 完整编译的aosp kernnl…
阅读更多...
Code-Audit(代码审计)习题记录4-5

Code-Audit(代码审计)习题记录4-5

4、习题4 题目内容如下&#xff1a; <?php error_reporting(0); show_source(__FILE__); $a $_REQUEST[hello]; eval("var_dump($a);"); 函数解释 $REQUEST — HTTP Request 变量&#xff0c;默认情况下包含了 [$GET]&#xff0c;[$POST] 和 [$COOKIE]的数…
阅读更多...
Git合并固定分支的某一部分至当前分支

Git合并固定分支的某一部分至当前分支

在 Git 中&#xff0c;通常使用 git merge 命令来将一个分支的更改合并到另一个分支。如果你只想合并某个分支的一部分代码&#xff0c;可以使用以下两种方法&#xff1a; 1.批量文件合并 1.1.创建并切换到一个新的临时分支 首先&#xff0c;从要合并的源分支&#xff08;即要…
阅读更多...
S281 LoRa网关助力智慧城市建设的智能交通管理

S281 LoRa网关助力智慧城市建设的智能交通管理

S281 LoRa网关作为智慧城市建设中的重要组成部分&#xff0c;发挥着关键的作用&#xff0c;特别是在智能交通管理方面。通过连接各类传感器设备和物联网终端&#xff0c;S281 LoRa网关实现了对城市交通系统的远程监控、智能调度和信息化管理&#xff0c;为城市交通管理部门提供…
阅读更多...
学习鸿蒙基础（5）

学习鸿蒙基础（5）

一、honmonyos的page路由界面的路径 新建了一个page,然后删除了。运行模拟器的时候报错了。提示找不到这个界面。原来是在路由界面没有删除这个page。新手刚接触找了半天才找到这个路由。在resources/base/profile/main_pages.json 这个和微信小程序好类似呀。 吐槽&#xf…
阅读更多...
MKS T3BI集成蝶阀说明T3B-T3PRS-232Supplement

MKS T3BI集成蝶阀说明T3B-T3PRS-232Supplement

MKS T3BI集成蝶阀说明T3B-T3PRS-232Supplement
阅读更多...
常见的排序算法整理

常见的排序算法整理

1.冒泡排序 1.1 冒泡排序普通版 每次冒泡过程都是从数列的第一个元素开始&#xff0c;然后依次和剩余的元素进行比较&#xff0c;若小于相邻元素&#xff0c;则交换两者位置&#xff0c;同时将较大元素作为下一个比较的基准元素&#xff0c;继续将该元素与其相邻的元素进行比…
阅读更多...
人工智能_CPU安装运行ChatGLM大模型_安装清华开源人工智能AI大模型ChatGlm-6B_004---人工智能工作笔记0099

人工智能_CPU安装运行ChatGLM大模型_安装清华开源人工智能AI大模型ChatGlm-6B_004---人工智能工作笔记0099

上一节003节我们安装到最后,本来大模型都可以回答问题了,结果, 5分钟后给出提示,需要GPU,我去..继续看官网,如何配置CPU运行 没办法继续看: https://github.com/THUDM/ChatGLM-6B 这里是官网可以看到 需要gcc的版本是11.3.0,这里我们先没有去安装,直接试试再说 yum instal…
阅读更多...
在UE5中使用OverlayMaterial制作多材质效果

在UE5中使用OverlayMaterial制作多材质效果

UE5.1中新增了OverlayMaterial&#xff0c;可以让物体套用2个材质球效果&#xff0c;如A材质球为正常材质内容&#xff0c;B材质球为菲涅尔&#xff0c;或是B材质球是法线外拓描边等&#xff0c;该功能类似Unity的多pass效果&#xff0c;方便了日常使用。 下面就讲将怎么用Ove…
阅读更多...
手把手教你如何搭建性能测试环境

手把手教你如何搭建性能测试环境

前言 在进行性能则试前&#xff0c;需要完成性能测试的搭建工作&#xff0c;一般包括硬件环境、软件环境及网络环境&#xff0c;可以要求配置和开发工程师协助完成&#xff0c;但是作为一个优秀性能测试工程师&#xff0c;这也是你的必备技能之一。 性能测试环境与功能测试环…
阅读更多...
4款文案神器，为你写作高质量文案

4款文案神器，为你写作高质量文案

4款文案神器&#xff0c;为你写作高质量文案!在当今信息爆炸的时代&#xff0c;写作成为了一项重要的技能&#xff0c;无论是在工作中、学习中还是生活中&#xff0c;我们都需要用文字来传达信息、表达想法。然而&#xff0c;要写出高质量的文案并非易事&#xff0c;需要不断地…
阅读更多...
开源软件的影响力及未来发展趋势

开源软件的影响力及未来发展趋势

开源软件的影响力 在当今数字化时代&#xff0c;开源软件已经成为技术创新、商业模式和安全风险等方面不可或缺的一部分。本文将从开源软件如何推动技术创新、开源软件的商业模式、开源软件的安全风险、开源软件的未来发展趋势以及开源软件在各行业的应用案例几个方面进行深入…
阅读更多...
如何利用Shopee卖家中心资源和策略进行有效选品？

如何利用Shopee卖家中心资源和策略进行有效选品？

在Shopee卖家中心进行选品是提高产品市场竞争力和销售业绩的关键环节。为了帮助卖家更好地利用Shopee提供的资源和策略进行选品&#xff0c;以下是一些实用建议&#xff1a; 先给大家推荐一款shopee知虾数据运营工具知虾免费体验地址&#xff08;复制浏览器打开&#xff09;&a…
阅读更多...
最新文章

Copyright @ 2022~2023