felix930-CSDN博客

原创 DOM节点操作

一、节点名称及类型节点类型 nodeType nodeName nodeValue 含义 ELEMENT_NODE 1 标签名（eg:DIV） null 元素节点 ATTRIBUTE_NODE 2 特性名（eg:class）特性值特性节点 TEXT_NODE 3 #text 文本的内容文本节点 CDATA_SE

2016-07-23 18:24:00 703

原创 CSS3 transform3D 图片翻转效果

经常能在展示案例logo的时候见到。logo原本是黑白色，鼠标移入时logo翻转成为彩色。一、实现一张图片的翻转一、HTML结构<div class="stage"> <div class="flipBox"> <figure class="pic front">Front</figure> <figure class="pic back">Back</fig

2016-07-10 22:00:19 5391 2

rem是CSS3新引入的单位，它改良了往期版本中em单位使用不方便的缺点。（如果想了解em单位的更多信息，可以查看之前的文章：CSS中的em单位）一、em单位带来的问题我们知道，em的长度是根据元素自身的font-size大小来确定的：1em = 元素中文本的1个垂直高度如果元素自身没有设置font-size，那么em的长度将根据父元素的font-size来确定。另外，元素自身的font-size如

2016-07-07 17:24:39 2786 1

原创 CSS中的em单位

CSS中有众多单位，常用的px是绝对单位，em则是相对单位。在响应式和移动端的大前提下，使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性，可以说在某些方面，使用em作为单位比px更灵活。一、什么是em1.em的长度em是CSS中的一个相对单位，它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-heigh

2016-07-07 16:20:44 15062

翻译 HTML5区块和大纲算法

原文链接：Using HTML sections and outlines - Mozilla Developer Network每集HTML5+CSS3网页布局教程-2大纲算法HTML5标准带来了几个带有标准语义的新元素来描述Web文档结构。本文会介绍这些元素，并且讨论如何用这些元素定义令人满意的文档大纲。 HTML4时代的文档结构文档的结构（或者可以说在body标签之间的结构）是展示和

2016-07-03 16:23:40 6196

原创清除浮动的几种方法

当一个父级元素内嵌套浮动的元素时，这些浮动元素就脱离了文档流，此时父元素就无法获取其包含元素的高度从而自动延伸自身的高度，造成一系列排版问题。如下所示：<style type="text/css"> .outer { border: 1px solid #ffeab8; width: 60%; background: #fffbee;

2016-07-01 10:43:33 527

原创 CSS Position属性的学习

position属性真是萌新杀手T_T，参照谁定位？谁又脱离了文档流？理解了好长时间才摸清了一些门路。现在就对CSS position属性及HTML中有关定位的知识做一次梳理和总结。一、从position属性的四个值说起1.static默认定位（或者说没有定位）position: static;static是position属性的默认值，代表“没有定位”，即元素出现在正常的文档流中。如果规定了某

2016-07-01 01:14:27 1146

原创使用HTML注释判断IE版本

很老的技术，但实在是解决低版本IE兼容性的大杀器！该技术使用HTML注释实现，符合标准，向上兼容性强（对，那个叫CSS Hack的我就是在说你！）只有低版本IE浏览器能够理解这些注释，其他浏览器看不懂也不屑于看- -！通常用于引入针对不同版本IE的多版CSS随着IE的觉醒，较新版本的IE（IE10及以上）已经不再支持此技术一、HTML注释判断IE的写法

2016-06-29 23:54:05 518

原创 CSS计数器的使用

CSS计数器最初只能用于ul和ol元素，但在CSS2.1中新增的:before、:after伪类选择器和::before、::after伪元素选择器可以使CSS计数器应用于任何一个元素。一、和CSS计数器相关的属性或函数常用的和CSS计数器相关的属性或函数有counter-reset、counter-increment、content、counter()、counters().counter-r

2016-06-29 01:22:26 1067

原创块级元素文本垂直居中方法

块级元素的居中有如下解决方案：一、使用line-height样式<style> div { width: 300px; height: 200px; background: lightgray; line-height: 200px; /* line-height值与元素高度值保持一致 */ }</style><d

2016-06-28 20:00:38 5012

原创溢出文本自动带省略号省略(text-overflow: ellipsis;)的方法

使用text:overflow: ellipsis;的样式可以将溢出的文本自动裁剪，同时将裁剪部分标注为半个省略号。使用方法如下：<style> div { width: 200px; background: lightgray; text-overflow: ellipsis; white-space: nowrap;

2016-06-28 11:59:36 1025

一只前端萌新的日常