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 等。

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

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

相关文章

反射率检测仪如何检测后视镜

后视镜反射率检测是评估后视镜质量的重要步骤&#xff0c;可以反映后视镜的反射效果是否满足设计要求。一般来说&#xff0c;后视镜的反射率越高&#xff0c;驾驶员观察车后的道路状况就越清晰&#xff0c;从而能够更好地判断与后方车辆的距离和速度差。 后视镜反射率检测的原理…

你被骗了吗?别拿低价诱骗机器视觉小白,4000元机器视觉系统怎么来的?机器视觉工程师自己组装一个2000元不到,还带深度学习

淘宝闲鱼&#xff0c;大家搜搜铺价格&#xff0c;特别是机器视觉小白。 机架&#xff1a;&#xff08;新的&#xff09;200元以下。(看需求&#xff0c;自己简单打光&#xff0c;买个50元的。如果复杂&#xff0c;就拿给供应商免费打光) 相机&#xff0c;镜头&#xff1a;&am…

Spring MVC的常用注解(设置响应篇)

目录 1.返回静态页面 2.返回数据 3.返回HTML代码片段 4.返回json 5.设置状态码 6.设置Header &#xff08;1&#xff09;.设置 Content-Type &#xff08;2&#xff09;.设置其他Header 推荐先看前篇博客Spring MVC的常用注解&#xff08;接收请求数据篇&#xff09; 接收…

【数据结构】时间复杂度与空间复杂度

算法在编写成可执行程序后&#xff0c;运行时需要耗费时间资源和空间(内存)资源 。因此衡量一个算法的好坏&#xff0c;一般是从时间和空间两个维度来衡量的&#xff0c;即时间复杂度和空间复杂度。 时间复杂度&#xff1a; 主要衡量一个算法的运行快慢 空间复杂度&#xff1a;…

C#学习相关系列之多线程---ConfigureAwait的用法

一、ConfigureAwait的作用 ConfigureAwait方法是Task类中的一个实例方法&#xff0c;它用于配置任务的运行上下文。运行上下文指的是任务在执行期间所处的环境&#xff0c;包括线程、同步上下文等。ConfigureAwait方法接受一个布尔值参数&#xff0c;用于决定是否捕获上下文。当…

【JAVA学习笔记】53 - 集合-List类及其子类Collection、ArrayList、LinkedList类

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter14/src/com/yinhai/collection_ https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter14/src/com/yinhai/list_ 集合 一、集合引入 前面我们保存多个数据使用的是数组…

Elasticsearch下载安装,IK分词器、Kibana下载安装使用,elasticsearch使用演示

首先给出自己使用版本的网盘链接&#xff1a;自己的版本7.17.14 链接&#xff1a;https://pan.baidu.com/s/1FSlI9jNf1KRP-OmZlCkEZw 提取码&#xff1a;1234 一般情况下 Elastic Search&#xff08;ES&#xff09; 并不单独使用&#xff0c;例如主流的技术组合 ELK&#xff08…

MyBatis Plus之wrapper用法

一、条件构造器关系 条件构造器关系介绍&#xff1a; 绿色框&#xff1a;抽象类 abstract 蓝色框&#xff1a;正常 class 类&#xff0c;可 new 对象 黄色箭头&#xff1a;父子类关系&#xff0c;箭头指向为父类 wrapper介绍&#xff1a; Wrapper &#xff1a;条件构造抽象类…

mac m1下navicat执行mongorestore 到mongodb

首先&#xff0c;下载https://www.mongodb.com/try/download/mongocli 解压缩后 有可执行文件使用navicat打开 加载后再重新点击 选择 要恢复的文件即可

CDN加速技术海外与大陆优劣势对比

内容分发网络&#xff08;CDN&#xff09;是一项广泛应用于网络领域的技术&#xff0c;旨在提高网站和应用程序的性能、可用性和安全性。CDN是一种通过将内容分发到全球各地的服务器来加速数据传输的服务。本文将探讨使用CDN的优势以及国内CDN和海外CDN之间的不同优势和劣势。 …

【C语言】函数指针存疑调试及回调函数编写(结构体内的Callback回调函数传参和虚伪的回调函数__weak声明)

【C语言】函数指针存疑调试及回调函数编写&#xff08;结构体内的Callback回调函数传参和虚伪的回调函数__weak声明&#xff09; 文章目录 函数指针存疑调试函数指针函数调用 回调函数编写结构体内的回调函数虚伪的回调函数 附录&#xff1a;压缩字符串、大小端格式转换压缩字符…

数据结构——双向链表的实现

一、双向链表的结构 注意&#xff1a;双向链表又称带头双向循环链表 这⾥的“带头”跟前⾯我们说的“头节点”是两个概念&#xff0c;实际前⾯的在单链表阶段称呼不严 谨&#xff0c;但是为了同学们更好的理解就直接称为单链表的头节点。 带头链表⾥的头节点&#xff0c;实际…

MySQL---数据用户管理和索引

DDL&#xff1a;CTEATE DROP ALTER dml&#xff1a;对数据进行管理 update insert into delete truncate dpl&#xff1a;查询语句 select dcl&#xff1a;权限控制语句 grant revoke 数据库用户管理 创建用户 修改用户权限 删除用户 grant要在终端执行 创建用户 cr…

function函数指针和lamada的[]和[=]注意事项

在工作的过程中&#xff0c;lamda表达式的 重点&#xff1a; 1.function对象存储函数指针。 2.lamada表达式&和捕捉的方式 lamda传入引用&&#xff0c;导致作用域消失&#xff0c;最终报错 std::function<void()> pFun; void GetNum1(const std::function<…

企业在招标流程中面临的 6 大挑战

采购中的招标是一种采购策略&#xff0c;包括向不同的销售商/供应商询价&#xff08;RFQ&#xff09;和索取资料&#xff08;RFI&#xff09;&#xff0c;以比较其特点、价格和功能。 工作团队在招标采购流程中投入了数个小时&#xff0c;但在整个过程中仍不得不忍受失望和不适…

【抓包分析】通过ChatGPT解密还原某软件登录算法实现绕过手机验证码登录

文章目录 &#x1f34b;前言实现效果成品广告抓包分析一、定位加密文件二、编辑JS启用本地替换 利用Chatgpt进行代码转换获取计划任务id模拟数据请求最后 &#x1f34b;前言 由于C站版权太多&#xff0c;所有的爬虫相关均为记录&#xff0c;不做深入&#xff01; 今天发现gith…

数据结构 | 算法的时间复杂度和空间复杂度【详解】

数据结构 | 算法的时间复杂度和空间复杂度【详解】 文章目录 数据结构 | 算法的时间复杂度和空间复杂度【详解】1. 什么是数据结构&#xff1f;2. 什么是算法&#xff1f;3. 算法效率4. 时间复杂度4.1 时间复杂度的概念4.2 推导大O阶的方法&#xff1a;4.3 常见时间复杂度计算举…

Leetcode—274.H指数【中等】

2023每日刷题&#xff08;十三&#xff09; Leetcode—274.H指数 算法思想 参考自灵茶山艾府 实现代码 int minValue(int a, int b) {return a < b ? a : b; }int hIndex(int* citations, int citationsSize){int cnt[5001] {0};int i;for(i 0; i < citationsSize; …

SpringBoot 公司推广系统 公司广告系统

SpringBoot 公司推广系统 公司广告系统 系统功能 首页功能: 广告展示 方案列表 站内搜索 资讯 查看详细咨询 登录注册 收藏 咨询方案 在线客服实时聊天 后台管理功能: 系统管理分为: 用户管理 角色管理 客户管理 首页轮播管理 公告管理 方案管理: 方案管理 资讯管理: 类型管…

【C++项目】高并发内存池第五讲内存回收释放过程介绍

内存回收 1.ThreadCache2.CentralCache3.PageCache 项目源代码&#xff1a;高并发内存池 1.ThreadCache void ThreadCache::Deallocate(void* ptr, size_t size) {assert(ptr);assert(size < MAX_BYTES);//计算在哪号桶中&#xff0c;然后插入进去size_t index SizeClass…