CSS高级技巧篇

最新推荐文章于 2024-05-10 04:14:55 发布

何北木

最新推荐文章于 2024-05-10 04:14:55 发布

阅读量473

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44908855/article/details/106900166

版权

CSS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1. 鼠标样式`cursor`

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性	属性值	作用
cursor:	default	白箭头
	pointer	小手
	move	移动
	text	文本
	auto	默认值，默认网页设定的样式
	url("imgs/target.ico"),auto	用图片作为鼠标样式，考虑网页的兼容性一般用ico格式图片，后面加上auto是为了防止图片失效，然后使用网页默认样式
	not-allowed	鼠标禁用图标

2 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

2.1 outline的属性，及语法

属性	属性值描述
outline-color:	轮廓线颜色
outline-style:	轮廓线样式
outline-width:	轮廓线宽度

 简写 outline : 颜色 样式 宽度;

2.2 去掉outline样式

我们平时一般不去设置，而是去掉浏览器默认的轮廓线样式。
最直接的写法是： outline: 0; 或者 outline: none;

<input type="text" style="outline: 0;"/>

3 防止拖拽文本域resize

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。
右下角不可以拖拽：

<textarea style="resize: none;"></textarea>

4 垂直对齐 vertical-align

在这里插入图片描述

4.1 vertical-align 垂直对齐

属性	属性值	作用
vertical-align:	baseline	基线对齐（默认值）
	top	顶线对齐
	middle	中线对齐
	bottom	底线对齐

注意： vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。

4.2 去除图片底侧空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
在这里插入图片描述

解决方法：

方法一：给img vertical-align:middle | top等等。让图片不要和基线对齐
方法二：给img 添加 display：block; 转换为块级元素就不会存在问题了
方法三：设置父元素的字体大小为0，副作用就是父元素范围里面的文字都会看不见，有文字的时候不推荐使用这种方法。

5 溢出处理

盒子在没有设置宽高的情况下，添加、缩减内容的时候会自动增加或减少width、height的值
如果盒子设置了width、height，那么当内容过多的时候就会溢出到盒子外边，溢出部分浏览器默认会显示出来

overflow 控制内容溢出边框盒后的处理方式：

属性	属性值	作用
overflow:	visible	溢出部分可见（默认值）
	hidden	溢出部分隐藏
	scroll	生成滚动条
	auto	在需要滚动条时才生成滚动条
overflow-x或y	scroll	只生成一边滚动条
overflow-x或y	auto	在需要时，出现一边滚动条

6. 断词规则（一般用默认的）

在行宽不够的时候，文字会自动换行，在哪个位置截断然后换行，由断词规则决定，浏览器有默认的断词规则

我们也可以通过word-break 设置断词规则：

属性	属性值	作用
word-break:	normal	默认值，CJK（中、日、韩）字符（文字位置截断），非CJK字符（单词位置截断）
	break-all	截断所有，所有字符都在文字处截断
	keep-all	保持所有，所有文字都在单词之间截断

7. 单行、多行文本过长设置 …

7.1 单行文本过长设置 …

比如有些标题过长，后面过长的部分用“…”来表示

white-space: nowrap;  // 首先需要设置不换行
overflow: hidden;     // 然后隐藏溢出
text-overflow: ellipsis;  // 然后文字溢出的部分用“...”来代替

7.2 多行文本过长设置 …

代码

display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

8. @规则

@import “路径”; 用于在一个CSS文件中导入另一个CSS文件，这样在HTML文件中导入一个CSS文件就可以了
@charset “utf-8”; 告诉浏览器该CSS文件，使用的字符编码集是utf-8；必须写在CSS文件中的第一行；一般情况下可以不写，如果CSS文件中出现了中文字符，建议写上

9. web字体

用户电脑上没有安装相应字体，强制让用户下载该字体（浏览器临时性自动下载网页编写者给定在CSS中的字体文件）

声明字体
@font-face{
    font-family:"字体名";
    src：url("字体文件路径");
}

注：然后就可以给元素设置这个字体了。字体文件放在font文件夹中

10. 块级格式化上下文（BFC）

全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了该区域中，常规流块盒的布局

1. 这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

《创建了BFC的元素》
序号	元素
1	html根元素
2	浮动元素
3	固定定位、绝对定位元素
4	行块盒元素
5	overflow（溢出）不等于visible（可见）的块盒

2. 独立的

不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
具体规则：
–>创建了BFC的元素，它的自动高度需要计算浮动元素
–>创建了BFC的元素，它的边框盒不会与浮动元素重叠
–>创建了BFC的元素，不会和它的子元素进行外边距合并

11. 堆叠上下文

堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序

创建堆叠上下文的元素

html元素（根元素）
设置了z-index（非auto）数值的定位元素

同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序（屏幕离用户的距离）：

创建堆叠上下文的元素的背景和边框
堆叠级别为负值的堆叠上下文
常规流非定位的块盒
非定位的浮动盒子
常规流非定位行盒
任何z-index是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能互相穿插

12. 样式补充display：list-item

设置为该属性值得盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

涉及的css：

list-style-type：
设置次盒子中内容的类型，此属性可以继承
list-style-position
设置次盒子相对于主盒子的位置

清空次盒子
list-style：none

13. 透明度

13.1 颜色透明度

每个颜色都具有透明通道，0~1
background:rgba（红，绿，蓝，alpha）
background:hex：#红绿蓝透
color：rgba(红，绿，蓝，alpha)
一般透明使用黑色（0，0，0，alpha）
background:hsla(360,100%,50%,0.2);
(色调，饱和度，亮度，透明度)
色调：根据红:0或360
橙30
黄60
绿120
青180
蓝240
紫300
饱和度：最高100%，最低0%；降低饱和度就是把颜色变淡；一般取值100%
亮度：最高100%最低0%；一般取50%；增加是加白色；降低是加黑色

13.2 元素透明度

opacity,它设置的是整个元素的透明（包括元素里的所有内容、边框、子元素…），它的取值是0~1；如 opacity:0.5
opacity具有继承性

14. 盒子隐藏

display:none,不生成盒子，盒子不占据空间（此方式隐藏可能会影响别的盒子的排版）
visibility：hidden，盒子仍然存在，只是从视觉上隐藏起来了，盒子仍然占据空间

15. @规则

at-rule：@规则、@语句、CSS语句、CSS指令
import：@import “路径”; 用于在一个CSS文件中导入另一个CSS文件，这样在HTML文件中导入一个CSS文件就可以了
charset：@charset “utf-8”; 告诉浏览器该CSS文件，使用的字符编码集是utf-8；必须写在CSS文件中的第一行；一般情况下可以不写，如果CSS文件中出现了中文字符，建议写上

16. web字体和图标

16.1 web字体

用户电脑上没有安装相应字体，强制让用户下载该字体（浏览器临时性自动下载网页编写者给定在CSS中的字体文件）

// 声明字体
@font-face{
	font-family:"字体名";
	src：url("字体文件路径");
}
//注：然后就可以给元素设置这个字体了。字体文件放在font文件夹中

16.2 字体图标

iconfont.cn

17. 块级格式化上下文

17.1 概念

全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了该区域中，常规流块盒的布局

17.2 常规流块盒

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒，垂直方向，若外边距无缝相邻，则进行外边距合并（margin-top塌陷）
常规流块盒的自动高度和摆放位置，无视浮动元素

17.3 BFC渲染区域（可以解决外边距合并的问题）

这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
a. 根元素（意味着html元素创建的BFC区域，覆盖了网页中所有的元素）
b. 浮动和绝对、固定定位元素
c. 行块盒元素display：inline-block;
d. overflow（溢出）不等于visible（可见）的块盒
独立的
a. 不同的BFC区域，它们进行渲染时互不干扰
b. 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
c. 具体规则：
–>创建了BFC的元素，它的自动高度需要计算浮动元素
–>创建了BFC的元素，它的边框盒不会与浮动元素重叠
–>创建了BFC的元素，不会和它的子元素进行外边距合并