CSS中的一些杂知识

最新推荐文章于 2025-01-22 11:40:09 发布

杨桃贝贝

最新推荐文章于 2025-01-22 11:40:09 发布

阅读量926

点赞数 24

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_63977330/article/details/137524898

版权

1、CSS3新增 position:sticky（粘性定位）

1.1 /* 介绍：元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级元素祖先，包括table-related元素进行偏移。粘性定位可以被认为是"相对定位"和"固定定位"的混合。元素在跨越"特定阈值"前为相对定位，之后为固定定位偏移值不会影响任何其他元素的位置。

1.2 /* 特别注意: 设置粘性定位的层需要是body的"子元素",否则可能粘性定位失效

2、元素透明度 opacity

2.1 /* opacity: 0~1之间的数值,不带px单位,允许小数值或者整数值,0代表完全透明度,1代表完全不透明

2.2 /* 注意: opacity会让整个元素内容以及子元素内容都变透明; 而rgba设置背景颜色变透明,不影响其内容以及子元素内容

2.3 /* 注意: opacity设置透明度为0的时候,虽然元素看不见了,但是还占据位置

3、垂直对齐方式vertical-align

3.1 /* vertical-align 不影响"块级元素"中的内容对齐，它只针对于 "行内元素"或者"行内块元素"，特别是"行内块元素"，通常用来控制图片img图标标签或者表单控件input标签与"文字的对齐方式"。

3.2 /* 当img标签设置vertical-align的取值不是baseline, 而是top,middle或者bottom的时候, 都可以解决图片底部默认产生的缝隙分析

3.3 默认对齐:默认文字和图片基线对齐(vertical-align:baseline)

3.4 基线对齐:文字和图片基线对齐(vertical-align:baseline)

3.5 垂直居中:文字和图片中线对齐(vertical-align:middle)

3.6 顶部对齐:文字和图片行顶线对齐(vertical-align:top)

3.7 底部对齐:文字和图片行底线对齐(vertical-align:bottom)

3.8 数值: vertical-align的取值还可以写数值

3.9 百分比:vertical-align的取值还可以写百分比

3.10 去掉图片底部缝隙

3.10.1 设置图片的vertical-align属性

3.10.2 把图片转成块级元素

4、通过css的鼠标样式cursor可以改变鼠标指针样式

4.1 重点记住: cursor: pointer鼠标小手

4.2 另外, 指针可以使用图片替代 cursor: url(图片所在路径), auto

5、/* 强制代码一行显示 */

white-space: nowrap;

6、溢出处理

6.1 /* 溢出部分内容隐藏 */

overflow: hidden;

6.2 /* 溢出部分内容使用省略号代码 */

text-overflow: ellipsis;

6.3 /* 溢出隐藏 */

overflow: hidden;

7、/* 纯英文换行 */

word-break: break-all;

display: -webkit-box;

-webkit-box-orient: vertical;

/* 这里是超出几行省略 */

-webkit-line-clamp: 3;

8、/* 防止拖拽文本域resize */

textarea {

resize: none;

width: 300px;

height: 200px;

}

8、/* 默认盒子模型 = 内容(width,height) + padding + border

8.1 /* CSS3盒子模型是把padding和border包含进内容中

8.2 /* 通过box-sizing属性可以设置css3盒子模型, 取值border-box(内减模式)与content-box(外增模式)

9、/* box-shadow: 水平偏移量垂直偏移量模糊程度阴影大小阴影颜色 inset;

box-shadow: 4px 4px 10px 0px red;

/* box-shadow: 10px 10px 10px 5px red inset;

/* box-shadow: 4px 4px;

/* box-shadow: 4px;

/* 水平偏移量,垂直偏移量,阴影大小取值是数值带px单位,允许负值

/* 模糊程度取值数值带px单位,不允许负值

/* 默认盒子阴影是外阴影, 加上inset以后,就可以内阴影

/* 注意: 水平偏移量,垂直偏移量这两个参数是必填参,其他都可以省略,被省略参数将使用默认值

/* 多阴影,每组阴影属性之间使用逗号隔开

10、/* CSS的writing-mode属性:

10.1/* 介绍: writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 html 元素上设置）

10.2 /* 属性取值:

10.2.1 /* horizontal-tb 对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。

10.2.2 /* vertical-rl 对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

10.2.3 /* vertical-lr 对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

11、网站小图标

通过link引入网站小图标,这个网站小图标的图片格式一般是icon,而且文件名一般为favicon.ico, 这个favicon.ico文件会放在跟网页同一级目录下

vscode的快捷键link:favicon

引入外链式的reset.css文件:

12、ResetCSS (样式重置)

12.1 介绍：由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是重置默认样式（reset css），最简单的实现方法就是在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样。但是这段代码过于简单并不能解决绝大多数开发中遇到的浏览器不兼容问题，并且使用通配符选择器影响页面性能。

12.2 这里推荐使用专门的样式重置库，实现样式重置功能