1.布局,一般情况下大屏都是恰好铺满整个屏幕,当我们f11切换全屏时候经常会导致空出一节或者有部分内容超出屏幕,导致观赏效果不佳。这时候我们只需要用100vh设置一个总容器再利用flex布局填充总容器就可以确保任何情况都是铺满全屏。 2.大屏资源实例:https://gitee.com/lvyeyo ...
分类:
其他好文 时间:
2020-05-05 10:35:49
阅读次数:
130
1、为什么使用typeScript? typeScript是JavaScript的超集 typeScript在编译期间就可以将错误抛出 增强代码的可阅读性和可维护性 2、案例的功能逻辑 切换职业 选择服务区域 选择服务品种 选择服务承诺 3、使用命令创建react Native的typescript ...
分类:
其他好文 时间:
2020-05-05 10:31:48
阅读次数:
144
1.通过flex布局 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css垂直水平居中</title> 6 <style> 7 html, body { 8 margin: 0; 9 p ...
分类:
Web程序 时间:
2020-05-04 15:17:21
阅读次数:
61
梳理下平时常用css水平垂直居中方式~ 使用flex布局 HTML CSS 利用flex的 垂直居中, 水平居中 利用相对定位和绝对定位的 HTML CSS 相对定位下,使用绝对定位将上下左右都设置为0,再设置 即可实现居中 利用相对定位和绝对定位,再加上外边距和平移的配合 HTML CSS 相对定 ...
分类:
Web程序 时间:
2020-05-04 13:23:36
阅读次数:
77
对比一下常用的三种布局: 1.传统布局方式:利用position属性+display属性+float属性,兼容性最好,但是效率低,麻烦 2.flex布局:效率高,学习成本低,兼容性强 3.grid:翻译网格,grid布局相对于flex布局稍微复杂那么一点点,但grid布局比flex布局更强大。 有一 ...
分类:
其他好文 时间:
2020-05-02 21:00:42
阅读次数:
92
案例基础布局 html <ul class="box"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> css .box{ display: -web ...
分类:
其他好文 时间:
2020-05-02 13:25:00
阅读次数:
55
弹性盒子 使用弹性布局,首先要将父盒子定义为弹性盒子。 display: flex display: inline flex 行级弹性盒子,类似inline block 弹性元素 弹性盒子内的元素称为”弹性元素“。 弹性布局实际上就是要对弹性元素的排列做各种设置。 排列方向 flex directi ...
分类:
Web程序 时间:
2020-05-02 12:17:44
阅读次数:
86
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, ...
分类:
其他好文 时间:
2020-05-01 20:54:41
阅读次数:
68
flex中align-self给指定的iitem(子元素)设置对齐方式 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
分类:
其他好文 时间:
2020-05-01 20:47:21
阅读次数:
72
代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .f{display:flex;} .f1{flex:1;} .ac{align-items:center;} .w50px{width:50px;} .w100{wi ...
分类:
其他好文 时间:
2020-05-01 14:47:10
阅读次数:
66