随笔分类 -  CSS

杂谈 height, line-height, display, vertical-align
摘要：先声明一下，测试环境为 IE7+ , Chrome, Firefox, 不爱测那么多浏览器。。。坑爹的行内元素HTML：<div> <span>文字</span></div>CSS:body { font-family: '宋体'; font-size: 12px;}这种情况下，span 和 div 都是由文字撑开高度，但是高度各有不同。div: 所有浏览器都是height: 12pxspan: IE7 IE8 Chrome 是height: 12px, IE9 IE10 Firefox 是height: 14px第一个例子就这么 阅读全文
posted @ 2012-08-25 00:59 越己 阅读(1621) 评论(1) 推荐(1) 编辑
IE78 能使用的CSS选择器
摘要：首先说下为什么要写这篇文章。一个网站，为了添加样式，惯性思维都是加id，加class，问题是如果这是一个大型网站，整个页面使用的id和class会非常多，多到维护起来想死了。其实css提供了一些选择器帮助我们减少id和class，只是很多人很懒，有了id和class就不再关心它们了，为了简化和正规化css编码，专门写一篇IE78下能用的选择器，因为其他浏览器都支持标准，所以可以放心大胆的使用。这里主要说一些不常用的选择器，无视IE6，因为好用的选择器它基本都不支持。IE7支持的IE8肯定也支持，所以就不重复列举了。IE7支持的选择器有: 子选择器(div > span)相邻选择器（h1 阅读全文
posted @ 2012-05-09 21:01 越己 阅读(357) 评论(0) 推荐(0) 编辑
CSS浮动，你不知道的事
摘要：浮动到底做了什么？浮动如何影响元素的盒模型？浮动的元素和行内元素有何不同？调整浮动元素的位置是通过什么规则进行的？clear属性如何工作，它的目的又是什么？浮动甚至能绊倒有经验的开发者，理解浮动能帮助你解决很多CSS问题。即使你认为已经知道了浮动的所有知识，我们足够深入的分析也许也能让你学到一些新东西。什么是浮动？CSS中的一些元素是块级元素，表示它们会自动另起一行。举个例子，如果你创建了两个段落，每个段落都只有一个单词。这两个单词不会靠在一起，而是会各自占据一行。另一些元素是行内元素，表示它们和前面的内容位于相同的一行。举个例子，<a>可以出现在另一个元素中，比如<p> 阅读全文
posted @ 2012-05-08 23:58 越己 阅读(8118) 评论(1) 推荐(7) 编辑
:before 和 :after 的内幕
摘要：伪类 VS 伪元素这两个概念很容易混淆，即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单，如下：伪类：作用对象是整个元素首先，来看几个伪类a:link {color: #111}a:hover {color: #222}div:first-child {color: #333}div:nth-child(3) {color: #444}如你所见，尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。伪元素：作用于元素的一部分还是来看几个例子：p::first-line {color: #555}p::first-letter {c 阅读全文
posted @ 2012-05-08 01:02 越己 阅读(1747) 评论(0) 推荐(1) 编辑
绝对定位和相对定位的内幕
摘要：css有5种不同的position属性值我们不会讨论inherit，因为顾名思义，它就是继承了父元素的值，而且在比较老的IE版本中，支持情况也不好。任何元素的position属性的默认值都是static。所谓的static定位就是元素在文档流中。当然了，这完全取决于你的HTML结构。另一个值你肯定见过，它就是fixed。说白了，它就是把一个对象钉在背景上，因此无论你把它放在哪，它就会一直在那。我们经常在sidebar的导航元素中看到它的身影，当页面向下滚动了很远的距离，这时候我们想回到顶部，如果没有一个fixed的导航，这种用户体验是很差的。前面这三个值都很浅显易懂，接下来是绝对定位和相对定位 阅读全文
posted @ 2012-05-07 23:27 越己 阅读(2325) 评论(1) 推荐(4) 编辑
CSS画三角形
摘要：需求比如新浪微博的tip，或者别的网站常用的tip，都可以看到三角形的身影，一般来说，都会使用图片，但是我希望能用css解决。三角形的实现方式（不考虑css3）：1. 纯字符2.border可选字符如下：◣◢◤◥▲▼► ◄△▽⊿你可以等比放大缩小，或者改变颜色如果字符无法满足需求，使用border.arrow { display: block; width: 0; height: 0; font-size: 0; /** 下面两行随你配置 **/ border-width: 40px; border-style: solid; border-co... 阅读全文
posted @ 2012-05-07 15:10 越己 阅读(358) 评论(0) 推荐(0) 编辑
em
摘要：以前一直对em心存疑虑，今天终于了解它的作用了。CSS的单位分绝对和相对两种，比如设置width: 100px，就是绝对值，如果设置成width: 100%，就会相对父元素的大小进行调整。em是一种相对单位，它相对于父元素的文本字体大小，来看一个例子：body { font-size: 100%;}h1 { font-size: 1.5em;}这段CSS表示页面使用字体的默认大小，即16px。h1的大小是默认大小的1.5倍，即24px（16 * 1.5 = 24）http://www.impressivewebs.com/understanding-em-units-css/ 阅读全文
posted @ 2012-05-01 17:34 越己 阅读(351) 评论(0) 推荐(0) 编辑
CSS解决高度自适应问题
摘要：高度自适应问题，我很抵触用js去解决，因为不好维护，也不够自然，但是纯用CSS，难度不小，比如下面我要说的例子。需求：1. 这个矩形的高度和浏览器窗口的高度相同，不能出现纵向滚动条2. 绿色部分高度固定，比如50px3. 紫色部分填充剩余的高度HTML结构暂且如下：<div id="main"> <div id="nav">nav</div> <div id="content">content</div></div>先看1.html, body { height: 阅读全文
posted @ 2012-03-20 22:45 越己 阅读(58713) 评论(7) 推荐(7) 编辑
垂直居中
摘要：垂直居中是个老生常谈的问题，最常见的解决办法就是设置line-height和height为相同的值，但是这个方法也不是处处适用，比如下面的例子：<!doctype html><html> <head> <title>test</title> <style type="text/css"> span { line-height:20px; height:20px; } </style> </head> <body> <span><input type= 阅读全文
posted @ 2012-02-07 15:50 越己 阅读(270) 评论(0) 推荐(0) 编辑
仿微博半透明边框
摘要：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> body { background:blue; } #box { width:300px; padding:5px; position:relative; } #alpha_bg { background:#f2f2f2; width:10 阅读全文
posted @ 2011-09-25 11:25 越己 阅读(1513) 评论(1) 推荐(0) 编辑

点击右上角即可分享
微信分享提示