css样式

1、position定位

主要是盒内元素跟盒外元素的一种位置布局。分为 static absotatic relative fixed 四种样式。

1.1 static

默认值，静态定位，表示没有定位，元素会按照正常的位置显示。 不写的话默认这个熟悉，此时可以用 `margin-top. 等属性

1.2 absotatic

1、如果 没有祖先元素 或者 祖先元素没有定位，则以浏览器为准定位。

2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3、绝对定位不再占有原先的位置。（其相对其他元素并不在一个平级，其他元素可以随意放置。）

可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpDVrgNc-1679621841500)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 14.49.39.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHO7MWbM-1679621841502)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 14.56.16.png)]

1.3 relative

1、相对定位，即相对于元素原来的位置进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量。

2、原来再标准流点位置继续占有，后面的盒子仍然以标准流点方式对待它。在此过程中不会对其它元素造成影响。

1.4 、fixed

固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ubrS2ROF-1679621841502)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 14.16.25.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1mIXPU0-1679621841503)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 14.43.54.png)]

1.5、子绝父相：

子级使用绝对定位的话，父级要用相对定位。

1.6、定位叠放次序。z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6iMRZ8DU-1679621841504)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 14.25.28.png)]

2、background

CSS 背景属性用于定义HTML元素的背景，常用的背景属性用法有以下几种：

1、background-color

设置背景颜色

2、background-image

设置背景图片地址

3、 background-repeat

设置背景图片如何重复平铺

4、 background-attachment

背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

5、 background-position

设置背景图片的位置

6、background-size

设置背景图片大小

7、background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面

8、background-origin

了指定背景图片background-image 属性的原点位置的背景相对区域

3、justify-content单行内多个元素排列方式

justify-content: center; /* 居中排列 */ justify-content: start; /* Pack items from the start */ justify-content: end; /* Pack items from the end */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify-content: left; /* Pack items from the left */ justify-content: right; /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */ justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */ justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */ justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */ justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
`justify-content: unset;``

4、水平居中&垂直居中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gMXon5WP-1679621841504)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-24 18.01.45.png)]

垂直居中的话：align-items: center

水平居中:

5、align-content

align-content

6、align-items

https://blog.csdn.net/qq_44329870/article/details/109832392

7、display

8、文本对齐

text-align

9、margin

1、 块级 元素 水平居中。

（该行的宽度限定，此元素左右margin 设置为 auto 。即 margin:0 , auto）

2、行内元素 或者 行内块元素水平居中

给其父元素 添加 text-align:center

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qIuBCJRE-1679621841505)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-28 18.03.01.png)]

3、嵌套块元素

使用margin 定义块元素的外边距时，可能出现外边距的合并。

对于两个嵌套关系的块元素，父元素有上外边距 同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9iPo69be-1679621841505)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-28 18.10.03.png)]

4、清除内外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AHzwfPYi-1679621841507)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-28 18.16.13.png)]

10、浮动（float）

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘 触及包含块或另一个浮动框的边缘。

1、浮动特性

1.1、给一个盒子设置 f loat 特性之后，他将跟没有设置float 的元素处于其他层级，也即是会叠加。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u4ULVark-1679621841508)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 09.28.02.png)]添加float 前后对比

1.2、任何元素 添加float 之后，会具有行内块元素相似的特性。包括 span等。

1.3、浮动元素经常和标准流父级搭配使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3t81eP0t-1679621841508)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 09.41.22.png)]

先设置 盒子大小， 再设置盒子的位置。

2、清除浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29ZLkOdr-1679621841509)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 10.34.57.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z2b11GFQ-1679621841509)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 10.36.52.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E0oC8b9q-1679621841510)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 10.38.11.png)]

3、添加 after :

​ .clearfix:after {

​ content: “”;

​ display: block;

​ height: 0;

​ clear: both;

​ visibility: hidden;

​ }

​ .clearfix {

​ *zoom: 1;

​ }

11、元素的显示与隐藏

类似网页广告，当点击关闭之后不见了，重新刷新页面，会重新出现。

本质：让一个元素在页面中隐藏或者显示出来

1、display 属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Za2lSjBT-1679621841510)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 15.06.30.png)]

2、visibility可见性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MmbHauqk-1679621841511)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 15.08.58.png)]

3、 overflow

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FgkVvyUs-1679621841511)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 15.14.43.png)]

12、c s s三角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bgEgxnRM-1679621841512)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 15.50.56.png)]

13、vertical-align

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4TdqYaLu-1679621841512)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 16.06.34.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oowpN4hk-1679621841513)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-31 16.12.18.png)]

1、div放 img 标签的话，默认会有一个空白缝隙。

bug: 行内块元素会和文字的基线对其。

主要解决办法：

1、给图片添加：vertical-align：middle等

2、把图片转换为块级元素 display:block

14、常见布局技巧

1、margin负值的使用

一些注意的点：

1、c s s文件中 width height 一般不写死，除非遇到如下情况：)

1、有图标需要设置。

2、有些标签没有 c lassName ，如下 , 此时 在le s s 文件可以用 > 表示下一级。

> 该符号表示子代选择器，也就是只会选择盒子的子元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c4Ud5or4-1679621841513)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-25 16.39.42.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3H1tdYfs-1679621841514)(/Users/user/Library/Application Support/typora-user-images/截屏2022-10-25 16.42.30.png)]

3、修改组件库样式

:global {}

开发过程中难免会使用到antdD、elementUI等组件库，当我们要需要修改组件的默认样式时，就需要使用到:global{}将需要修改的class名包裹起来，就可以到到修改的目的。

4、几个值得一记的标签

1、只想让多余的内容不显示，overflow: hidden; 可以帮到你