随笔分类 - CSS
摘要：前言 也许提及 你会想起水平居中，但除了这个你对它还有多少了解呢？本篇打算和大家一起来跟 来一次负距离的交往，你准备好了吗？ text align属性详解 The 'text align' CSS property describes how inline content like text and
阅读全文
摘要：前言 一直听说line height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line height和vertical align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟:) line height到底有多height？ 行距、行间距傻
阅读全文
摘要：前言 "《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》" 中提到在没有floated兄弟盒子时，line box的左右边框会与所属的containing block的左右content edge相接触。那到底什么是containing
阅读全文
摘要：前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的，那就是hasLayout。趁着最近突然发神经打算好好学习CSS，顺便解答多年来的疑惑。 hasLayout到底是何方神圣？ hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Contex
阅读全文
摘要：前言 盒子模型作为CSS基础中的基础，曾一度以为掌握了IE和W3C标准下的块级盒子模型即可，但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑。本文尝试全面叙述块级、行级盒子模型的特性。作为近日学习的记录。何为盒子模型? 盒子模型到底何方神圣居然可以作为CSS的基础？闻名不如见面，上图了喂! 再来
阅读全文
摘要：前言 一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。 common.css <style type="text/css"> ul,li{list-style:none;margin:0;padding:0;}
阅读全文
摘要：一、前言 假如只是开发简单的弹窗效果，懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好，那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。本文作为对W3C Recommendation-Layered presentation学习后整理的笔记，
阅读全文
摘要：一、前言 过去我们总通过图片来美化站点的LOGO、标题、图标等，而现在我们可以通过@font-face获取另一种更灵活的美化方式。二、看看例子 /* 定义 */@font-face {...
阅读全文
摘要：一、前言 文字承载着站点内涵，而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深入一下子网页字体的内容，若有纰漏请大家指正，谢谢！ 目录一坨: 二, 字体分类 1. 衬线体(Serif) 2. 无衬线体/非衬线体(Sans-Serif)
阅读全文
摘要：下列样式规则可用于最小化各浏览器标签样式的不一致性。注意：实际使用时应该对其进行适当的调整，以适应项目要求。/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*...
阅读全文
摘要：一、前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤...
阅读全文
摘要：一、前言 很久之前就了解过CSS3的线性渐变（Linear-Gradient），这段时间决定进一步认知这一特性，以下笔记以便日后查阅。二、CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ...
阅读全文
摘要：本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一、W3C标准的盒子模型 二、IE盒子模型 三、两种模型的区别 W3C标准盒子模型： 外盒模型 元素空间宽度 = content width + padding + border + margin的宽度 元素空间
阅读全文
摘要：一、Position各属性值详解 1. static ：默认值，元素将按照正常文档流规则排列。 2. relative ：相对定位，元素仍然处于正常文档流当中，但可以通过left、top、right和bottom的CSS规则来改变元素的位置。 注意点：[a]....
阅读全文
摘要：一、前言 首先看看一道阿里这期网申的题目吧！ 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::first-letter C. #main::before D. [type="checkbox"]:checked E. ul#sh
阅读全文
摘要：一、前言 在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小，这不仅与IE下textarea的行为特点有异，而且textarea的大小变化会撑大其父节点从而破坏整体布局。二、原因 ...
阅读全文
摘要：一、前言 在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被选中，因此在网上、书上查阅相关资料，记录在此以便日后查阅。 二、IE10+实现方式──CSS3 user-select: auto; => 用户可以选中元素中的内容 user-select: none
阅读全文