px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=6...
1，什么是BFC BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干，2，生成BFC 下面的方法可以创建一个新的BFC （1）浮动元素，float: left | right （...
CSS文件结构CSS文件的书写可以用一定的结构来组织，来达到复用代码的目的。一般编写CSS样式规则，需要一些基础的模块，比如reset.css，它主要负责去减小浏览器的初始差异化规则。这个模块开源的比较广泛应用的有Yahoo的reset.css,还有normalize.css。这些现有资源拿来使用即可，但是使用之前应该认真地阅读一遍源码，看他们都做了哪些事情，还有一个比较基础的模块便是base.css,可以认为它负责一些高频次需要公共使用的样式规则，并...
CSS列表：属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。marker-offset 1. 列表类型：list-style-type属性（1）作用：修改用于列表项的标志类型；（2）可能的值：值描述none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数...
nternet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本不支持多列属性。column-count 属性规定元素应该被分隔的列数：column-gap 属性规定列之间的间隔：div { -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000; }column-coun...
CSS代码如下：/* Custom Stylesheet */ body, html {margin: 0;-webkit-font-smoothing: antialiased;background: #68ABAD;text-align: center;}/* DEMO 1 */.loader1 {margin: 0 auto;height: 20px;width: 20px;position:relative;-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;}.loader1 i{height: 20px;width: 20px;border-radius: 25px;display: block;position:absolute;}.loader1 ...
在没遇到calc之前我一直在想如果width/height能过写表达式得多好 例如100%-30px然后写上width:100%-30px;～ 无效、郁闷啊！有时我们可以用box-sizing: border-box;来解决一些问题，但还是有些情况无效今天在看css手册的时候发现了一段demo令我眼前一亮 copy下来测试一把，其中就是width:calc(100% - 30px);注意运算符左右空格哦 demo就不上了 在公司机器上有 有空补上原文：http://tianxing.blog.51cto.com/1515290/1579339
@mixin df {display: -webkit-flex;display: -moz-flex;display: flex; }@mixin df-ai {-webkit-align-items: center;-moz-align-items: center;align-items: center; }@mixin df-ai-fs {-webkit-align-items: flex-start;-moz-align-items: flex-start;align-items: flex-start; }@mixin df-ai-fe {-webkit-align-items: flex-end;-moz-align-items: flex-end;align-items: flex-end; }@mixin df-jc {-webkit-justify-content: ce...
在CSS中，与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机，等等。 CSS3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。 我们知道，在不同的设备中，浏览器的窗口尺寸可能是不...
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------...
我自己也感到这些代码非常不成熟，一定有很多可以优化的地方，就当做一个反面教材，供大家剖析、批评。index.html代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>痛风诊断评分</title><script src="js/common.js"></script><link rel="stylesheet" href="css/common.css" /></head><body background="img/p...
WEB标准是一系列标准的集合，并不是仅“DIV CSS”布局就可以实现。以CSS网页布局只是标准的基础之一。“DIV CSS”布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构，结合CSS最大程度使表现与内容相分离。 一位网友对W3C标准、重构与CSS布局的理解： 不知道从什么时候开始，在网络上到处可以看到div css，到底什么是div css呢？难道就是传说中的标准重构吗？标准从最简单的根源来说不是合理使...
在设计每个页面的时候，我们先要想好页面的整体框架后再写，这样思路清晰，页面也整齐，不容易出错且容易找到出现的问题。一般我们是将页面分为上、中、下三个大容器里面。再往容器里面添加小块。小块与小块、小块与大块之间的关系就要用到浮动与定位的组合排版。 上面的布局是一个思路的例子，布局调整的时候，我们应该先按先后顺序完成上、中、下三部分，还应该用border描出边框线帮助我们定位，做好了之后再取消掉边框做下个...
css是什么SS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个语法CSS声明总是以分号(;)结束，声明总以大括号({})括起来:CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:选择器id 用#， class用. 选择器创建外部样式表(External style she...
街上经常碰到一些发各类广告传单的，有一次收到一张房地产广告的传单，顺手留下来，看着里面有些广告挺吸引人，同时也想练练自己css技术，故抽空做了一下。原图某区域如下：实现上图效果是需要一些想象力的，比如三角形的构成和左右两边的空白间距，懂的这个原理，然后熟练运用border属性，一切就OK了比如其中一个三角形 <div class="arrow_ltitle1"></div> div.arrow_ltitle1 {width: 0;height: 0;border-top: 35px solid white;b...