媒体查询Media Queries详解
摘要：@media 标签可以说是响应式网页的开发基础。其主要由媒体类型（Media Type）和 媒体特性（Media Query）两部分组成。 Media Type 设定后面规则生效的展示类型，包括all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）等等 Media Query 设
阅读全文
posted @ 2017-08-15 16:42
随笔分类 - HTML/CSS
getComputedStyle方法获取元素CSS值
摘要：javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要用getComputedStyle 1、getComputedStyle是？ getComputedStyle是
阅读全文
posted @ 2017-08-11 17:26
移动端 Retina屏border实现0.5px
摘要：首先来看一下造成Retina边框变粗的原因 其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：
阅读全文
posted @ 2017-08-11 13:24
一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性
摘要：如果一个DOM元素包含多个类名，其中的两个类名的属性产生冲突，并不是根据html中类名的顺序来决定DOM元素的属性， 而是根据css样式中的顺序来决定DOM元素的属性，它取决于css样式表中后读取到的属性。 例如： html <div class="function hidden show"></d
阅读全文
posted @ 2017-07-04 17:23
移动端APP CSS Reset及注意事项CSS重置
摘要：@charset "utf-8"; * { -webkit-box-sizing: border-box; box-sizing: border-box; } //禁止文本缩放 字体设置 取消touch高亮效果 html { width: 100%; height: 100%; margin: 0p
阅读全文
posted @ 2017-06-22 18:06
PC端和移动APP端CSS样式初始化
摘要：CSS样式初始化分为PC端和移动APP端 1.PC端：使用Normalize.css Normalize.css是一种CSS reset的替代方案。 我们创造normalize.css有下面这几个目的： 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式：为大部分HTML元素提供 修复浏览器自
阅读全文
posted @ 2017-05-09 15:01
CSS选择器渲染效率
摘要：1 浏览器如何识别你的选择器 首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素，达到美化页面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句
阅读全文
posted @ 2017-04-19 14:19
去除inline-block元素间间距
摘要：根本原因：inline-block元素之间之所以有空白间距是因为空格有字体大小原因。 第一种： 把代码之间的换行空白都去掉。 例如： <div>第一个inline-block元素</div><div>第二个inline-block元素</div> 第二种： 把inline-block元素用一个大的d
阅读全文
posted @ 2016-12-09 09:52
关于调整input里面的输入光标大小
摘要：input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中， 在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高， chrome下光标跟input的height一样高，
阅读全文
posted @ 2016-09-08 16:40
Google Material Design的图标字体使用教程
摘要：使用教程 1. 打开Material icons下载页 2. 选择要下载的图标 （目前不能多选>_<） 3.选择要下载的格式即可 图标字体使用教程 【方法一】 STEP 1: 引入字体文件和样式文件，下面这个是直接引用google的字体托管文件，如果国内使用建议不要用托管的，会访问慢，把字体下载到自
阅读全文
posted @ 2016-07-29 16:02
移动端弹性效果
摘要：布局一： 定义页面整体高度为100%，然后使用 position:absolute 布局可解决 <body> <div class="wrap"> <div class="header">header</div> <div class="main"> 弹性滚动区域 </div> <div class
阅读全文
posted @ 2016-07-07 16:27
div根据内容改变大小并且左右居中
摘要：div{ display:inline-block; width:auto; } 这个div的父元素text-align:center;
阅读全文
posted @ 2016-06-12 17:22
Flex布局教程及属性速查
摘要：一、Flex布局介绍 伸缩盒模型（flexbox）是一个新的盒子模型，意为"弹性布局"，用来为盒状模型提供最大的灵活性，主要优化了UI布局。Flexbox的功能主要包手：简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些
阅读全文
posted @ 2016-05-27 11:22
常用Meta整理
摘要：标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web 服务。 ——W3School 必要属性 可选属性 通用： <meta charset="utf-8"> 设置页面编码为UTF8，防止乱码，需
阅读全文
posted @ 2016-05-13 14:46
CSS中单位px和em,rem的区别
摘要：PX特点： 1 IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏
阅读全文
posted @ 2016-05-05 15:25
父元素与子元素之间的margin-top问题
摘要：父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： <div class="box1"> <div class="box2"></div> </div> css样式： .
阅读全文
posted @ 2016-05-05 14:31
CSS垂直居中精华总结
摘要：1 table-cell方式 将center元素的包含框display设置为table，center元素的display设置为table-cell，vertical-align设置为middle。 原理：利用表布局特点，vertical-align设置为middle后，单元格中内容中间与所在行中间对
阅读全文
posted @ 2016-04-29 14:13
Font Awesome使用指南
摘要：Font Awesome介绍 Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识，现在FontAwesome不仅仅可以在bt上使用，还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标，字体图标主要是支持自适应、可以使用字体的各种特性（比如
阅读全文
posted @ 2016-04-25 17:00
邮件页面为何只能Table写及注意事项
摘要：编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听 属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。 一
阅读全文
posted @ 2016-04-20 17:46
