摘要：
在CSS中，背景图片的定位方法有3种： 1）关键字：background-position: top left; 2）像素：background-position: 0px 0px; 3）百分比：background-position: 0% 0%; 注意，第一个表示水平，不是top，第二个是... 阅读全文
随笔分类 - web---css
css书写规范
2013-11-04 01:08 by youxin, 650 阅读, 收藏, 编辑
摘要：
css中id或class命名规范：最好不要在你的类名或者ID名中去加入颜色或者长宽的尺寸等带有属性的名字。先看一个例子： .l-123f { color: red; } 如果你第一次看到这个类名，你能在css文件立刻找到这个class吗？估计很难，因为这个类的名称只是某一个人能理解的符号再没有其... 阅读全文
css 优先级
2013-10-28 23:22 by youxin, 442 阅读, 收藏, 编辑
摘要：
css优先级的四大原则：原则一： 继承不如指定如果某样式是继承来的永远不如具体指定的优先级高。例子1：CODE:我是多大字号？运行结果：.class3{ font-size: 12px; }例子2：CODE: 我是多大字号？ 运行结果：.class3{ font-size: 12px; }注意：后面的几大原则都是建立在“指定”的基础上的。原则二： #ID > .class > 标签选择符例子：CODE:我是多大字号？运行结果：#id3 { font-size: 25px; }原则三：越具体越强大。解释：当对某个元素的CSS选择符样式定义的越具体，层级越明确，该定义的优先级就越高。C 阅读全文
浏览器的加载与页面性能优化
2013-10-14 17:01 by youxin, 852 阅读, 收藏, 编辑
摘要：
提升页面性能方面已经有很多前人的优秀经验了，如Best Practices for Speeding Up Your Web Site和Web Performance Best Practices本文主要专注其中加载部分的优化，总结起来主要有以下几点：带宽使用CDN压缩js、css，图片优化HTTP优化减少转向减少请求数缓存尽早Flush使用gzip减少cookie使用GETDNS优化减少域名解析时间增多域名提高并发JavaScript放页面底部defer/asyncCSS放页面头部避免@import其它预加载接下来就从浏览器各个部分的实现来梳理性能优化方法。连接数在HTTP/1.1协议下，单 阅读全文
八种创建等高列布局
2013-10-14 14:07 by youxin, 581 阅读, 收藏, 编辑
摘要：
高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技术。只要制作一张合适的背景图片，在你多列的父元素中进行垂直铺放，从而达到一种假像（假的 阅读全文
CSS简写指南
2013-10-13 23:35 by youxin, 359 阅读, 收藏, 编辑
摘要：
高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。色彩缩写色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：1color：#113366可以简写为1color：#136所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box-shadow等。盒子大小这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右 阅读全文
Mozilla推荐的CSS书写顺序
2013-10-07 22:09 by youxin, 381 阅读, 收藏, 编辑
摘要：
//显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent源文件在这里：Mozilla suggested css order内容如下：/* mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide - 阅读全文
IE兼容性bug汇总
2013-09-29 19:27 by youxin, 346 阅读, 收藏, 编辑
摘要：
1、IE6的双边距BUG.发生条件：如果有元素是浮动元素，则该元素与它的父元素（一般是一个容器）直接相接触（中间不能隔着其他元素）的左或右的边距就会产生双倍边距，也意味着相邻的兄弟元素不可能会产生双倍边距，只有元素与其父元素之间才有可能产生双倍边距，产生双倍边距的那边是与其父元素相接触的那边解决方法：给产生双倍边距的元素添加上display:inline。（上面的发生条件有点问题，一般是： 一个div盒子如果设置了margin，并且该div设置了float浮动，那么在IE6下便会产生双边距问题：如果设置 float:left 那么左边距会是原来margin的两倍；如果是float:right， 阅读全文
转：CSS布局奇淫技巧之-宽度自适应
2013-09-29 19:15 by youxin, 367 阅读, 收藏, 编辑
摘要：
css这个东西，说难不难，说容易也不容易。我觉得最重要的还是经验的积累，正所谓的不积硅步，无以至千里。这一系列文章讲述几种css特殊布局的实现，也当作为自己做个备忘吧。首先讲的是三列布局，左右两列宽度固定，中间一列宽度自适应这个很好实现，左右两列分别左浮动和右浮动并给一个固定宽度，中间不浮动，也不设定宽度。（这个是有问题的，后面说明）这样基本就可以了。但为了兼容IE还必须做些工作。看下代码结构：效果为：中间列要不要设置margin-left和margin-right ?注意，中间那列需要把左右两个外边距分别设为左右两列的宽度，否则会有些问题。如下：在谷歌、火狐等标准浏览器下是这样的（包括IE8 阅读全文
css Block formatting context BFC
2013-09-29 05:51 by youxin, 735 阅读, 收藏, 编辑
摘要：
w3c关于BFC解释：http://www.w3.org/TR/CSS21/visuren.html#block-formattingMdn描述：Ablock formatting contextis a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.A block formatting context is created by one of 阅读全文
HTML标签CSS属性默认值汇总
2013-09-29 01:43 by youxin, 1971 阅读, 收藏, 编辑
摘要：
HTML标签CSS属性默认值，在你需要还原默认值的时候比较有用。以前一直在找这份文档，今天偶然在网上看到了。除了inline和block的定义，主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式（margin和font-size）。html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: bl 阅读全文
Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
2013-09-29 01:38 by youxin, 5048 阅读, 收藏, 编辑
摘要：
Doctype：(Document Type)文档类型，它位于文档中最前面的位置，处于标签之前。如果你想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE的声明。确定了正确的Doctype，xhtml里面的标识和css才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的css)。既然它是一种声明，它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。为了获取正确的Doctype声明，关键就是让dtd与文档所遵循的标准对应。例如：假定文档遵循的是xhtml 1.0 strict,那么文档的Doctype声明就应该是相应的dtd,如果Doctype声明指定 阅读全文
css em
2013-09-29 01:05 by youxin, 899 阅读, 收藏, 编辑
摘要：
em与px换算任意浏览器的默认字体高度16px（16像素）。所有未经调整的浏览器都符合:1em=16px。那么，12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em单位有如下特点： 1. em的值并不是固定的; 2. em会继承父级元素的字体大小。我们在写CSS的时候如果要用em为单位，需要注意两点： 1. body... 阅读全文
html body width height 100%使用
2013-09-29 00:50 by youxin, 20428 阅读, 收藏, 编辑
摘要：
首先我们来看一个实际的问题，让body中的一个div占全屏，（问题来源：http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window下面的代码符合要求吗？ div1运行后div1还是只占一行，h... 阅读全文
元素居中（一篇非常好的文章）
2013-09-28 22:47 by youxin, 850 阅读, 收藏, 编辑
摘要：
原文：http://css-tricks.com/centering-in-the-unknown/When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.Not too hard: Known ChildIf 阅读全文
css table 布局
2013-09-28 16:29 by youxin, 1012 阅读, 收藏, 编辑
摘要：
使用CSS表格CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。在深入了解这种方法之前，让我们先来写份HTML文档实例： ? HTML head content… ? navigation column... 阅读全文
大小不固定的图片、多行文字的水平垂直居中
2013-09-28 07:20 by youxin, 874 阅读, 收藏, 编辑
摘要：
本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强， 阅读全文
cssline-height行高 全解
2013-09-28 06:07 by youxin, 1226 阅读, 收藏, 编辑
摘要：
1. 基线、底线、顶线2. 行距、行高3. 内容区4. 行内框5. 行框元素对行高的影响扩展阅读1. 基线、底线、顶线行高指的是文本行的基线间的距离。基线并不是汉字的下端沿，而是英文字母"x"的下端沿2. 行距、行高3. 内容区底线和顶线包裹的区域，实际中不一定看得到，但却是存在。4. 行内框行内框只是一个概念，它无法显示出来，但是它又确实存在它的高度就是行高(这句话有问题，看http://www.cnblogs.com/youxin/p/3336854.html）在没有其他因素（padding）影响的时候，行内框等于内容区域5. 行框行框（line box）。同行内框类似 阅读全文
css vertical-align全解
2013-09-28 05:17 by youxin, 1217 阅读, 收藏, 编辑
摘要：
CSS的属性 vertical-align 指定了内联（inline）元素或表格单元格（table-cell）元素的垂直对齐方式。要记住：vertical-align不影响块级元素中内容的对齐。(vertical-align要点It only applies to inline or inline-block elements 或table-cell元素It affects the alignment of the element itself, not its contents (except when applied to table cells)When it’s applied to 阅读全文
css 自适应布局阮一峰
2013-09-27 23:36 by youxin, 3493 阅读, 收藏, 编辑
摘要：
转载一篇文章：自适应网页设计（Responsive Web Design）作者：阮一峰移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦 阅读全文
