随笔分类 - CSS
摘要：移动端布局痛点在：兼容各个分辨率的移动设备，同样是手机，iPhone4-iPhoneX分辨率范围就已经很广；如果使用px进行布局，显然会出现问题； 常见的像素单位px,em,rem中，em是相对于父元素font-size的单位，个人认为在使用中，em会比较混乱；rem相对的是根元素、HTML，便于根
阅读全文
摘要：这里涉及css样式加载顺序、覆盖规则，以及优先级提升问题； 1. css样式加载顺序 结果： 这两个<div>字体显示的都是green；<p>显示的是yellow； 原因如下： 样式的加载顺序是 a.css > <style> > c.css；这个加载顺序很重要，因为涉及到覆盖规则； 选择器的优先级
阅读全文
摘要：css3新增flexbox布局的同时，也增加了grid布局； flex是一维布局，grid是二维布局；从长远来看，两者将结合，体现出强大功能； 参考： [1] flex&grid&圣杯布局
阅读全文
摘要：flex 弹性布局 是种灵活的布局方案；能够实现响应式布局；在移动端使用频繁； 1.css布局的发展 关于布局，以下为CSS布局的发展路线： 1. table表格布局 样式简单，只能适用简单的界面 2. position布局，能够实现很多复杂界面，但是仍存在元素垂直居中、响应式布局等问题 3. fl
阅读全文
摘要：移动端适配方案有很多，基本都是成型的解决方案；如下是常用的方案： 1 简单一点的页面，一般高度直接设置成固定值，宽度一般撑满整个屏幕 2 稍复杂一些的是利用百分比设置元素的大小来进行适配，或者利用flex等css去设置一些需要定制的宽度 3 再复杂一些的响应式页面，需要利用css3的media qu
阅读全文
摘要：这是个基础的问题，我们在普通文本流中布局时常常发生外边距合并的情况；有时不太注意就会造成页面的怪异表现，因此要掌握外边距margin叠加合并的知识点； 外边距合并指的是：当两个垂直的外边距相遇时，它们将形成一个外边距；合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者； 当一个元素出现在另
阅读全文
摘要：雪碧图是优化网站性能的一个重要手段； 开发中，我们常常遇到这样的问题：一大堆的小icon图标，比如个性化的箭头、按钮等；当加载网页时，则要一个个地加载这些小图标，每一个小图标都需要http请求，这增加了网络延迟的可能； 假设把这些小图标都放到一张图片中，使用的时候直接获取图片对应位置上的图标，那么网
阅读全文
摘要：目前主流css预编译语言有sass，less，stylus等，个人由于最先接触less，所以对此比较有认同感～～～ less是一门CSS预处理语言，增加了变量，Mixin，函数等特性，使得CSS更加方便维护，开发；less可以运行在Node或者浏览器，但最终都是将.less文件转换成.css文件，因
阅读全文
摘要：Base64是一种用64个字符来表示任意二进制数据的方法； 在网络中，base64编码后的文件可以通过http协议传输，因此我们常看到base64编码后的图片；比如： 这种图片加载方式，就是我们经常看到的经过base64编码后的图片文件； 如何将图片进行base64编码？ 现在有很多在线工具，方便前
阅读全文
浙公网安备 33010602011771号