摘要：
适用于分步骤操作的页面导航图 实现结果如下 上图对应下述代码，稍作修改可以生成下图。css代码如下： @charset "UTF-8"; /**单列宽度 单行高度 列数 行数*/ body { font-size: 12px; color: #000000; font-family: "Micros 阅读全文
摘要：
居中 水平居中 对于子元素是行内元素(或者inline-block)时使用text-aling: center; ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。 <style> .box { border:1px solid #aaa; text-align: center; /* te 阅读全文
摘要：
原文地址：https://css-tricks.com/css-mo...最近我对CSS Modules比较好奇。如果你曾经听说过他们，那么这篇博客正适合你。我们将去探索它的目的和主旨。如果你同样很好奇，敬请关注，在下一篇博文中我们将介绍如何使用CSS Modules。如果你想亲自尝试并且掌握如何使 阅读全文
摘要：
在一些网站上经常可以看到改造过的按钮选项比如这样 由于之前一直在B端企业，样式差不多就Ok了所以也没去研究。昨天刷百度前端学院的时候遇到一个题就是改造checkbox radio样式的，大概研究一番 最常见的自定义按钮样式，其实是用label模拟的,关于label可以在mdn进行查阅 label的f 阅读全文
摘要：
div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定，跟这个字体大小没有关系(不同字体相同字体大小，会影响div的高度。)如过明确告诉浏览器行高，div高度就是行高。 文字两端对齐： 文字两端对齐只有中文才有，英文是不需要用两端对齐的。 块级元素：text-align: justify 阅读全文
摘要：
技术 CSS 前端布局推进剂 - 间距规范化 利用CSS变量实现令人震惊的悬浮效果 Flexbox 很棒，但有些情况不适用 CSS布局说——可能是最全的 【图片版】学习CSS网格布局 使用CSS Grid的九大误区 图解CSS Flexbox布局 CSS Grid 布局揭秘 JS ECMAScrip 阅读全文
摘要：
在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title 阅读全文
摘要：
一、什么是BFC 具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。 总之，BFC就是一种属性，这种属性会影 阅读全文
摘要：
基础篇中主要介绍了一些sass的基本特性，进阶篇中，主要是写一些我们常用的sass控制命令，函数和规则。 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等，熟悉JS条件语句和循环的朋友会比较了解这些控制命令的功能所在，这些控制命令是 sass 的一个重要组成部分。 阅读全文
摘要：
IPhoneX全面屏是十分科技化的，但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配，没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试。 设计和尺寸相关 IPone型号 屏幕尺寸 屏幕密度 开发尺寸 像素密度 倍图 4系列 3.5英寸 3 阅读全文