移动端
文章平均质量分 58
未来aaa
这个作者很懒,什么都没留下…
展开
-
Grid布局--移动端
Grid布局---网格布局是一种二维布局:水平方向和垂直方向同时存在。grid布局可以很快的写出这种布局样式,不需要浮动定位套div。无需拆分左右,上下。概念容器container:采用网格布局的区域项目item:容器中采用网格定位的子元素行row:容器中水平区域列column:容器中垂直区域单元格cell: m行 n列 m*n个单元格网格线gril line:划分网格的线 水平网格线:行 垂直网格线:列正常...原创 2021-12-05 11:47:19 · 877 阅读 · 0 评论 -
前端css盒子绝对居中
固定宽高1,margin负间距+绝对定位定位2,transform:translate()+绝对定位3,绝对定位4,flex布局5,fixed固定定位宽高不确定的盒子绝对居中首先我给大家罗列出来的几种可能性,用到的都是同一种方法。外面的盒子是有宽高的里面的盒子不需要设置宽高。top和bottom取值百分比要相同,left和right的取值百分比要相同。小盒子的大小和形状和百分比有关,也和大盒子的宽高有关。...原创 2021-12-03 16:31:54 · 192 阅读 · 0 评论 -
flex弹性盒子布局问题,细节处理,jusitify-content属性
jusitify-content:弹性子元素在主轴方向的对齐方式该属性有一个属性值是:space-between,在两者之间分配相同的距离如果子元素是2的倍数关系:即有8,12,16等个数的子元素,这种情况下该属性是非常好用的。那如果子元素个数不是2的倍数关系呢,该属性就无法准确分配空白空间了。那这种情况应该怎么办呢可以尝试使用margin-right属性。给子元素加上margin-right:1%,就可以得到这种效果了。亲测有效。该方法对奇偶数都好用。...原创 2021-12-03 11:57:02 · 507 阅读 · 0 评论 -
移动端响应式布局--媒体查询
概念:一个网站适配所有终端,实现不同屏幕分辨率下的终端网页的不同布局,使用媒体查询针对不同设备宽度进行布局设置。优点:一站适配所有终端,减少工作量,缩短开发周期。对搜索引擎友好,在每个设备中都能得到较好的展示。缺点:对老版本浏览器兼容性不好,兼容各个设备工作量大。效率较低,加载更多的样式文件和脚本文件。设计比较难以精确,是一种折中性的设计方案,维护困难。技术:弹性布局,图片,CSS,media, query等页面的设计和开发需要根据用户的行为、设备环境进行相应的调整。通过媒体查询检测不同原创 2021-12-02 21:43:49 · 1486 阅读 · 0 评论