摘要：
何为高度自适应？高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单，在兼容浏览器方面也稍微复杂一些。布局思路在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的，但这一法则在IE6中并不适用，因此在IE6中还得另辟蹊径。在IE6中给html设定padding,并不会撑大html元素的尺寸，这正是我们要利用的 阅读全文
随笔分类 - web---css
css 自适应布局
2013-09-26 18:31 by youxin, 920 阅读, 收藏, 编辑
摘要：
转载一篇文章：自适应网页设计（Responsive Web Design）作者：阮一峰移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦 阅读全文
css包含块containing block
2013-09-26 18:08 by youxin, 1247 阅读, 收藏, 编辑
摘要：
《css权威指南》P167：The Containing BlockEvery element is laid out with respect to its containing block; in a very real way, the containing block is the "layout context" for an element. CSS2.1 defines a series of rules for determining an element's containing block. I'll cover only those r 阅读全文
div图片垂直居中
2013-09-25 18:40 by youxin, 239 阅读, 收藏, 编辑
摘要：
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法:在曾经的 淘宝UED 招聘 中有这样一道题目：“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。题目的难点在于两点：1.垂直居中；2.图片是个置换元素，有些特殊的特性。至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-c 阅读全文
转：CSS Overflow 属性
2013-09-24 15:18 by youxin, 351 阅读, 收藏, 编辑
摘要：
原文：CSS Overflow 属性译自：The CSS Overflow Property版权所有，转载请注明出处，多谢！！根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。overflow属性有四个值：visible(默认),hidden,s 阅读全文
css 内联元素inline 行框全解
2013-09-24 14:30 by youxin, 2489 阅读, 收藏, 编辑
摘要：
首先看一篇文章：CSS框模型：一切皆为框 — 从行框说起一 行框 看图说话上图代表了框模型中的行框。line-height 属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框line box。[来源]二 框模型 继续看图上图代表了CSS中的框，每个框(也就是所有元素都是框，一定要记住这点，下面还会讨论行内非替换元素会忽略你设定的某些值而使用浏览器计算出 阅读全文
css hr 设置
2013-09-22 22:00 by youxin, 409 阅读, 收藏, 编辑
摘要：
http://www.sovavsiti.cz/css/hr.htmlhttp://adamculpepper.net/blog/css/hr-tag-css-styling-cross-browser-compliant/http://blog.puglypixel.com/2013/02/12/css-lines-and-section-dividers/http://css-tricks.com/examples/hrs/http://magicaleditor.com/css-divider-snippets/ 非常好 阅读全文
转:CSS选择器笔记
2013-07-24 12:59 by youxin, 246 阅读, 收藏, 编辑
摘要：
作者：阮一峰日期：2009年3月12日去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。=====================CSS选择器笔记阮一峰 整理参考网址：456 Berea Street一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配 阅读全文
转：CSS圆角详解
2013-07-24 12:20 by youxin, 318 阅读, 收藏, 编辑
摘要：
CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。网页设计大师Nicholas Zakas的最新文章，清晰易懂地解释了CSS3圆角的各个方面，非常值得学习。以下就是我翻译的中文版。=========================================CSS3圆角详解作者：Nicholas Zakas译者：阮一峰 原文：http://www.ruanyifeng.com/blog/2010/12/detailed_explanation_of_css3_rounded_corners.html原文：http://msdn.microsoft.com/ 阅读全文
css 定义hr的几种样式
2013-06-18 21:09 by youxin, 7056 阅读, 收藏, 编辑
摘要：
<style type="text/css"> <!--.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;}.hr1{ height:1px;border:none;border-top:1px solid #555555;}.hr2{ height:3px;border:none;border-top:3px double red;}.hr3{ height:5px;border:none;border-top:5px ridge green;}.hr4{ height:10px;bor 阅读全文
网页背景图片Full Page Background Image
2013-04-18 22:35 by youxin, 532 阅读, 收藏, 编辑
摘要：
The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it:Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes notcausescrollbarsAs cross-b 阅读全文
给DIV或HTML所有元素增加onfocus和onblur事件
2013-04-13 01:50 by youxin, 909 阅读, 收藏, 编辑
摘要：
默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的，经我长久论证因为他们不具有tab属性，所以只要我们创建tab，那么任何标签都可以具有tab属性。什么标签具有tab呢？显然input和a是得天独厚的具有，我们经常用键盘上的tab键进行移动光标的时候，我们发现光标只在具有tab属性的元素上进行跳转。我们现在来让div拥有tab并具有onfucus和onblur属性！给元素创建tab属性：tabindex=参数(这里和z-index类似，计算tab起点)。<div tabindex="0" hidefocus="true&q 阅读全文
转:网页设计中的默认字体样式详解
2013-04-05 17:25 by youxin, 401 阅读, 收藏, 编辑
摘要：
浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。样式优先级通常用户看到的页面的样式会受到三层控制:第一层是浏览器的默认样式第二层是网页定义样式第三层是用户 阅读全文
转:编写自己的XHTML&CSS框架
2013-03-15 21:48 by youxin, 310 阅读, 收藏, 编辑
摘要：
很多开发者在编写Xhtml和css习惯使用类似于960GS、Blueprint等框架，尽管这些框架确实在一定程度上节省了编写代码的时间，提高了工作效率，不过这些框架可能无法适应你的每一个项目。在使用这些框架时，你要改写它们的代码，以便和自己的代码搭配，或者改变自己的代码。也有可能会删除一些不相关的代码。这样总总都导致了代码不够整洁干净。但是事实上，框架确实节省了很多时间，所以为何不根据自己的需要做一个属于自己的Xhtml&Css框架？本教程就讲解如何自定义符合自己要求的框架。1.Xhtml头部（header）文件编写自己Xhtml&css最好的时候就在你想建设一个新网站的时候， 阅读全文
转:网页设计常用尺寸大全
2013-03-10 16:34 by youxin, 629 阅读, 收藏, 编辑
摘要：
网页的宽度现在比较流行的网页宽度是950px，网页两边留出少许白边，简洁又大方。1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。网页设计中常用的广告尺寸BUTTON120*60215*50通栏760*100430*50超级通栏760*100或者760*200巨幅广告336*280585*120竖边广告130*300全屏广告800*600弹出窗口400*300BANNER468*60悬停按钮80*80流媒体300*200国际标准的网页BANNER大小规格横幅广告（Banner）文件大小：gif:14K/swf:16K广 阅读全文
css Replaced Elements
2012-10-27 16:09 by youxin, 336 阅读, 收藏, 编辑
摘要：
Areplaced elementis any element whose appearance and dimensions are defined by an external resource. Examples include images (<img>tags), plugins (<object>tags), and form elements (<button>,<textarea>,<input>, and<select>tags). All other elements types can be refe 阅读全文
css 文字换行
2012-09-01 17:09 by youxin, 229 阅读, 收藏, 编辑
摘要：
我们设置了一个div的width，当单词很长时并不会被截断，而是超出了div，加上word-wrap:break-word;就可以截断很长的单词到下一行显示。参考：http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/ 阅读全文
转:用Margin还是用Padding
2012-08-31 19:34 by youxin, 169 阅读, 收藏, 编辑
摘要：
CSS边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南padding称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。——CSS权威指南关于什么时候用margin什么时候用padding，网上有 阅读全文
css background详解
2012-08-23 23:31 by youxin, 338 阅读, 收藏, 编辑
摘要：
原文链接：Backgrounds In CSS: Everything You Need To Know译文链接：css 背景全攻略转载请保留版权以及链接——————————————————————————————背景(background)是css中一个重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。css2 中 阅读全文
IE zoom:1 修复
2012-08-23 15:11 by youxin, 339 阅读, 收藏, 编辑
摘要：
zoom:1 一直都是被很多人 用来激活 ie浏览器(ie6, ie7, ie8)中 dom节点的haslayout 属性，http://stackoverflow.com/questions/6287023/what-bug-does-zoom1-fix-in-css 阅读全文
