开发知识点-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,一经查实,立即删除!

相关文章

[传智杯 决赛] 三元组

题目描述 给定一个长度为 n 的数列 a,对于一个有序整数三元组 (i,j,k),若其满足 1≤i≤j≤k≤n 并且 ai​aj​ak​,则我们称这个三元组是「传智的」。 现在请你计算,有多少有序整数三元组是传智的。 输入格式 本题单测试点内有…

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

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

百度离线3.0的一些功能的实现

案例: 设置覆盖物标注提示文字: <script>// 百度地图API功能var map new BMap.Map("map",{ mapType: BMAP_HYBRID_MAP }); var point new BMap.Point(120.55294, 41.665515); // 创建Map实例map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标…

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

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

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

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

P25 C++ const关键字

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

基于矢量控制的永磁同步电机调速系统

摘 要 在我们日常生活中&#xff0c;永磁同步电机随处可见&#xff0c;因为其相比其他电机而言结构相对简单&#xff0c;运行稳定且便于维修等优势&#xff0c;最重要的是永磁同步电机在调速方面具有很好的优势。随着自动控制技术和微电子技术的不断革新&#xff0c;目前的技术…

QPrinter 是 Qt 框架中的一个类,用于与打印机进行交互,并提供打印功能

QPrinter 是 Qt 框架中的一个类&#xff0c;用于与打印机进行交互&#xff0c;并提供打印功能。 QPrinter 类封装了打印机的属性和操作&#xff0c;可以用于生成打印输出&#xff0c;如打印文本、图形、表格等内容。它提供了一种通用的接口&#xff0c;使开发人员能够以跨平台…

王者小游戏

游戏里的经验动物 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如何远程控制华为手机?

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

35.基于vuecli搭建开发环境

1.vuecli提供了可视化的项目构建界面&#xff08;vue ui&#xff09;,相对于枯燥的命令行&#xff0c;交互方面更加友好。但是&#xff0c;为了更方便的哪来就用。我通过vuecli构建vue3项目后&#xff0c;又删除了一些它自身的代码&#xff0c;保存了一个结构清晰&#xff0c;内…

【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时&#xff0c;会显示PHP环境的配置详细信息&#xff08;phpinfo&#xff09;。此信息包括Web服务器的所有环境变量&a…

Android 13.0 修改系统默认设备类型的平板电脑类型为设备类型

1.概述 在13.0的系统rom产品开发中,对于产品设备类型都默认为tablet即平板电脑类型,即 product="tablet" 在一些不是平板的项目中,可能需要修改这个类型为device类型 即 product="device",这就需要找到相关设置系统属性的代码,修改系统属性就可以了 接…

ArkTS-WebView内嵌H5页面

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

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

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

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

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

layui下拉框jQuery动态修改选中并展示

<select id"ksbm" name"ksbm" lay-filter"ksbm" class"layui-input" placeholder"请选择科室" ><option value"" >全部</option> <option value"1" >1</option> <…

项目五 配置与管理磁盘

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

Kafka事务机制:原理和实践

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

虚拟公户如何让企业节税

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