<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ perspective: 1000; perspective-origin: 0,0; /*translateZ() 于此连用*/ } ...
分类：
Web程序 时间：
2020-07-27 17:46:48
阅读次数：
96
1.grid布局实现（一） .father{ display:grid; align-item:center; justify-items:center; } 2.grid布局实现（二） .father{ display:grid; align-item:center; justify-conten ...
分类：
Web程序 时间：
2020-07-10 13:11:05
阅读次数：
90
0.引言 在我们编写css的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的css代码加以实现（absolute+transform思路）： .wrap { ...
分类：
Web程序 时间：
2020-07-07 00:40:28
阅读次数：
200
目录 水平居中 行内元素 块级元素 方案一：(分宽度定不定两种情况) 方案二：使用定位属性 方案三：使用flexbox布局实现（宽度定不定都可以） 垂直居中 单行的行内元素 多行的行内元素 块级元素 水平垂直居中 已知高度和宽度的元素 未知高度和宽度的元素 方案一：使用定位属性 方案二：使用flex ...
分类：
Web程序 时间：
2020-07-05 23:12:37
阅读次数：
99
目录盒模型如何实现一个最大的正方形一行水平居中，多行居左水平垂直居中如何实现左右等高布局画三角形link @import导入cssBFC理解 回到顶部盒模型 复制/* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: ...
分类：
Web程序 时间：
2020-07-02 16:50:41
阅读次数：
84
当 display: flex 配合 justify-content: center 使用时可以让view水平居中 而配合 align-items: center 用时可以实现垂直居中效果 .card-image-container{ width: 40%; height: 90%; align-i ...
分类：
微信 时间：
2020-06-30 10:35:20
阅读次数：
123
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
分类：
其他好文 时间：
2020-06-20 16:16:38
阅读次数：
54
平时写CSS样式不注意总结，用的时候写是会写但具体应用场景和组合方式一不小心就混淆，导致效率不高，还要借助文档，本文针对CSS常用样式水平垂直居中解决方案进行总结，也便于自己以后复习，好记性不如烂笔头。针对BFC，主要需要了解其触发条件，具体深入理解及使用还需要联系实际应用。 首先通过一个思维导图更 ...
分类：
Web程序 时间：
2020-06-20 00:47:40
阅读次数：
87
网上摘录常用css片段 垂直水平居中 /*绝对定位 ＋ 未知宽高 ＋ translate*/ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /*flex 轻松搞定水平垂直居中(未知宽高*/ dis ...
分类：
Web程序 时间：
2020-06-14 23:22:57
阅读次数：
85
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .container { text-align: center; height: 300px; border: 1px solid rebec ...
分类：
其他好文 时间：
2020-06-10 21:15:57
阅读次数：
57
