随笔分类 - CSS
摘要：盒子模型的相关属性 margin（外边距/边界） border（边框） padding（内边距/填充 ） 我们看图理解一下各属性作用： 以上属性又分为上、右、下、左四个方向 问题：页面元素的宽度width、高度height如何计算？ 答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边
阅读全文
摘要：前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示 来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版） 滚动条组成 ::-webkit-sc
阅读全文
摘要：做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器...
阅读全文
摘要：在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。 为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快...
阅读全文
摘要：1/* 禁止换行 */.nowrap{word-break:keep-all;white-space:nowrap;}/* 强制换行 */.break{word-break:break-all;}css强制不换行div{white-space:nowrap;}css自动换行div{ word-wrap: break-word; word-break: normal; }css强制英文单词断行div{word-break:break-all;}大家都知道连续的英文或数字会把DIV或表格边框撑破，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div1.（IE浏览器）white
阅读全文
摘要：.all IE{property:value\9;}.gte IE 8{property:value\0;}.lte IE 7{*property:value;}.IE 8/9{property:value\0;}.IE 9{property:value\9\0;}.IE 7{+property:value;}.IE 6{_property:value;}.not IE{property//:value;}lte：就是Less than or equal to的简写，也就是小于或等于的意思。lt ：就是Less than的简写，也就是小于的意思。gte：就是Greater than or eq
阅读全文
摘要：要保证CSS效果在IE和Firefox下兼容的话，推荐如下：1：尽量少的使用Margin，使用padding来设置距离，margin太不稳定了,(当碰到莫名其妙的时候，试试这条。将margin设为0，单独设置padding)2：如果要设置float的话，心里问下自己是否会溢出(内容溢出)，会有什么结果中,如果有的话，解决方案有很多种，最简单的在后面加个<br />，设置<br />的style:display:none;clear:both;。楼下有说先设置float:right，后设置float:left，至今不明白，能不能详细解释下3：作为容器的div的positi
阅读全文
摘要：CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6
阅读全文
摘要：DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。DOCTYPE声明的作用是指出阅读程序应该用什么规则集来解释文档中的标记。不正确的doctype声明经常导致网页不正确显示，或者导致它们根本不能显示。本文章详细介绍了DOCTYPE声明的作用及用法。来源：CSDN.NET原文链接:http://blog.csdn.net/jom_ch/archive/2007/09/04/1772165.aspx一、浏览器呈现模式和doctype 有的网页是遵循标准而创作的，但也有很多不是。即使你不能创建遵循标准的网页，也希望浏览器根据标准来正确显示.
阅读全文
摘要：不支持小于12pxCSS样式目录问题分析谷歌浏览器支持font-size小字体方法解决所需CSS代码解决前后截图未解决前HTML+CSS代码截图解决后HTML+CSS代码截图掌握解释1、谷歌浏览器不支持设置CSS较小字体问题分析 - TOP网页常常为了排版美观，会使用忽大或小的文字，通常font-size文字为12px（像素）文字。设置大于12px文字字体，各浏览器都能显示出CSS所设置文字大小效果。但是CSS设置小于12px文字时候谷歌浏览器google Chrome就不能显示出CSS所设置小于12px的文字字体效果。2、谷歌浏览器支持设置font-size小于12px像素解决方法： ...
阅读全文
摘要：DOCTYPE的选择DOCTYPE的选择也就是文档类型选择，这决定页面元素和定义的CSS会不会生效，因为在不同的DOCTYPE中，页面中可以使用的HTML元素不同，让我们一起来看一下。什么是DOCTYPEDOCTYPE是Document Type(文档类型)的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本，要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明，只有确定了正确的DOCTYPE，XHTML中的标识和CSS才能正常生效。选择什么样的DOCTYPE在XHTML1.0中有3中DTD（文档类型定义）可以选择，分别是过渡的（Transitional)
阅读全文
摘要：DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。 -要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效；当然对JS的取值也会有影响。 DOCTYPE声明如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
阅读全文
摘要：min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。先说说min-height。这个看起来很容易。看下面试例：<div style="border:5px solid #f00;min-height:200px;width:300px;padding:12px;"> 最小高度</div>运行图如下：先别高兴的太早，不要忘了已经让你深恶痛绝，但又不得不朝夕相对的ie6.0，它是这样回应你的：没有办法，谁让国富民穷的国人口袋里没有钱呢？或许不应该这样说。应该说谁让我们无私的国人，把自己的口袋无偿的贡献给了国家了呢？
阅读全文
摘要：对于日新月异的WEB开发技术和浏览器更新频率来说，清除浮动已然是一个被人嚼碎了的话题。说是这些年过去了，有关float的地方，还依然少不了清除浮动的标签和css代码。W3C整天研究html5，就不能抽出点时间来把这种烦人的小细节修正一下吗？抱怨归抱怨，饭还得吃，钱还得挣，清除浮动就不能停止。为了清除浮动增加无语义代码已经是最稳定和简单的方式，但总叫开发者心里感到不舒服，毕竟这么多年来早已习惯了结构和样式的分离，非要在结构中插入这样一行无语义代码就会让人觉得有种难以掌握的感受。通过css代码清除浮动也不省油，光是当前这种多个浏览器瓜分浏览器份额的状况所带来的各种css hack就够让人头疼的了，
阅读全文
摘要：例如<style>.demodiv{float:left;width:100px;height:50px;background:red;margin:5px;}.d{clear:both}</style><div class="demodiv">1</div><div class="demodiv">2</div><div class="d"></div><div class="demodiv">3</
阅读全文
摘要：代码CSS代码：.test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; word-wrap: break-word; overflow-x: hidden; overflow-y: ...
阅读全文
摘要：当今用户的显示器越来越大的今天，之前的1024*768固宽布局有点越来越不合时宜，对大屏幕的用户而言，两侧空空的留白给人第一眼的印象是严重的屏幕浪费，作为网页设计师的你有责任给这一批用户一个良好的用户界面。当然为了减少这种屏幕的浪费，采用弹性流体布局是最好的解决方案，它可以充分利用屏幕空间，无论你是多大分辩率的用户，都能尽情满屏展示内容。然而因为种种限制，目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意蹂躏以及CSS标准的不完全支持等等)。作为夹在用户和厂商的中间者，我们只能以一种兼容的心态去适应两者的差距。所以，作为一种过渡的解决方案，有了这样一种布局：弹性+固宽布局
阅读全文
摘要：概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。)说明：占位空间：元素在文档流中所占据的空间。物理空间：元素本身所占据的空间。下面分3种情况分别对相对定位和绝对定位进行讨论：1.只使用css第一组属性布局定位元素的情况2.只使用css第二组属性布局定位元素的情况3.混合使用第一组和第二组属性的情况图1为未定位时的初始效果，层级关系为：<div<div box1<div b
阅读全文
摘要：第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是：<ul><li><a href="1">首页</a></li><li><a href="2">产品介绍</a></li><li><a href="3">服务介绍</a></li><li><a href="4">技术支持</a></li><
阅读全文
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&g
阅读全文
