HTML/CSS - 随笔分类(第3页) - ranyonsue

媒体查询Media Queries详解

摘要：@media 标签可以说是响应式网页的开发基础。其主要由媒体类型（Media Type）和媒体特性（Media Query）两部分组成。 Media Type 设定后面规则生效的展示类型，包括all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）等等 Media Query 设阅读全文

posted @ 2017-08-15 16:42 ranyonsue 阅读(1001) 评论(0) 推荐(0)

getComputedStyle方法获取元素CSS值

摘要：javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要用getComputedStyle 1、getComputedStyle是？ getComputedStyle是阅读全文

posted @ 2017-08-11 17:26 ranyonsue 阅读(494) 评论(0) 推荐(0)

移动端 Retina屏border实现0.5px

摘要：首先来看一下造成Retina边框变粗的原因其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。 devicePixelRatio的官方的定义为：阅读全文

posted @ 2017-08-11 13:24 ranyonsue 阅读(1089) 评论(0) 推荐(0)

一个DOM元素同时拥有多个类名时的样式产生冲突时属性取决于css样式表中后读取到的属性

摘要：如果一个DOM元素包含多个类名，其中的两个类名的属性产生冲突，并不是根据html中类名的顺序来决定DOM元素的属性，而是根据css样式中的顺序来决定DOM元素的属性，它取决于css样式表中后读取到的属性。例如： html <div class="function hidden show"></d 阅读全文

posted @ 2017-07-04 17:23 ranyonsue 阅读(2187) 评论(0) 推荐(1)

移动端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 ranyonsue 阅读(5338) 评论(0) 推荐(0)

PC端和移动APP端CSS样式初始化

摘要：CSS样式初始化分为PC端和移动APP端 1.PC端：使用Normalize.css Normalize.css是一种CSS reset的替代方案。我们创造normalize.css有下面这几个目的：保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：为大部分HTML元素提供修复浏览器自阅读全文

posted @ 2017-05-09 15:01 ranyonsue 阅读(2148) 评论(0) 推荐(1)

CSS选择器渲染效率

摘要：1 浏览器如何识别你的选择器首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素，达到美化页面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句阅读全文

posted @ 2017-04-19 14:19 ranyonsue 阅读(1077) 评论(0) 推荐(0)

去除inline-block元素间间距

摘要：根本原因：inline-block元素之间之所以有空白间距是因为空格有字体大小原因。第一种：把代码之间的换行空白都去掉。例如： <div>第一个inline-block元素</div><div>第二个inline-block元素</div> 第二种：把inline-block元素用一个大的d 阅读全文

posted @ 2016-12-09 09:52 ranyonsue 阅读(353) 评论(0) 推荐(0)

关于调整input里面的输入光标大小

摘要：input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，在FF下出现的情况是：点击input时，输入光标其实上跟input的height一样高，但当开始输入文字时，光标又变得跟文字一样高， chrome下光标跟input的height一样高，阅读全文

posted @ 2016-09-08 16:40 ranyonsue 阅读(7421) 评论(0) 推荐(0)

Google Material Design的图标字体使用教程

摘要：使用教程 1. 打开Material icons下载页 2. 选择要下载的图标（目前不能多选>_<） 3.选择要下载的格式即可图标字体使用教程【方法一】 STEP 1: 引入字体文件和样式文件，下面这个是直接引用google的字体托管文件，如果国内使用建议不要用托管的，会访问慢，把字体下载到自阅读全文

posted @ 2016-07-29 16:02 ranyonsue 阅读(2614) 评论(0) 推荐(0)

移动端弹性效果

摘要：布局一：定义页面整体高度为100%，然后使用 position:absolute 布局可解决 <body> <div class="wrap"> <div class="header">header</div> <div class="main"> 弹性滚动区域 </div> <div class 阅读全文

posted @ 2016-07-07 16:27 ranyonsue 阅读(2016) 评论(0) 推荐(0)

div根据内容改变大小并且左右居中

摘要：div{ display:inline-block; width:auto; } 这个div的父元素text-align:center; 阅读全文

posted @ 2016-06-12 17:22 ranyonsue 阅读(471) 评论(0) 推荐(0)

Flex布局教程及属性速查

摘要：一、Flex布局介绍伸缩盒模型（flexbox）是一个新的盒子模型，意为"弹性布局"，用来为盒状模型提供最大的灵活性，主要优化了UI布局。Flexbox的功能主要包手：简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些阅读全文

posted @ 2016-05-27 11:22 ranyonsue 阅读(2290) 评论(0) 推荐(1)

常用Meta整理

摘要：标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web 服务。 ——W3School 必要属性可选属性通用： <meta charset="utf-8"> 设置页面编码为UTF8，防止乱码，需阅读全文

posted @ 2016-05-13 14:46 ranyonsue 阅读(269) 评论(0) 推荐(0)

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 ranyonsue 阅读(339) 评论(0) 推荐(0)

父元素与子元素之间的margin-top问题

摘要：父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 html代码： <div class="box1"> <div class="box2"></div> </div> css样式： . 阅读全文

posted @ 2016-05-05 14:31 ranyonsue 阅读(7607) 评论(0) 推荐(3)

CSS垂直居中精华总结

摘要：1 table-cell方式将center元素的包含框display设置为table，center元素的display设置为table-cell，vertical-align设置为middle。原理：利用表布局特点，vertical-align设置为middle后，单元格中内容中间与所在行中间对阅读全文

posted @ 2016-04-29 14:13 ranyonsue 阅读(344) 评论(0) 推荐(0)

Font Awesome使用指南

摘要：Font Awesome介绍 Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识，现在FontAwesome不仅仅可以在bt上使用，还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标，字体图标主要是支持自适应、可以使用字体的各种特性（比如阅读全文

posted @ 2016-04-25 17:00 ranyonsue 阅读(1345) 评论(0) 推荐(0)

邮件页面为何只能Table写及注意事项

摘要：编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。一阅读全文

posted @ 2016-04-20 17:46 ranyonsue 阅读(3675) 评论(0) 推荐(1)

ranyonsue

随笔分类 - HTML/CSS