弹性盒模型解析 一、什么是弹性盒模型 {代码…} 二、布局的默认方式 {代码…} 三、弹性盒模型的特点 {代码…} 四、语法与取值(主轴) {代码…} 五、换行方式(交叉轴 辅轴) {代码…} 总结: {代码…} 六、(justify-centent)主轴的布方案 {代码…} 七、交叉轴的布局方案

直接设置border:1px solid #ccc;在手机下看会比设计稿粗，浏览器边框的最小的显示像素是1px,设置0.5px也是会渲染成1px的效果，而在css的1px根据手机的品牌或型号不同在高清屏的物理像素是2像素或者3像素

grid-template-columns 设置的是元素有列,每列的宽度是多少. 单位可以用fr(fraction, 按比例分配宽度), px固定宽度, % 百分比宽度.grid-template-columns: 100px 100px 100px,定义网格内 共3竖每竖宽度100px. 当然这里会发现如果有10竖的话那不得敲一堆100px???这里为了省事我们可以用repeat(3,100px)重复3次,每个都是10…

分享一下这两天搞 sass 的学习成果。 直接点击下图，可观看视频教程 本文主要分为三个部分，分别是 环境 语法 实践 环境 安装 sass 工具， 很简单，参考官方文档 链接在这里 [链接] 主要介绍一下开发环境。以 VSCODE 为例， 我安装了这样几个插件分别是： sass,提供 sass 语法高亮 sass live compile 自动生成 css 插件…

老生长谈的问题了, 但也是决定性的问题,如下图:对于不用兼容ie浏览器的工程可以玩起来了, grid也不算新技术了, 技术的发展需要coder的推动, 有时候问问自己不用grid的原罪是不是’懒得学’哈哈哈哈, 我查了一下 chrome 57版本是 2017.3月发布的 . ie使用display: -ms-grid的写法也可以有效, 但是网上看到很多同学遇到了未…

写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。元素的结构大致如下：

现象 在实现Loading组件的时候，不知道大家有没有遇到下面的问题： 首先看看正常的情况： 如果试着在这个Loading组件下面的图片加上样式position: relative; z-index: 1，就会出现下面的情况： 这里的Loading组件是使用opacity以及transition去实现的（参考了Taro的实现），上述实现的具体代码可以从这里查看； Loading…

可以使用-webkit-text-stroke描边文字和非描边文字相互重叠覆盖的方法模拟。技巧就在于-webkit-text-stroke描边文字的描边宽度要是要实现的外描边效果宽度的2倍。

CSS部分 盒子边倾斜 clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); 禁止点击事件/鼠标事件“穿透” {代码…} 用来控制元素在移动设备上使用滚动回弹效果 {代码…} 可解决在IOS中使用overflow:auto 形成的滚动条，滚动不流畅的情况 文字渐变效果 {代码…} css三角形 {代码…} JS部分 JavaScript中检测数组的…

Flex兼容性写法 父级元素写法 {代码…} 子元素 {代码…} 1、水平垂直居中样式 {代码…} 左边固定宽度，右边占满宽度 {代码…} 基本网格布局 {代码…} 顶部固定高度，底部占满剩余高度 {代码…} 顶部、底部固定高度，中间占据剩余高度，siderBar固定宽度，center占据剩余宽度 {代码…}