flex 布局是一维布局Grid 布局是二维布局flex 布局一次只能处理一个维度上的元素布局，一行或者一列Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格。Grid基础display：grid 或 display：inline-grid 来创建一个网格容器grid-template-columns 和 grid-template-rows …
最新内容
网页布局神器flex，帮你实现完美的布局，适应任何分辨率的屏幕经常有这样的需求，一般首页有三部分组成：头部导航、中间内容区域、底部公司信息，希望这三部分刚才充满屏幕，不多不少，传统的布局是使用百分比，如20%、60%，70%，但是百分比不能很好地适应分辨率，比如pc屏幕高度为1200px、笔记本的屏幕高度900px，那么使用百分比的话，头部20%在两个设备的 …
Grid 布局是什么？Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址Grid 布局和 flex 布局讲到布局，我们就会想到 flex 布局， …
我是路程lucky，6年web前端开发经验，目前参与的项目技术栈主要是React，欢迎关注~今天给大家分享一下解决一个遇到的样式布局问题经历，“标签宽度自适应，间距固定，每行指定个数”，看似简单，但新手朋友如果不注意很容易踩坑，下面我们就来逐步分析解决这个css布局小问题。场景描述工作中遇到这样一个需求场景：由于视觉设计师的视觉审美要求下，h5页面中，查询的 …
1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;*{margin:0; padding:0}●建议的的解决办法：不要去 …
前端开发经常会遇到三角形的装饰，今天我们来用css实现。还是一样先上全代码，在逐步解析。全代码展示<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" ><meta http-equiv="X-UA-C …
最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。单列布局单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。单列布局一般有两种形式：(图片来源：https:blog.csdn.netAce_Armarticledeta …
本文最初发布于 jesuisundev.com 网站，经原作者授权由 InfoQ 中文站翻译并分享。你连 HTTP2 都还没搞明白，就有人开始谈 HTTP3 了，真让人火大。但 HTTP3 会受到关注也是有理由的：它速度很快。很久以前谈未来之前，咱们先讲讲现实。你了解 HTTP 吗？这个定义于 1991 年的协议是用来管理 Web 的。它的全名是超文本传输? …
CSS奇思妙想 -- 使用 background 创造各种美妙的背景（下篇）...使用 mask除去混合模式，与背景相关的，还有一个非常有意思的属性 -- MASK。mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。对 mask 的一些基础用法还不太熟悉的，可以先看看我的这篇 …
做UI时往往需要使用背景透明的图片。下面是简单轻量的方法，使用PNG格式。Windows画图+InfranView。InfranView保存时可选择哪个颜色透明。LinuxDrawing比画图的功能略强一点——还是不重。apt install drawing安装。看界面也直接支持透明背景，但似乎需要绕一下(不会用)：编辑已有的背景透明的PNG，擦除拉伸另存。 …