开发知识点-CSS样式

在这里插入图片描述

CSS样式

  • font
  • CSS 外边距 —— 围绕在元素边框的空白区域
            • # linear-gradient() ——创建一个线性渐变的 "图像"
            • # transform ——旋转 元素![在这里插入图片描述](https://img-blog.csdnimg.cn/20191204100321698.png)
            • # rotate() [旋转]
    • # 边框 (border) —— 围绕元素内容和内边距的一条或多条线
            • # z-index ——设置元素的堆叠顺序。
            • # position ——规定元素的定位类型
  • @-webkit-keyframes [name] /* Safari and Chrome */ 规则 ——创建动画
  • # background
            • # flex-direction 属性 ——规定灵活项目的方向
            • #height: 100vh;
            • # overflow 属性 ——规定当内容溢出元素框时发生的事情。
    • Flex 布局语法
    • 常用 颜色布局
  • uni中样式的学习及如何使用scss和字体图标

-webkit-transition:CSS属性

font

  • font-family —— 设置字体样式
  • font-size: 14px; —— 字体大小

CSS 外边距 —— 围绕在元素边框的空白区域

  • 设置外边距 ——元素外创建额外的“空白”
  • 使用 margin 属性 —— 接受任何长度单位、百分数值甚至负值
    margin-top —— 设置 元素的上外边距
# linear-gradient() ——创建一个线性渐变的 “图像”
  • 并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果
  • background-image: linear-gradient(direction, color-stop1, color-stop2, …);在这里插入图片描述
# transform ——旋转 元素在这里插入图片描述
# rotate() [旋转]
  • 可以为正数或者负数,正数是顺时针旋转,负数是逆时针旋转。

# 边框 (border) —— 围绕元素内容和内边距的一条或多条线

  • 允许你规定元素边框的 3 个方面:宽度、样式, 颜色
  • 使用表格来创建文本周围的边框
  • 但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素
  • 元素外边距内就是元素的的边框 (border)/元素的边框就是围绕元素内容和内边据的一条或多条线

在这里插入图片描述


  • border-radius 属性 —— 允许你为元素添加圆角边框!
    JavaScript 语法: object object.style.borderRadius=“5px”
    最多可指定四个 border -*- radius 属性的复合属性
    语法:border-radius: 1-4 length|% / 1-4 length|%;
    在这里插入图片描述
    注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。
    如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。
    如果省略右上角,左上角是相同的。

    • display 属性——规定元素应该生成的框的类型
      JavaScript 语法: object.style.display=“inline”在这里插入图片描述

display: flex; 弹性布局 ——flexible box的缩写,意为弹性布局
盒模型 灵活性 ——flex容器(flex container)
容器中默认存在两个轴:水平方向的主轴(main axis)和 垂直方向上的交叉轴(cross axis)
在这里插入图片描述在这里插入图片描述

# z-index ——设置元素的堆叠顺序。
  • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
# position ——规定元素的定位类型
  • 默认值: static
  • JavaScript 语法: object.style.position=“absolute”

position 属性
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative生成相对定位的元素,相对于其正常位置进行定位。

因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。

static默认值

没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index声明)。

inherit规定应该从父元素继承 position 属性的值。

font-weight:bold;

border-radius:100px;

在这里插入图片描述在这里插入图片描述

@-webkit-keyframes [name] /* Safari and Chrome */ 规则 ——创建动画

  • 通过逐步改变从一个CSS样式设定到另一个

  • 在动画过程中,您可以更改CSS样式的设定多次

  • 指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同
    0%是开头动画,100%是当动画完成

  • 为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

  • 注意: 使用animation属性来控制动画的外观,还使用选择器绑定动画在这里插入图片描述

# background

  • background-image 属性
    JavaScript 语法: object.style.backgroundImage=“url(stars.gif)”
    在这里插入图片描述
    提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果
    在这里插入图片描述在这里插入图片描述
  • background-position 属性
    JavaScript 语法: object.style.backgroundPosition=“center”
    在这里插入图片描述
    提示:
    您需要把 background-attachment 属性设置为 “fixed”,才能保证该属性在 Firefox 和 Opera 中正常工作在这里插入图片描述
  • background-repeat 属性
    JavaScript 语法: object.style.backgroundRepeat=“repeat-y”
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
# flex-direction 属性 ——规定灵活项目的方向
  • 如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用
  • JavaScript 语法: object.style.flexDirection=“column-reverse”
    在这里插入图片描述
#height: 100vh;

在这里插入图片描述

# overflow 属性 ——规定当内容溢出元素框时发生的事情。

在这里插入图片描述
定义溢出元素内容区的内容会如何处理。
如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。
因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

  • overflow-x 属性 —— 规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话
    JavaScript 语法: object.style.overflowX=“scroll”
    overflow-x: visible|hidden|scroll|auto|no-display|no-content;在这里插入图片描述

position 属性
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative生成相对定位的元素,相对于其正常位置进行定位。

因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。

static默认值

没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index声明)。

inherit规定应该从父元素继承 position 属性的值。

font-weight:bold;

border-radius:100px;

width: 100rpx;   width: 100%;
height: 66rpx;
min-height: 34px; padding: 2px 4px; 
padding-right: 0; 
padding: 0 30rpx 0 20rpx;left: 0;top: 0; border-radius: 18px;color="rgba(180,180,180,1)"
backgroundColor: "linear-gradient(90deg, rgba(248, 200, 70, 1), rgba(246,208,77,1) )",
background-color: #000000;  
color: #EB0909;    
background: rgb(255,214,104);overflow: unset;word-break: break-all;   font-size: 30rpx; border: 1px  solid#dfdfdf; line-height: 12px;font-weight: 500; 
text-align: center;margin: 0 28rpx;box-sizing: content-box|border-box|inherit;     //  以  特定的方式定义匹配某个区域的特定元素flex-direction: row;    column;     //规定 灵活项目的 方向flex: 1;position: absolute; position:relative; position:fixed;  覆盖层border: 1px solid #eaeef1;display: flex;   block;

Flex 布局语法

flex-direction: (元素排列方向)flex-direction:row (横向从左到右排列==左对齐)flex-direction:row-reverse (与row 相反)flex-direction:column (从上往下排列==顶对齐)flex-direction:column-reverse (与column 相反)flex-wrap:nowrap (超出不换行,很奇怪里面的宽度会变成100%)flex-wrap:wrap (超出按父级的高度平分)flex-wrap:wrap-reverse(与wrap 相反)justify-content: (水平对齐方式)justify-content:flex-start;  (水平左对齐)justify-content: flex-end; (水平右对齐)justify-content:center; (水平居中对齐)justify-content:space-between; (两端对齐)justify-content:space-around; (两端间距对其)定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式align-items: (垂直对齐方式)align-items:stretch; (默认)align-items:flex-start; (上对齐,和默认差不多)align-items:flex-end; (下对齐)align-items:center;(居中对齐)align-items:baseline; (基线对齐)flex-shrink   指定了 flex 元素的收缩规则
flex-shrink: number|initial|inherit;flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。 
注意:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用。
默认值: 1
继承:	否justify-content: flex-start:
交叉轴的起点对齐。 
flex-end:交叉轴的终点对齐。 
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。

常用 颜色布局

uni中样式的学习及如何使用scss和字体图标

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

计算机毕业设计php+bootstrap小区物业管理系统

意义:随着我国经济的发展和人们生活水平的提高,住宅小区已经成为人们居住的主流,人们生活质量提高的同时,对小区物业管理的要求也越来越高,诸如对小区的维修维护,甚至对各项投诉都要求小区管理者做得好&…

人工智能-优化算法之梯度下降

梯度下降 尽管梯度下降(gradient descent)很少直接用于深度学习, 但了解它是理解下一节随机梯度下降算法的关键。 例如,由于学习率过大,优化问题可能会发散,这种现象早已在梯度下降中出现。 同样地&#x…

《微信小程序开发从入门到实战》学习三十四

4.2 云开发JSON数据库 MySQL、Oracle之类的“关系型数据库”。JSON数据库是“非关系型数据库”,没有行表列的概念。 4.2.1 JSON数据库基本概念 集合:一个数据库有多个集合,一个集合存储通常是同一类数据,可看作为JSON数组,数组…

P25 C++ const关键字

前言 本期我们要讲的是 C 中的 const 关键字。 const 在改变生成代码方面做不了什么,它有点像类和结构体的可见性,这是一个机制,可以让我们的代码更加干净,并对开发人员写代码强制特定的规则。 const 就像你做出的承诺&#xf…

王者小游戏

游戏里的经验动物 Bear package beast; import sxt.GameFrame; public class Bear extends Beast {public Bear(int x, int y, GameFrame gameFrame) {super(x, y, gameFrame);setImg("C:\\Users\\辛欣\\OneDrive\\桌面\\王者荣耀图片(1)\\王者荣耀图片\\beast\\bear.jp…

MacBook如何远程控制华为手机?

将手机屏幕投影到电脑上可以提供更大的屏幕空间,方便观看电影、浏览照片、阅读文档等。然而,除了想将手机投屏到电脑,还想要在电脑上直接操作手机,有方法可以实现吗? 现在使用AirDroid Cast的远程控制手机功能就可以实…

【CVE-2023-49103】ownCloud graphapi信息泄露漏洞(2023年11月发布)

漏洞简介 ownCloud owncloud/graphapi 0.2.x在0.2.1之前和0.3.x在0.3.1之前存在漏洞。graphapi应用程序依赖于提供URL的第三方GetPhpInfo.php库。当访问此URL时,会显示PHP环境的配置详细信息(phpinfo)。此信息包括Web服务器的所有环境变量&a…

ArkTS-WebView内嵌H5页面

鸿蒙开发使用WebView内嵌H5页面 访问在线网页时需添加网络权限:ohos.permission.INTERNET module.json5文件配置 {"module" : {"requestPermissions":[{"name": "ohos.permission.INTERNET"}]} }踩坑日记 加载网页效果无法…

C# datagridview控件 绑定数据库中表中数据的方式-3

1.如下图所示,为数据库中的一张表结构,注意该表中共有11个字段 2.首先在窗体后台代码中拖入一个datagridview控件,并在窗体加载时,给datagridview控件添加列,添加的方式如下所示:请注意,每个列…

[操作系统] 面试宝典之~死锁连环系列

文章目录 2.22 什么是死锁2.24 解决死锁的方法死锁的预防死锁的避免死锁的检测死锁的解除 2.22 什么是死锁 在多道程序环境下,多个进程可以竞争有限数量的资源。当一个进程申请资源时,如果这时没有可用资源,那么这个进程进入等待状态。有时&…

项目五 配置与管理磁盘

项目五 配置与管理磁盘 磁盘配额(Quota),磁盘阵列(RAID),逻辑滚动文件系统(LVM) #职业能力目标和要求 1,掌握Linux下的磁盘管理工具的使用方法 2,掌握Linux…

Kafka事务机制:原理和实践

Kafka事务机制:原理和实践 Apache Kafka 是一个分布式流处理平台,广泛用于构建实时数据管道和流应用程序。它不仅以高吞吐量、可扩展性和容错能力著称,还提供了事务支持,以确保数据的完整性和一致性。在这篇博客中,我…

虚拟公户如何让企业节税

近年来,电商行业迅猛发展,对于从事电商会计工作的人来说,加班已经成为家常便饭。随着移动技术的进步,电商与消费者之间的联系越来越紧密。每次购物节后,大家都非常关注天猫企业商家和电商会计如何通过节税来降低成本。…

时尚和美容网站的技术 SEO:提示和最佳实践

如果你对美容和时尚感兴趣,做了一个网站,但不知道如何在上面做技术SEO?此外,时尚和美容网站的技术 SEO 没有任何特别的指南! 我们听到了你的声音!但首先,请记住,技术性SEO不是在一两…

HCIP --- MGRE综合实验

一、总体规划 二、AR1配置思路及步骤 一、接口地址分配及缺省路由&#xff1a; The device is running! AR1&#xff1a; <Huawei>sy Enter system view, return user view with CtrlZ. [Huawei]sy r1 [r1]interface s4/0/0 [r1-Serial4/0/0]ip address 15.0.0.1 255.0…

【Cisco Packet Tracer】DHCP/FTP/WEB/DNS实验

本文使用CiscoPacketTracer仿真软件实现了DHCP/FTP/WEB/DNS实验&#xff0c;拓扑中包含2个客户机和3个服务器&#xff08;DHCP服务器、DNS服务器、FTP/WEB公用一个服务器&#xff09;&#xff0c;客户机的IP地址由DHCP服务器动态分配。 DHCP服务器IP地址&#xff1a;192.168.0…

【Rust】基本的语法概念

Rust初学习 常见概念变量与可变性变量常量隐藏 数据类型标量类型字符类型复合类型元组数组 函数参数语句和表达式具有返回值的函数 注释控制流使用循环重复执行 常见概念 变量与可变性 变量 fn main() {let x 5;println!("The value of x is: {x}");x 6;println…

Apipost也出IDEA插件了?Apipost-Helper!

IDEA是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它可以帮助开发人员更加高效地编写、调试和部署软件应用程序。我们在编写完接口代码后需要进行接口调试等操作&#xff0c;一般需要打开额外的调试工具。 今天给大家介绍一款IDEA插件&#xff1a;Api…

国产操作系统-银河麒麟V10

一、介绍 银河麒麟操作系统隶属于麒麟软件&#xff0c;麒麟软件是专业从事国产操作系统研发和产业化的企业&#xff0c;面向通用和专用领域打造安全创新的国产操作系统产品和相应解决方案&#xff0c;旗下拥有银河麒麟、中标麒麟、星光麒麟三大产品品牌。 麒麟软件官方网站地…

Linux处理文件常见命令

目录 1 cp 2 rm 3 zip与unzip 3.1 zip 3.2 unzip 4 cd 5 ls 6 chmod 7 scp 7.1 文件在你操作的机器上&#xff0c;你要传给另一个机器 7.1.1 文件 7.1.2 文件夹 7.2 文件在另一个机器上&#xff0c;你要把文件搞到你操作的机器上 7.2.1 文件 7.2.…