CSS如何实现固定宽高比 一、元素尺寸已知，直接写宽高 二、尺寸未知，可替换元素（img、video等），指定宽度或者高度，另一个自动计算。 <div class="wrapper"> <img src="./picture" alt=""></div>.wrap{ width: 50vw;}img ...
分类：
其他好文 时间：
2020-02-25 23:17:40
阅读次数：
86
理解: 是相对于Html中font-size字体大小的单位 比如font-size的大小为15px ,那么1rem = 15px 应用： 主要是被应用到对不同分辨率的屏幕的适配上，即不同大小的屏幕上显示合适大小的字体和宽高度等 那么，应该如何适配不同分辨率的手机呢？ 适配方式： 媒体查询 媒体查询+ ...
分类：
其他好文 时间：
2020-02-25 20:16:14
阅读次数：
65
目录： 1.立方体2.动画3.设置动画的一些属性4.案例：无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例：伸缩盒子的flex属性的应用案例（菜单个数不限）10.伸缩盒子的align-items属性 设置侧轴对齐方式11.案例：伸缩盒子，宽高自适应 1、立方体 *transform ...
分类：
Web程序 时间：
2020-02-24 10:00:12
阅读次数：
71
在CSS3中盒模型分为两种： 一种就是我们所熟知的标准盒模型 而另一种就是所谓的怪异盒模型或者IE盒模型 由上图我们可以知道 在标准盒模型中width和height指的是盒子内容的宽高，而在怪异盒模型中wdith还包含了border和margin区域 通过在文档首部添加doctype申明，即表明使用 ...
分类：
其他好文 时间：
2020-02-23 16:33:35
阅读次数：
96
Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。 但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。 就像下面这样 <html> <head> <meta charse ...
分类：
其他好文 时间：
2020-02-23 14:48:45
阅读次数：
54
创建一个canvas HTML 创建canvas元素 设置宽高使用标签width，height属性，注意不能使用css或style样式 display默认为inline JavaScript 获取canvas 除了通过上面HTML属性设置canvas宽高之外，当然也可以用javascript来设置 ...
分类：
其他好文 时间：
2020-02-22 17:23:11
阅读次数：
51
一. Css吃豆人动画 1. 上半圆：两个div，内部一个圆div，外部设置宽高截取半圆 外部div动画：animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite(动画无限播放) 动画样式：@keyframes：设置50%转45度，100%转0度 transfor ...
分类：
Web程序 时间：
2020-02-22 15:35:29
阅读次数：
93
PC端宽高自适应： 宽度设置：不设置宽度或设置width：100%；（显示状态：块状元素跟随父元素宽度变化） 高度设置：1 - 不设置高度或设置height：auto；（显示状态：高度被内容撑开。弊端：内容较少时网页高度偏小） 2 - 设置最小高度：min-height：；（显示状态：当内容超出最小 ...
分类：
其他好文 时间：
2020-02-22 13:51:12
阅读次数：
63
1.CSS盒模型 盒模型，顾名思义就是一个盒子。生活中的盒子，有长宽高，盒子本身也有厚度，可以用来装东西。页面上的盒模型我们可以理解为，从盒子顶部俯视所得的一个平面图，盒子里装的东西，相当于盒模型的内容（content）；东西与盒子之间的空隙，理解为盒模型的内边距（padding）；盒子本身的厚度， ...
分类：
Web程序 时间：
2020-02-22 09:30:54
阅读次数：
54
一、AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比。 AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。如果在 ...
分类：
Web程序 时间：
2020-02-20 15:31:16
阅读次数：
87
