Vue之CSS基础 - 技术栈

CSS：层叠样式表

1、选择器

从模板template中选择某元素进行样式设置

需要注意的是作用域到底是当前模板还是整个html文档

1.1 基础(单一)选择器

标签、类、 id、通配符

标签、直接使用标签名，比如div,span...

优点：全选

模板中的名{。。。}
类、使用点+类名来选择

优点：给某个标签设置某个类名，可以只选择某个标签。

其实这个理论上并不像是选择模板的元素，而是像选择已经定义的类名。

比如说，你在文档中定义了类A，类B，那么应该是选择这些类。

修改类之后，再在模板中选择某个元素应用于该类，从而间接达到选择该(类)元素的效果。

能体会到其中的独立性吗？类独立于元素。元素可以依赖于(多)类。

类选择器因为这种多类性质，可以使得代码复用，开发中最常用

.class名{。。。}
id、使用#加id名来选择

id唯一性：只能给某个元素定义，不可重复使用。经常和js搭配使用。

#id名{。。。}
通配符、使用乘号*（表示所有的），一般可以用来清除（统一修改）整个文档的全部颜色、边距等...

*{。。。}

1.2 复合选择器

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

1.3 css3新的选择器：

属性（可以包含值）选择器：E[属性] 或者 E[属性="val"]等等
结构伪类选择器：E:first-child，。。。。
伪元素选择器：不说了

2、显示模式

块元素：独占一行div----

h1-h6/p/ul/ol/li/div----div是最典型的块元素

独占一行是因为宽默认是父级容器的100%、但是宽高、内外边距都可以控制，

一般用来作为容器（注意，即使你设置宽度，他默认还是独占一行，这是在标准流布局模式下的，但是可以通过其他布局定位浮动来干预，这后续会讲到）

（特殊：文字类比如p、h里面不能放容器）
行内元素：仅包括内容span----一行可以放多个

a/strong/b/em/i/del/s/ins/span---span是比较经典的行内元素

无法直接设置宽高，而是由内容来决定

内部不能放1中的容器。

（特殊：链接a里不能再放a，但是可以放块级元素--最好转化以下比较好）

转化方式是指定display，比如：

display：block---转换成块级元素

display：inline---转换成行内元素

display：inline-block---转换成行内块元素
行内块元素：

本身大小宽高由内容决定，但是再次可以设置宽高边距

img/input/td

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

3、CSS 三大特性

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

4、盒子模型

页面布局核心：盒子模型、浮动、定位
网页布局本质上是由很多个盒子合理排放组成的。做网页布局首先考虑如何利用CSS摆放盒子。
从内到外：内容----内边距----边框----外边距，（注意边框是夹在内外边距中间的）也就是说，你给盒子加上边框边距，会把整个盒子撑大
但是又一个属性可以使得边框独立于盒子（box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度）
具体可以看uniapp的相关介绍：https://uniapp.dcloud.net.cn/tutorial/nvue-css.html#盒模型

可以看出，内外边距直接夹着边框，所以之所以需要区别内外边距，是因为我们有时候需要是否撑大边框。如果要撑大边框，就内边距。否则就外边距。-----你要是不设置边框，哪一个都随便。
我们可以通过border属性来设置边框的粗细即设置宽width、实线solid虚线点线...颜色color等
一般我们使用复合写法：border:1px solid red;
特殊的边框：圆角边框-----border-radius:10px;（CSS3新特性）原理是拿一个圆减去直角
盒子阴影：box-shadow:1px 2px 3px 4px red;1 2表示x、y轴的影子偏移距离。3是模糊度，4是影子宽度尺寸，阴影不占用空间。另外还可以设置文字阴影text-shadow

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

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

普通流(标准流、文档流、默认流)：按照默认的方式摆放盒子，比如块元素div独占一行，并且从上到下、从左到右顺序。行内元素span从左到右，从上到下，碰到父元素最右边自动换行。

总之就是：从上到下、从左到右就是默认的标准流。一般上下竖着排列的div直接使用标准流即可
浮动:改变元素的默认排列方式，比如div默认一行显示，即使设置宽度。但是设置浮动以后，再设置宽度，那么div盒子就浮动起来，可以达成一行显示的效果。

总之就是可以让div横着堆起来的排列方式。float可以让块元素浮动起来去触碰其他块元素边缘。

三个属性：none不浮动/ left向左浮动找朋友（边缘）/ right向右浮动找朋友或者边缘

因为横向排列，只需要左右浮动即可：左浮动----左上漂浮；右浮动----右上漂浮。你可以理解成，先尝试往上漂浮，再左右漂浮。
浮动的使用建议：父容器使用标准流（默认的），子元素使用浮动。通过控制父元素，就可以间接控制子元素浮动效果。理论上一个父容器内的的子元素使用浮动，都应该全部使用，因为浮动会脱离标准流，如果A容器内有1，2两个元素，那么如果1使用浮动，2不使用，1就会遮住2。往往不满足你的需求。
定位:静态定位❌（无定位基本不用）、相对定位、绝对定位、固定定位fixed、粘性定位

（1）相对定位：相对于自身最左边建立直角坐标系来定位。注意，不是相对于父容器的左上坐标。很多初学者会以为是相对于父容器，其实是相对于子元素自身的左上角坐标的。不会脱离标准流。毕竟就只是自身偏移了而已。即使留出空位，但是下面的盒子不会升上去。

（2）绝对定位：相对于父容器（父容器比如设置定位，如果父容器没有设置定位，就会往上寻找已经定位的上一级已经定位的容器直到最近一级已定位的容器）。所以一般如果子元素使用绝对定位，那么父容器一般都需要设置定位（一般设置为相对定位）。所以我们经常说一句口诀"子绝父相"。请注意，一切以你需求为主，并不是死的要求。绝对定位是脱离标准流的。也就是会飘起来（你可以想象成上升了一层），导致后面的元素会移动占用它原先的位置。

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

使用场景？以上三种布局方式各有各的使用场景（并没有谁好谁坏），如果你什么都不写，默认就是标准流。有时候你可以使用浮动来弥补一些标准流的缺陷。最后还可以使用定位来最大程度自定义，实现真正的div。
脱标是什么？还需要注意的是浮动会脱离标准流（脱标），脱标的意思是，移动之后，是否还保留再标准流中的位置。打个比方，你去排队打饭，默认是先来后到前后排列（标准流），但是你排队一半老师突然叫你过去一下，这时候是否需要保持你在队列中的位置？如果保留，那么别人就无法占用你的位置（即使位置没人）。这种方式就是还在标准流中。相反，如果不保留位置，就是脱标，即别人可以占用你原先的空位。

相对定位不脱标(相对定位还是基于标准流)。其他一般都脱标，浮动、绝对定位、fixed都是脱标的！

还需要注意一点，上面所说的是脱标（脱离标准流），如果两个都是浮动，那么是同属一层的（不再是标准流，你可以想象成上升一层----浮动层，所以也不存在是否脱标的概念），因此不会重叠。

判断是否标准流，还是很关键的。涉及到这个元素会不会飘起来。。。就是一个容器内，你元素A基于标准流，另一个元素B脱标（比如使用浮动、绝对定位...）就会可能遮住A 。
浮动脱标带来的缺陷怎么解决？在开发过程中，某些父容器我们不方便直接给固定的高度，而是希望子元素来自动撑开。但是如果使用浮动之后，子元素会上升一层，导致父容器如果不设置高度，子元素全部上升了父容器高度就会自动收缩为0,后面的标准流的容器就会往前挤。这是我们不希望看到的。我们希望看到即使子元素都漂浮起来后，父容器还是能够保持能够容纳他们的高度（如果父容器没有设置高度）。

这时候如果我们使用float就需要清除浮动带来的坏处，clear:both----清除左右两边浮动

html 复制代码

方式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、显示和隐藏元素

display:none---隐藏不再占有原位置（去除）；display:block----显示（还有转换成块元素的意思）
visibility:hidden---隐藏但保留原位置；visibility:visable----显示
overflow:hidden---超出溢出隐藏；overflow:其他----显示
单行文字溢出省略号：white-space+overflow：hidden+text-overflow：ellipsis
多行：

html 复制代码

{
   /*多出部分显示省略号*/
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 6;//6行之后显示
   -webkit-box-orient: vertical;
}

7、计算盒子宽度calc函数（CSS3）

加减乘除，

比如让子盒子用于比父盒子小100px（因为父容器可能会变化）

html 复制代码

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

8、CSS3的动画过渡

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

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

html 复制代码

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会失效，但是可以使用定位。

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

10、grid网格布局

优点：某些情况下比flex好用。

可以看看这篇文章学习基础用法和场景：https://blog.csdn.net/qq_18798149/article/details/133872183

html 复制代码

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

一下是chatgpt的一些说明（不一定对，作为参考）

给父容器样式加：

display：指定元素作为网格容器。
- display: grid;：将元素设置为网格容器。
- display: inline-grid;：将元素设置为内联网格容器。
grid-template-columns 或者 grid-template-rows：定义网格容器的列和行。前者优先于后者
- grid-template-columns: value1 value2 ...;：指定列的大小和数量。
- grid-template-rows: value1 value2 ...;：指定行的大小和数量。
- 可以使用长度值（如像素、百分比），或者使用 fr 单位表示网格轨道的比例关系。
grid-template-areas：通过指定区域名称来创建网格模板。
- grid-template-areas: "area1 area2" "area3 area4";：定义网格容器的区域布局。
- 通过在网格模板中使用区域名称，可以更轻松地定义网格项的位置和跨度。
grid-column-gap 和 grid-row-gap：指定网格项之间的列和行间隙。
- grid-column-gap: value;：指定列间隙的大小。
- grid-row-gap: value;：指定行间隙的大小。
- 可以使用长度值（如像素、百分比）或关键字 normal。
grid-gap：同时指定网格项之间的列和行间隙。
- grid-gap: row-gap column-gap;：同时指定行间隙和列间隙的大小。
grid-column 和 grid-row：指定网格项的位置和跨度。
- grid-column: start / end;：指定网格项的起始列和结束列。
- grid-row: start / end;：指定网格项的起始行和结束行。
- 可以使用网格线编号、区域名称、关键字 span 和负值来定义位置和跨度。
justify-items 和 align-items：定义网格项在其单元格内的对齐方式。
- justify-items: value;：指定网格项在水平方向上的对齐方式。
- align-items: value;：指定网格项在垂直方向上的对齐方式。
- 可以使用关键字 start、end、center、stretch 等。
justify-content 和 align-content：定义网格项在网格容器中的对齐方式。
- justify-content: value;：指定网格项在水平方向上的对齐方式。
- align-content: value;：指定网格项在垂直方向上的对齐方式。
- 可以使用关键字 start、end、center、space-between、space-around 等。