今天总结一下用到的css吧

# 概要

我经常都适用flex布局，flex可以看作是一维布局，它主要针对轴线的位置进行布局，grid把布局划分成行和列，产生单元格，可以看成是二维布局。grid远比flex布局强大

# 行和列

容器水平称为行（row），垂直称为列（column），行和列交叉的地方称为单元格

# 网格线

网格线（grid line)网格线，水平网格线划分出行，垂直网格线划分出列，正常情况下，n行会有（n+1）根水平网格线，m列，会有（m+1）根垂直网格线

# 容器的属性

display: grid指定一个容器采用网格布局。

除了使用绝对单位，还能使用百分比

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

1
2
3
4
5

# 1. repeat()

有时候写重复的值非常麻烦，尤其多网格时，使用repeat()函数

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

1
2
3
4
5

repeat接受两个参数，第一个是重复的次数，第三个是所要重复的值

重复某种模式也是可以的

grid-template-columns: repeat(2, 100px 20px 80px);

上述代码定义了6列。其中第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

# 2. autofill() 关键字

有时单元格大小是固定的，但是容器大小是不确定的。如果希望每一行容纳尽可能多的单元格，可以使用auto-fill关键字填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

1
2
3
4

# 3. fr关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction意为片段），如果两列的宽度为1fr和2fr，表示后者是前者的两倍

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

1
2
3
4

# 4. minmax()

minmax()函数产生一个长度范围，它接受两个参数，分别表示最大值和最小值

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

代码中的minmax表示宽不小于100，不大于1fr

# 5. auto()

表示由浏览器自己决定长度

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

# 6.网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

1
2
3
4
5

# 7. 布局实例

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

1
2
3
4

# 3. 常用属性

grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

1
2
3
4

如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

提示

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

# 3.1 grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

1
2
3
4
5
6
7
8

# 3.2 grid-auto-flow 属性

这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

# 3.3 justify-items 属性，align-items 属性，place-items 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

# css 性能优化

合并css文件，如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢。
减少css嵌套，最好不要嵌套三层以上。
不要在ID选择器前面进行嵌套，ID本来就是唯一的而且权限值大，嵌套完全是浪费性能。
建立公共样式类，把相同样式提取出来作为公共类使用。
减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？
巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。
拆分出公共css文件，对于比较大的项目可以将大部分页面的公共结构样式提取出来放到单独css文件里，这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
不用css表达式，表达式只是让你的代码显得更加酷炫，但是对性能的浪费可能是超乎你想象的。
少用css rest，可能会觉得重置样式是规范，但是其实其中有很多操作是不必要不友好的，有需求有兴趣，可以选择normolize.css。
cssSprite，合成所有icon图片，用宽高加上background-position的背景图方式显现icon图，这样很实用，减少了http请求。
善后工作，css压缩(在线压缩工具 YUI Compressor)
GZIP压缩，是一种流行的文件压缩算法。
HTML文档结构层次尽量少，最好不深于六层；
脚本尽量后放，放在前即可；
少量首屏样式内联放在标签内；
样式结构层次尽量简单；
在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；
减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；
动画尽量使用在绝对定位或固定定位的元素上；
隐藏在屏幕外，或在页面滚动时，尽量停止动画；
尽量缓存DOM查找，查找器尽量简洁；
涉及多域名的网站，可以开启域名预解析
content-visibility: 一个可以提高渲染性能的css属性

原文连接 (opens new window)

# css3动画加速

css3动画GPU加速 (opens new window)

# css层叠

css层叠原文链接 (opens new window)

# div居中总结

flex(元素已经宽ß度)

display:flex;
justify-content: center;            
align-items: center;

1
2
3

position(元素已知宽度) 父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的一半距离就可以实现
position transform （元素未知宽度）如果元素未知宽度，只需将上面例子中的 margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
position（元素已知宽度）（left，right，top，bottom为0，maigin：auto ）
table-cell 布局实现,父display:table,子display: table-cell;vertical-align: middle;text-align: center;

div居中总结 (opens new window)

# 浮动

文章地址 (opens new window)

# link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

# css常见的选择器

“css常见选择器有：标签选择器、类选择器、id选择器、通配符选择器。优先级为： ID选择器 > 类选择器 > 标签选择器 > 通配符选择器。”

选择器分类 (opens new window)

上次更新: 2025/04/07, 01:42:58

← 微前端总结地图标绘--射线法来计算点在多边形内→