当前位置: 首页 > news >正文

CSS整理

目录

CSS中的&

弹性(display:flex)布局

flex的对齐方式

justify-content

align-items

flex-wrap 弹性盒换行

flex:1

flex属性 

flex-grow:项目的放大比例

flex-shrink:收缩

flex-basis:初始值,项目占据的主轴空间(main size)

flex的默认简写 

Vue中的style的lang=''和scpoed

scoped属性

lang='scss'

 sass和scss的区别


汇总一些遇到的css。

  • CSS中的&

CSS中的&代表的什么

如源码:
ul{
        margin-bottom: 20px;

        &>li { margin-bottom: 0;}
}

&表示嵌套的上一级
这是sass的语法代表上一级选择器

解释成CSS代码如下
ul{margin-bottom: 20px;} ul > li {margin-bottom: O;}

  • 弹性(display:flex)布局

扩展和收缩flex容器内的元素。注:子元素的float、clear、vertical-align属性将失效

属性:justify-content(左右对齐方式)、align-items(垂直对齐方式)

flex的对齐方式

  • justify-content

项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;// (左对齐)默认值    右对齐    居中        两端对齐        两侧间隔相等

  • align-items

项目在交叉轴上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;//       起点对齐    终点对齐   中点对齐  第一行基线对齐 无高/高为auto,占满整个容器高度

flex-wrap 弹性盒换行

flex-wrap: nowrap | wrap
// (默认值)不换行   换行//默认值 不换行 nowrap
//换行 wrap

flex:1

flex:1,表示flex-grow:1,用于自适应布局中,其父容器display:flex,当侧边栏大小固定后,将内容区flex:1,内容区会自动放大占满剩余空间

flex属性 

flex属性 是flex-grow、flex-shrink、flex-basis三个属性的简写。

  • flex-grow:项目的放大比例

默认为0, 即 即使存在剩余空间,也不放大

所有项目的flex-grow为1:等分剩余空间(自动放大占位)

flex-grow为n的项目,占据的空间(放大的比例)是flex-grow为1的n倍

  • flex-shrink:收缩

默认为1, 即 如果空间不足,该项目将缩小

所有项目的flex-shrink为1:空间不足时,缩小比例相同;

flex-shrink为0:空间不足时,项目不会缩小;

flex-shrink为n的项目,空间不足时 缩小的比例是flex-shrink为1的n倍。

  • flex-basis:初始值,项目占据的主轴空间(main size)

默认值为auto,即 项目原本大小

设置后将占据固定空间

flex的默认简写 

 MDN中给到的一些默认简写

Vue中的style的lang=''和scpoed


普通的style标签只支持普通的样式,如果想启用scss或者less,需要为style元素设置lang属性

  • scoped属性

scoped属性,是种特殊属性(布尔值),表示当前style的样式只属于当前模块。(作用域、私有化的思想)。scoped属性是指定样式的局部作用域。

思想:让当前组件的样式不会修改到其他地方的样式,用了data-v-hash的方式使得css有了对应的模块标识。

★ 在vue中: App.vue相当于根容器,不设置scoped。所以一般在App.vue中引用公共样式。而其它.vue页面中用scoped,代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。

  • lang='scss'

CSS预处理语言有SCSS(SASS.)和LESS等等,是用来实现样式。
lang的属性可选:scss (sass) . less等等 即:<style lang="scss">

 sass和scss的区别

scss是sass的一个升级版本,两者都是用来实现样式的,只是语法有各自的不同点。

注明:使用lang的属性需要安装scss (sass)

注意:sass和scss是两个不同的东西!只是相似!sass借鉴了ruby语言的规范很严格!代码里面也没有大括号!这对于习惯用css{}的前端人员很难适应!于是就出现了scss!完美兼容css!还能有sass的功能! 如果用的是webpack-simple模版用sass的话就是lang="sass",sass是没有{}括号的,如果有{}会抱错。 webpack模版的话就是用lang="scss"

参考:CSS中:和:: &_&:: css_nanhooo的博客-CSDN博客

CSS样式中的 & 是什么作用?_css &_慕尼黑、的博客-CSDN博客

什么是弹性(display: flex)布局 ?_display:flex_懒兔子宝宝的博客-CSDN博客

【Flex布局】网页布局效果_网页flex_黄昏终结者的博客-CSDN博客

flex:1什么意思_公孙元二的博客-CSDN博客

flex - CSS:层叠样式表 | MDN (mozilla.org)

scoped 属性的小知识_这里是蒋丞选手的博客-CSDN博客

vue:style标签中的scoped属性(作用域)和lang属性的介绍_lang="scss" scoped_huayang183的博客-CSDN博客

相关文章:

CSS整理

目录 CSS中的& 弹性&#xff08;display:flex&#xff09;布局 flex的对齐方式 justify-content align-items flex-wrap 弹性盒换行 flex:1 flex属性 flex-grow&#xff1a;项目的放大比例 flex-shrink&#xff1a;收缩 flex-basis&#xff1a;初始值&#xff…...

OpenCV 06(图像的基本变换)

一、图像的基本变换 1.1 图像的放大与缩小 - resize(src, dsize, dst, fx, fy, interpolation) - src: 要缩放的图片 - dsize: 缩放之后的图片大小, 元组和列表表示均可. - dst: 可选参数, 缩放之后的输出图片 - fx, fy: x轴和y轴的缩放比, 即宽度和高度的缩放比. - …...

Java 中的日期时间总结

前言 大家好&#xff0c;我是 god23bin&#xff0c;在日常开发中&#xff0c;我们经常需要处理日期和时间&#xff0c;日期和时间可以说是一定会用到的&#xff0c;现在总结下 Java 中日期与时间的基本概念与一些常用的用法。 基本概念 日期&#xff08;年月日&#xff0c;某…...

创建10个线程并发执行(STL/Windows/Linux)

C并发编程入门 目录 STL 写法 #include <thread> #include <iostream> using namespace std;void thread_fun(int arg) {cout << "one STL thread " << arg << " !" << endl; }int main(void) {int thread_count 1…...

三、创建各个展示模块组件

简介 在文件 components 中创建轮播模块组件,引入App.vue展示。欢迎访问个人的简历网站预览效果 本章涉及修改与新增的文件:First.vue、Second.vue、Third.vue、Fourth.vue、Fifth.vue、App.vue、vite-env.d.ts、assets 一、修改vite-env.d.ts文件 /// <reference type…...

推荐一款程序员截图神器!

快来看一下程序员必备的一款截图工具 今天就来和大家说一下作为程序员必备截图神器&#xff0c;几乎每一个程序员都会设置开机自启&#xff0c;因为这个截图功能太太太好用了&#xff01;&#xff01;&#xff01;只要你在键盘上按下F1就可以轻松截取整个屏幕&#xff0c;然后…...

无涯教程-JavaScript - IMCSC函数

描述 IMCSC函数以x yi或x yj文本格式返回复数的余割。 复数的余割定义为正弦的倒数。即 余割(z) 1 /正弦(z) 语法 IMCSC (inumber)争论 Argument描述Required/OptionalInumberA complex number for which you want the cosecant.Required Notes Excel中的复数只是简单…...

Ubuntu22.04 LTS 显卡相关命令

第一部分查看驱显卡信息 一、查看显卡型号 # -i表示不区分大小写 lspci | grep -i nvidia # 必须安装好nvidia驱动 nvidia-smi -L 二、查看显卡驱动版本 cat /proc/driver/nvidia/version 三、查看CUDA、cuDNN版本 # 或者 nvcc -V&#xff08;两个显示的版本一致&#xf…...

《TCP/IP网络编程》阅读笔记--基于 TCP 的半关闭

目录 1--基于TCP的半关闭 1-1--TCP单方面完全断开的问题 1-2--shutdown()函数 1-3--半关闭的必要性 2--基于半关闭的文件传输程序 1--基于TCP的半关闭 1-1--TCP单方面完全断开的问题 Linux 系统中的 close 函数会将 TCP Socket 的连接完全断开&#xff0c;这意味着不能收…...

Rust的模块化

Rust的模块化要从Rust的入口文件谈起。 Rust的程序的入口文件有两个 如果程序类型是可执行应用&#xff0c;入口文件是main.rs&#xff1b;如果程序类型是库&#xff0c;入口文件是lib.rs&#xff1b; 入口文件中&#xff0c;必须声明本地模块&#xff0c;否则编译器在编译过…...

vmware设置桥接模式后ip设置

网络连接方式设置 找到虚拟机里机器的网络设置 左边是宿主机&#xff0c;右边是虚拟机&#xff0c;按照这个设置就可以上网了(IP指定一个没有占用的值&#xff0c;子网掩码和网关设置成一样的)就可以联网了。 over~~...

算法通关村第十七关:白银挑战-贪心高频问题

白银挑战-贪心高频问题 1. 区间问题 所有的区间问题&#xff0c;参考下面这张图 1.1 判断区间是否重叠 LeetCode252 https://leetcode.cn/problems/meeting-rooms/ 思路分析 因为一个人在同一时刻只能参加一个会议&#xff0c;因此题目的本质是判断是否存在重叠区间 将区…...

目标检测评估指标mAP:从Precision,Recall,到AP50-95

1. TP, FP, FN, TN True Positive 满足以下三个条件被看做是TP 1. 置信度大于阈值&#xff08;类别有阈值&#xff0c;IoU判断这个bouding box是否合适也有阈值&#xff09; 2. 预测类型与标签类型相匹配&#xff08;类别预测对了&#xff09; 3. 预测的Bouding Box和Ground …...

七大排序算法

目录 直接插入排序 希尔排序 直接选择排序 堆排序 冒泡排序 快速排序 快速排序优化 非递归实现快速排序 归并排序 非递归的归并排序 排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作. 常见的排序算法有插入排序(直接插入…...

GitHub two-factor authentication

1. 介绍 登录 GitHub 官网&#xff0c;会提示要开启双因子认证。 但推荐的 APP 都是国外了&#xff0c;国内用不了。 可以使用 “腾讯身份验证器” 微信小程序。 2. 操作 开启双因子认证&#xff1a; 打开 “腾讯身份验证器” 微信小程序&#xff0c;扫描 GitHub 那个二维…...

un-app-手机号授权登录-授权框弹不出情况

前言 手机号授权是获取用户信息api停用之后&#xff0c;经常使用的api。但是此api也是有很多坑 手机号授权会出现调用不起来的情况&#xff0c;这是因为小程序后台没有进行微信认证导致的 手机号授权调用不起来-没有微信认证 来到小程序后台-设置-基本设置-下拉找到微信认证…...

手写Spring:第14章-自动扫描Bean对象注册

文章目录 一、目标&#xff1a;自动扫描Bean对象注册二、设计&#xff1a;自动扫描Bean对象注册三、实现&#xff1a;自动扫描Bean对象注册3.0 引入依赖3.1 工程结构3.2 Bean生命周期中自动加载包扫描注册Bean对象和设置占位符属性类图3.3 主力占位符配置3.4 定义拦截注解3.4.1…...

redux中间件的简单讲解

redux中间件 中间件的作用&#xff1a; 就是在 源数据 到 目标数据 中间做各种处理&#xff0c;有利于程序的可拓展性&#xff0c;通常情况下&#xff0c;一个中间件就是一个函数&#xff0c;且一个中间件最好只做一件事情 数据源 --------> 中间件 --------> 中间件 -…...

嵌入式开发-绪论

目录 一.什么是嵌入式 1.1硬件系统 1.2软件系统 二.嵌入式应用场景 2.1消费电子 2.1.1智能家居 2.1.2影音 2.1.3家用电器 2.1.4玩具游戏机 2.2通信领域 2.2.1对讲机 2.2.2手机 2.2.3卫星 2.2.4雷达 2.3控制领域 2.3.1机器人 2.3.2采集器PLC 2.4金融 2.4.1POS…...

大数据知识合集之预处理方法

数据预处理方法主要有&#xff1a; 数据清洗、数据集成、数据规约和数据变换。 1、数据清洗 数据清洗(data cleaning) &#xff1a;是通过填补缺失值、光滑噪声数据&#xff0c;平滑或删除离群点&#xff0c;纠正数据的不一致来达到清洗的目的。 缺失值处理 实际开发获取信…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...