Vue之CSS基础

CSS:层叠样式表

1、选择器

从模板template中选择某元素进行样式设置
需要注意的是作用域到底是当前模板还是整个html文档

1.1 基础(单一)选择器
标签、类、 id、通配符


  1. 标签、直接使用标签名,比如div,span…
    优点:全选
    模板中的名{。。。}

  2. 类、使用点+类名来选择
    优点:给某个标签设置某个类名,可以只选择某个标签。
    其实这个理论上并不像是选择模板的元素,而是像选择已经定义的类名。
    比如说,你在文档中定义了类A,类B,那么应该是选择这些类。
    修改类之后,再在模板中选择某个元素应用于该类,从而间接达到选择该(类)元素的效果。
    能体会到其中的独立性吗?类独立于元素。元素可以依赖于(多)类。
    类选择器因为这种多类性质,可以使得代码复用,开发中最常用
    .class名{。。。}

  3. id、使用#加id名来选择
    id唯一性:只能给某个元素定义,不可重复使用。经常和js搭配使用。
    #id名{。。。}

  4. 通配符、使用乘号*(表示所有的),一般可以用来清除(统一修改)整个文档的全部颜色、边距等…
    *{。。。}

1.2 复合选择器


  1. 空格链接的多个选择器,a b{…}
    将选择范围缩小
  2. 大于号>链接的两个选择器
    表示A>B:B是A的儿子(不是孙子…)
  3. 逗号链接的选择器
    同时选择多个选择器(并集)
  4. 使用冒号:添加附属属性的【伪类选择器】—注意生效顺序即可
    :hover鼠标悬停上方时生效的选择器
    :active鼠标按下未抬起
    :link未被点击的链接
    :visited已经被访问的链接
    input:focus表单元素获得焦点
    :first-child:只选择第一个孩子

1.3 css3新的选择器:


  1. 属性(可以包含值)选择器:E[属性] 或者 E[属性="val"]等等
  2. 结构伪类选择器:E:first-child,。。。。
  3. 伪元素选择器:不说了

2、显示模式

  1. 块元素: 独占一行div----
    h1-h6/p/ul/ol/li/div----div是最典型的块元素
    独占一行是因为宽默认是父级容器的100%、但是宽高、内外边距都可以控制,
    一般用来作为容器(注意,即使你设置宽度,他默认还是独占一行,这是在标准流布局模式下的,但是可以通过其他布局定位浮动来干预,这后续会讲到)
    (特殊:文字类比如p、h里面不能放容器)

  2. 行内元素:仅包括内容span----一行可以放多个
    a/strong/b/em/i/del/s/ins/span—span是比较经典的行内元素
    无法直接设置宽高,而是由内容来决定
    内部不能放1中的容器。
    (特殊:链接a里不能再放a,但是可以放块级元素–最好转化以下比较好)
    转化方式是指定display,比如:
    display:block—转换成块级元素
    display:inline—转换成行内元素
    display:inline-block—转换成行内块元素

  3. 行内块元素:
    本身大小宽高由内容决定,但是再次可以设置宽高边距
    img/input/td

使用vertical-align实现行内块和文字居中对齐

3、CSS 三大特性

  1. 继承性:子元素默认继承父元素的某些样式,比如文字样式,行高font-size,颜色…
  2. 层叠性:给相同的选择器中的某个相同的属性设置值,发生冲突时应该覆盖吗?
    最新原则:新来的替换旧的
  3. 优先级:同一个元素上的 不同的选择器优先级不同,即权重不同
    !important无穷大> 行内style=“” >id>类/伪类>元素名>通配符/继承的样式(子可以轻易更该父传来的)
    比如模板说有一个元素div,它使用了元素名div和类名class定义了两个样式,那么class优先级更高
    如何更该权重:上述1、所说的【复合选择器】可以看成可以提升权重。

4、盒子模型

  1. 页面布局核心:盒子模型、浮动、定位
  2. 网页布局本质上是由很多个盒子合理排放组成的。做网页布局首先考虑如何利用CSS摆放盒子。
  3. 从内到外:内容----内边距----边框----外边距,(注意边框是夹在内外边距中间的)也就是说,你给盒子加上边框边距,会把整个盒子撑大
    但是又一个属性可以使得边框独立于盒子(box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度)
    具体可以看uniapp的相关介绍:https://uniapp.dcloud.net.cn/tutorial/nvue-css.html#%E7%9B%92%E6%A8%A1%E5%9E%8B
    在这里插入图片描述
    可以看出,内外边距直接夹着边框,所以之所以需要区别内外边距,是因为我们有时候需要是否撑大边框。如果要撑大边框,就内边距。否则就外边距。-----你要是不设置边框,哪一个都随便。
    我们可以通过border属性来设置边框的粗细即设置宽width、实线solid虚线点线…颜色color等
    一般我们使用复合写法:border:1px solid red;
  4. 特殊的边框:圆角边框-----border-radius:10px;(CSS3新特性)原理是拿一个圆 减去直角
  5. 盒子阴影:box-shadow:1px 2px 3px 4px red;1 2表示x、y轴的影子偏移距离。3是模糊度,4是影子宽度尺寸,阴影不占用空间。另外还可以设置文字阴影text-shadow

5、布局——标准、浮动、定位

三种CSS传统布局方式----如何利用CSS正确摆放盒子

  1. 普通流(标准流、文档流、默认流):按照默认的方式摆放盒子,比如块元素div独占一行,并且从上到下、从左到右顺序。行内元素span从左到右,从上到下,碰到父元素最右边自动换行。
    总之就是:从上到下、从左到右就是默认的标准流。一般上下竖着排列的div直接使用标准流即可

  2. 浮动:改变元素的默认排列方式,比如div默认一行显示,即使设置宽度。但是设置浮动以后,再设置宽度,那么div盒子就浮动起来,可以达成一行显示的效果。
    总之就是可以让div横着堆起来的排列方式。float可以让块元素浮动起来去触碰其他块元素边缘。
    三个属性:none不浮动/ left向左浮动找朋友(边缘)/ right向右浮动找朋友或者边缘
    因为横向排列,只需要左右浮动即可:左浮动----左上漂浮;右浮动----右上漂浮。你可以理解成,先尝试往上漂浮,再左右漂浮。
    在这里插入图片描述浮动的使用建议:父容器使用标准流(默认的),子元素使用浮动。通过控制父元素,就可以间接控制子元素浮动效果。理论上一个父容器内的的子元素使用浮动,都应该全部使用,因为浮动会脱离标准流,如果A容器内有1,2两个元素,那么如果1使用浮动,2不使用,1就会遮住2。往往不满足你的需求。

  3. 定位:静态定位❌(无定位基本不用)、相对定位、绝对定位、固定定位fixed、粘性定位
    (1)相对定位:相对于自身最左边建立直角坐标系来定位。注意,不是相对于父容器的左上坐标。很多初学者会以为是相对于父容器,其实是相对于子元素自身的左上角坐标的。不会脱离标准流。毕竟就只是自身偏移了而已。即使留出空位,但是下面的盒子不会升上去。
    (2)绝对定位:相对于父容器(父容器比如设置定位,如果父容器没有设置定位,就会往上寻找已经定位的上一级已经定位的容器直到最近一级已定位的容器)。所以一般如果子元素使用绝对定位,那么父容器一般都需要设置定位(一般设置为相对定位)。所以我们经常说一句口诀“子绝父相”。请注意,一切以你需求为主,并不是死的要求。绝对定位是脱离标准流的。也就是会飘起来(你可以想象成上升了一层),导致后面的元素会移动占用它原先的位置。

总结:标准流提供了一种最基本的布局方式——上左右,但是不够灵活。浮动float相对于标准流提供了先尝试往上,再左右漂浮的比较灵活的布局方式。但是浮动的位置我们又很难控制自定义,所以最后定位给了我们最大的自定义模式。

  • 使用场景?以上三种布局方式各有各的使用场景(并没有谁好谁坏),如果你什么都不写,默认就是标准流。有时候你可以使用浮动来弥补一些标准流的缺陷。最后还可以使用定位来最大程度自定义,实现真正的div。

  • 脱标是什么?还需要注意的是浮动会脱离标准流(脱标),脱标的意思是,移动之后,是否还保留再标准流中的位置。打个比方,你去排队打饭,默认是先来后到前后排列(标准流),但是你排队一半老师突然叫你过去一下,这时候是否需要保持你在队列中的位置?如果保留,那么别人就无法占用你的位置(即使位置没人)。这种方式就是还在标准流中。相反,如果不保留位置,就是脱标,即别人可以占用你原先的空位。
    相对定位不脱标(相对定位还是基于标准流)。其他一般都脱标,浮动、绝对定位、fixed都是脱标的!
    还需要注意一点,上面所说的是脱标(脱离标准流),如果两个都是浮动,那么是同属一层的(不再是标准流,你可以想象成上升一层----浮动层,所以也不存在是否脱标的概念),因此不会重叠。
    判断是否标准流,还是很关键的。涉及到这个元素会不会飘起来。。。就是一个容器内,你元素A基于标准流,另一个元素B脱标(比如使用浮动、绝对定位…)就会可能遮住A 。

  • 浮动脱标带来的缺陷怎么解决?在开发过程中,某些父容器我们不方便直接给固定的高度,而是希望子元素来自动撑开。但是如果使用浮动之后,子元素会上升一层,导致父容器如果不设置高度,子元素全部上升了父容器高度就会自动收缩为0,后面的标准流的容器就会往前挤。这是我们不希望看到的。我们希望看到即使子元素都漂浮起来后,父容器还是能够保持能够容纳他们的高度(如果父容器没有设置高度)。
    这时候如果我们使用float就需要清除浮动带来的坏处,clear:both----清除左右两边浮动

方式1:最后添加额外的块级元素来占用父元素空间(可以理解成隔墙法,w3c的写法)
<div class="容器">
    <div class="box">浮动 </div>
    <div class="box">浮动</div>
    <....其他浮动元素
    <div style="clear:both"></div>
</div>

方式2:给父级容器加overflow,auto/hidden/scroll均可,缺点是溢出会隐藏。

方式3:伪元素法——给父级容器添加这样的属性(方式1的升级版)
.clearfix:after{
	content:"";//内容必须为空
	display:block;//必须转为块元素,因为伪类是行内
	height:0;
	clear:both;
	visibility:hidden;
}
/*兼容IE6,7,需要加这个*/
.clearfix:after{
	*zoom:1;
}

方式4:双伪元素——父容器加
.clearfix:before,
.clearfix:after{
	content:"";//内容必须为空
	display:table;
}
.clearfix:after{
	clear:both;
}
/*兼容IE6,7,需要加这个*/
.clearfix:after{
	*zoom:1;
}

  • 定位脱标是否需要清除浮动?
    首先定位这边就没有浮动的概念,所以定位也是没有清除浮动的概念的。
    另外,定位的元素因为可以提供偏移坐标来移动,设置坐标之后,就可能会出现重叠情况。一般默认是先来后到,但是如果你需要设置哪一个元素在上方,所以就提供层级的概念:z-index。比如容器A包含3个定位元素,默认是后面的元素遮住前面的元素,但是你可以设置z-index来控制哪一个在上层。

  • 给行内元素比如span添加脱标定位(绝对、固定),就可以设置宽高

  • 给块元素比如div设置添加脱标定位(绝对、固定),就不再独占一行(好像说了一句废话,都飘起来了,哪里还有独占一行的说法)

  • 浮动和定位的脱标比较:浮动定位脱标但是不会压住文字,绝对固定定位脱标会压住文字。这是因为浮动本来就是为了做文字环绕而生的,

6、显示和隐藏元素

  1. display:none—隐藏不再占有原位置(去除);display:block----显示(还有转换成块元素的意思)
  2. visibility:hidden—隐藏但保留原位置;visibility:visable----显示
  3. overflow:hidden—超出溢出隐藏;overflow:其他----显示
  4. 单行文字溢出省略号:white-space+overflow:hidden+text-overflow:ellipsis
  5. 多行:
{
   /*多出部分显示省略号*/
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 6;//6行之后显示
   -webkit-box-orient: vertical;
}

7、计算盒子宽度calc函数(CSS3)

加减乘除,
比如让子盒子用于比父盒子小100px(因为父容器可能会变化)

calc(100% - 100px)// 减号左右带空格并带单位,其中100%表示父容器的宽或者高

8、CSS3的动画过渡

经常和鼠标悬浮:hover一起搭配使用,比如一个元素本来有一个样式,鼠标放上去就会生效另一个样式,就会产生变化过渡,你希望这个过渡怎么发生?

注意:在原样式加,而不是鼠标:hover的样式加。

transition:1 2 3 4;
1:要过渡的属性,all表示选择所有发生变化的属性,可以添加固定的比如宽width...
2:花费时间,比如1s,.5s
3:运动曲线,默认ease,匀速
4:何时触发:默认立即触发。即0s

9、移动web—flex布局

优点:简单快速,缺点:可能不支持IE浏览器
如果不考虑兼容IE,可以使用。

任何一个元素都可以指定flex布局:display:flex;所以我们经常给span指定来对齐其中的文本。

父容器设置flex布局之后,浮动float会失效,但是可以使用定位。

  1. 设置主轴:默认是row(行)此时副轴纵轴为y轴,可以设置成column(列)此时副轴纵轴为x轴
    因为新手可能会看不明白这一点,所以我就解释这个,其他的推荐你在这里学习:https://uniapp.dcloud.net.cn/tutorial/nvue-css.html#flex-%E5%AE%B9%E5%99%A8

10、grid网格布局

优点:某些情况下比flex好用。
可以看看这篇文章学习基础用法和场景:https://blog.csdn.net/qq_18798149/article/details/133872183

display: grid;
grid-template-columns:1fr 1fr 1fr;//3列,相对于flex:1
gap:30px;

一下是chatgpt的一些说明(不一定对,作为参考)
给父容器样式加:

  1. display:指定元素作为网格容器。

    • display: grid;:将元素设置为网格容器。
    • display: inline-grid;:将元素设置为内联网格容器。
  2. grid-template-columns 或者 grid-template-rows:定义网格容器的列和行。前者优先于后者

    • grid-template-columns: value1 value2 ...;:指定列的大小和数量。
    • grid-template-rows: value1 value2 ...;:指定行的大小和数量。
    • 可以使用长度值(如像素、百分比),或者使用 fr 单位表示网格轨道的比例关系。
  3. grid-template-areas:通过指定区域名称来创建网格模板。

    • grid-template-areas: "area1 area2" "area3 area4";:定义网格容器的区域布局。
    • 通过在网格模板中使用区域名称,可以更轻松地定义网格项的位置和跨度。
  4. grid-column-gapgrid-row-gap:指定网格项之间的列和行间隙。

    • grid-column-gap: value;:指定列间隙的大小。
    • grid-row-gap: value;:指定行间隙的大小。
    • 可以使用长度值(如像素、百分比)或关键字 normal
  5. grid-gap:同时指定网格项之间的列和行间隙。

    • grid-gap: row-gap column-gap;:同时指定行间隙和列间隙的大小。
  6. grid-columngrid-row:指定网格项的位置和跨度。

    • grid-column: start / end;:指定网格项的起始列和结束列。
    • grid-row: start / end;:指定网格项的起始行和结束行。
    • 可以使用网格线编号、区域名称、关键字 span 和负值来定义位置和跨度。
  7. justify-itemsalign-items:定义网格项在其单元格内的对齐方式。

    • justify-items: value;:指定网格项在水平方向上的对齐方式。
    • align-items: value;:指定网格项在垂直方向上的对齐方式。
    • 可以使用关键字 startendcenterstretch 等。
  8. justify-contentalign-content:定义网格项在网格容器中的对齐方式。

    • justify-content: value;:指定网格项在水平方向上的对齐方式。
    • align-content: value;:指定网格项在垂直方向上的对齐方式。
    • 可以使用关键字 startendcenterspace-betweenspace-around 等。

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

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

相关文章

数字化时代,谈谈无处不在的大数据和商业智能BI的关系

随着数字化时代的正式到来&#xff0c;众多领域开展了新一轮的科技革命和产业革命&#xff0c;通过大数据或商业智能BI等数据类技术解决方案&#xff0c;完成了从业务、产品到经营模式、管理决策的全方位升级&#xff0c;获得了突破性的成长。 如今&#xff0c;大数据和商业智…

3D模型格式转换工具HOOPS Exchange对工业级3D产品HOOPS的支持与应用

一、概述 HOOPS Exchange是一套高性能模型转换软件库&#xff0c;可以给软件提供强大的模型的导入和导出功能&#xff0c;我们可以将其单独作为转换工具使用&#xff0c;也可以将其集成到自己的软件中。 同样&#xff0c;HOOPS 的其它产品&#xff0c;也离不开HOOPS Exchange…

SpringBoot整合阿里云OSS对象存储

文章目录 1、OSS介绍及开通1.1、阿里云OSS简介1.2、开通OSS 2、创建存储空间bucket及密钥获取2.1、创建存储空间2.2、获取密钥 3、OSS快速入门案例4、在springboot项目中整合4.1、将oss配置放到yml文件中4.2、创建Oss属性类&#xff0c;接收yml文件中的属性4.3、封装文件上传功…

Vue Router使用VueUse更改标签页名称的工具函数

进入正题 安装 npm i vueuse/core or pnpm i vueuse/core or yarn add vueuse/corerouter/helper.js import { useTitle } from vueuse/coreexport const usePageTitle (to) > {const projectTitle import.meta.env.VITE_APP_TITLE // 将可变名抽出到 .env 内配置cons…

docker进阶

文章目录 docker 进阶Part1 常用命令总结docker version 查看docker客户端和服务端信息docker info 查看更加详细信息docker images 列出所有镜像基本用法常用选项 docker search 搜索镜像基本用法示例用法 docker pull 拉取镜像基本用法示例用法 docker rmi 删除镜像基本用法示…

前后端配合实现按钮级操作权限控制

背景 公司项目需要做到按钮级权限限制&#xff0c;至此有了该文&#xff0c;如有错误&#xff0c;请联系博主指出&#xff0c;多多感谢。 角色配置前后端操作 首先最基本的角色配置&#xff0c;配置该类角色有哪些菜单以及那些菜单的哪些按钮权限 菜单及菜单按钮由前端维护&a…

kali搭建docker

kali搭建docker 更新kali源 sudo apt update出错 更新一下密钥 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys ED444FF07D8D0BF6安装docker sudo apt install docker.io -y #安装docker docker -v #docker版本 sudo systemctl status docker #查看docker…

C语言数据结构之数据结构入门

目录 数据结构介绍 数据结构发展史 何为算法 数据结构基础 基本概念和术语 四大逻辑结构&#xff08;Logic Structure&#xff09; 数据类型 理解复杂度概念 时间空间复杂度定义 度量时间复杂度的方法 程序运行时的内存与地址 编程预备 数据结构介绍 数据结构发展…

CSS+Javascript+Html日历控件

最近&#xff0c;因需要用HTMLJAVASCRIPTCSS实现了一个日历控件&#xff0c;效果如下&#xff1a; 单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法&#xff0c;分HMLCSSJAVASCRIPT三部分代码。 一、html代码 <h1>学习计划</h1…

1.6 基本安全设计准则

思维导图&#xff1a; 1.6 基本安全设计准则笔记 目标&#xff1a;理解和遵循一套广泛认可的安全设计准则&#xff0c;以指导保护机制的开发。 主要准则&#xff1a; 机制的经济性&#xff1a;安全机制应设计得简单、短小&#xff0c;便于测试和验证&#xff0c;减少漏洞和降…

ES 8.x新特性一览(完整版)

一、看点 在 2022 年 2 月 11 日&#xff0c;Elasticsearch&#xff08;ES&#xff09;正式发布了 8.0 版本&#xff0c;而截止到 2023 年 10 月&#xff0c;历经一年半时间&#xff0c;ES官方已经连续发布了多个版本&#xff0c;最新版本为 8.10.4。这一系列的更新引入了众多引…

【算法|动态规划No.32 | 完全背包问题】完全背包模板题

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

如何知道服务器的某个端口是否打开

1、telnet 命令&#xff1a;telnet ip port&#xff0c;port即端口&#xff0c;我们一般最常见的命令就是telnet&#xff0c;但是telnet使用的是tcp协议&#xff0c;换句话说telnet只能检测tcp的这个端口打开了没 若是端口打开&#xff0c;会出现下列信息 失败的是这个 如…

Linux 块设备驱动实验

前面我们都是在学习字符设备驱动&#xff0c;本章我们来学习一下块设备驱动框架&#xff0c;块设备驱动是Linux 三大驱动类型之一。块设备驱动要远比字符设备驱动复杂得多&#xff0c;不同类型的存储设备又对应不同的驱动子系统&#xff0c;本章我们重点学习一下块设备相关驱动…

Elasticsearch:使用 Elasticsearch 进行词汇和语义搜索

作者&#xff1a;PRISCILLA PARODI 在这篇博文中&#xff0c;你将探索使用 Elasticsearch 检索信息的各种方法&#xff0c;特别关注文本&#xff1a;词汇 (lexical) 和语义搜索 (semantic search)。 使用 Elasticsearch 进行词汇和语义搜索 搜索是根据你的搜索查询或组合查询…

【Java 进阶篇】Java BeanUtils 使用详解

Java中的BeanUtils是一组用于操作JavaBean的工具&#xff0c;它允许你在不了解JavaBean的具体内部结构的情况下&#xff0c;访问和修改其属性。本文将详细介绍Java BeanUtils的使用&#xff0c;包括如何获取和设置JavaBean的属性&#xff0c;复制属性&#xff0c;以及如何处理嵌…

Prometheus接入AlterManager配置钉钉告警(基于K8S环境部署)

文章目录 一、钉钉群创建报警机器人二、安装Webhook-dingtalk插件三、配置Webhook-dingtalk插件对接钉钉群四、配置AlterManager告警发送至Webhook-dingtalk五、Prometheus接入AlterManager配置六、部署PrometheusAlterManager(放到一个Pod中)七、测试告警 注意&#xff1a;请基…

使用Nokogiri和OpenURI库进行HTTP爬虫

目录 一、Nokogiri库 二、OpenURI库 三、结合Nokogiri和OpenURI进行爬虫编程 四、高级爬虫编程 1、并发爬取 2、错误处理和异常处理 3、深度爬取 总结 在当今的数字化时代&#xff0c;网络爬虫已经成为收集和处理大量信息的重要工具。其中&#xff0c;Nokogiri和OpenUR…

深入理解数据结构(2)——用数组实现队列

数组是一种数据结构&#xff0c;队列也是一种数据结构。它们都是由基础的语法实现的。 如果一个数据结构可以用另外的数据结构来实现&#xff0c;那么可以有力的证明——“数据结构是一种思想”&#xff0c;是一种讲语法组合起来实现某种功能的手段 “整体大于局部” 一、队列的…