destiny'Note

前言由于移动设备的增多，携带便利，人们在移动设备上浏览网页的时间不断增加，甚至要超过PC端。但是PC端的网页放到移动端，就会出现各种问题，如字体太小、图片不清晰等。浏览体验变得很差。于是，就有了响应式网页的诞生。在多种设备的不同尺寸的屏幕上，精巧设计和制作出最佳视觉体验的网页。下面，就跟大家分享一下如何做一个响应式的网页。我学习响应式时做的网页：理财网站一、如何做响应式网页元

文字与行高对照上图    1. 文字大小是顶线与底线之间的距离    2. 行高大小是基线与基线之间的距离    3. 行高=文字大小+上下两个间距浏览器默认     浏览器默认的文字大小为16px，其中chrome浏览器有最小文字限制，最小为12px     默认的行高大小为18px行高的单位技巧：文本的垂直居中当文本的父容器设置行高与高度一致、或者父容器不设置高度，只设置行高时，能够使父容

原文转自：张鑫旭-鑫空间-鑫生活本文地址：去除inline-block元素间间距的N种方法一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： 间距就来了~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-

前言在重新学习css，做自己的学习demo时，设置一堆div在一行显示，呈现对比。结果如图，设置了display:inline-block之后，出现了部分下沉现象。改为float之后，又恢复正常对齐。不过，很快就得到了解决。于是，就写了这篇关于inline-block问题的文章，包含了以前分享过的间距问题，在这里与大家分享。一、下沉问题原因1. 行内元素有一个基线，所有在这一

前言重新学习CSS后的第三天，学习制作阴影的过程中，发现的问题：设置了box-shadow后展现的阴影：添加transform:rotate(10deg);后的效果：查看CodePen例子：阴影效果一脸懵逼！再修改z-index完全没有效果。百度之后，找到了问题的答案，也自己摸索着找到了这个问题的解决办法。下面与大家分享。一、原因给元素设置transform属性会

引自：张鑫旭的博客本文地址：http://www.zhangxinxu.com/wordpress/?p=5115前言原文是在前面对transform引起的z-index“失效”探究过程中找到的，非常棒，所以转载分享。本文大多摘自原文，进行了压缩，也加入了我自己的理解，希望对大家有帮助。默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生。

前言本文引自阮一峰的网络日志：Flex 布局教程：语法篇阮一峰老师的文章确实很棒，在他的博客学到了很多的知识，通俗易懂。讲讲布局，传统的布局，是基于盒子模型，依赖 display + position + float属性。它对于特殊的布局非常不方便，如：垂直居中。Flex布局是W3C在2009年提出的新方案，可以简便、完整、响应式地实现各种页面布局。已经得到所有浏览器的支持。是未

前言元素的水平及垂直居中是在写CSS样式中最常遇到的问题之一。相信会CSS的同学肯定都有自己的解决方法，但是并不一定都能熟练运用，并且知道其中原理。下面，我就将自己总结的实现方法分享给大家。ps：重点是第四，疑惑在第三，第一、第二也较常用为本文制作的demo：元素居中显示一、单行文本这里的单行文本不仅是指单行显示的文本以及行内元素（设置了display: inline;的也是行内元

前言在介绍之前，请大家先弄清楚下面的问题：什么是 sasssass 是 css 的预处理器（css preprocessor）为什么使用 sass1、 它能够帮我们更快更高效的编写更好维护的 css 。2、 它自带很多原生 css 没有的功能，如变量（现在 css 中已经实现）、条件语句等如何使用sass1、 安装 sass ：ruby环境、sass编译2、 sass的语法

一、像素的概念px ：逻辑像素 ，浏览器使用的抽象单位dp、pt：物理像素dpr：设备像素缩放比ppi：屏幕每英寸的像素数量，即单位英寸内的像素密度ppi120160240320dpr0.751.01.52.0ppi 越高，像素数越高，图像越清晰。Retina屏即高清屏，dpr 大于等于 2。二、viewportweb初期，

前言重拾css后的文章，在观看了慕课网上的视频《重拾CSS的乐趣》中，看到了一些有意思的css效果。想起当初自己初学CSS3时画的哆啦A梦，总结了一番css制作的各种图形。渐变效果是在实现弧边三角的时候学习的。分享一下CodePen中的代码效果：弧形demo三角形demo多重边框demo一、渐变简介渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这