weixin_43927457的博客

需求:宽高同时适配; rem与em的异同点 相同：都是相对单位，都是相对字体大小 不同： 相对参考不一样 em:参考元素自身字体大小 rem:参考html元素字体 一般开发中html的字体大小只是为了修改rem的参考值，不会对网页原有字体产生影响 因为网页的字体一般设置body的font-size rem：相对单位，相对html字体大小 1.如果使用rem，一般要设置html字体大小 2....

1. transition过渡动画 第一个值：需要过渡的属性 一般为all 第二个值：动画时间，一定要设置 第三个值：动画速度曲线，一般liner(匀速) 第四个值：延迟，一般不设置` transition-property: all; transition-duration: 1s; transition-timing-function: lin...

1.伸缩布局(t弹性布局)： 本质就是给盒子加buff，专治不服：百分比+浮动实现比较麻烦的需求 如何使用： 设置盒子display 为flex 2.伸缩布局三要素 子元素：住户 主轴：住户排列方式（默认水平） 次轴：阳台方向 /* 伸缩盒子(弹性布局) */ display: flex; 1.主轴方向：元素排列方式 主轴与次轴一定是垂直的，如果你把主轴方向变成垂直，次轴方向自动变成水平 注意点：...

视口：css布局的大小 name=viewport 视口 content：视口内容 width=device-width ： 让布局大小和当前手机屏幕一致 initial-scale=1.0 ： 网页默认缩放比例 1.0 不缩放 user-scalable=no: 不允许用户缩放 <meta name="viewport" content="width=device-width, init...

移动端布局核心 1.水平方向不能出现滚动条(禁止缩放，元素宽度超过视口的宽度) 2.需要适配宽度，高度使用固定值（高度允许出现滚动条） 百分比布局（流式布局）：宽度使用百分比，高度使用px 3.移动端盒子模型使用内减模型： box-sizing: border-box; * 避免由于border和padding导致的水平滚动条的问题 盒子模型 = content + padding + bord...