一个name可以同时对应多个控件，比如checkbox和radio而id必须是全文档中唯一的id的用途1） id是HTML元素的Identity，主要是在客户端脚本里用。2） label与form控件的关联，如 <label for="MyInput">My Input</label> <input id="MyInput" type="text"> for属性指定与label关联的元素的id，不可用name替代3）脚本中获得对象：IE支持在脚本中直接以id（而不是name）引用该id标识的对象。例如上面的input，要在脚本中...
CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额...
一：动画(animation)的参数详解由于上面用到了animation动画，这里详细介绍下这个animation的参数。简介CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的，包括动画运行时间，开始值和结束值，还有动画的暂停和延迟其开始时间等。语法<single-animation> = <single-animation-name> || <time> || <single-animation-...
这种纯CSS3美化单选按钮radio的方法适用于以下情况：1、可兼容IE9以上，需要兼容IE8的要写IE的hack把样式去掉2、只支持单选按钮radio，因为单选按钮选中样式的圆圈可以用CSS做出来，但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库3、不需要JS支持切换效果<label for="man" class="radio"><span class="radio-bg"></span><input type="radio" name="sex" id="man" value="男" checked="checked" /> 男<span class="ra...
CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recompositePaint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用 webkit-transform: translateX(3em) 的方案代替使用 left: 3em ，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite div { -webkit-animation-duration: 5s; -webkit-animation-name: move; -webkit-animation-i...
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#content{width: 500px;height: 300px;margin: 40px auto;position: relative;transform-style: preserve-3d;}#content>div{width: 100%;height: 100%;position: absolute;transform-origin: center bottom;}#content img{width: 100%;height: 100%;}#next{position: absolute;top:190px;left: calc(33% - 60px...
1、通配符选择器通配符选择器用“*"号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素/*设置当前页面中所有标签的颜色为红色*/* {color: red; }2、标签选择器标签选择器就是选择当前页面中相同名字的标签/*设置所有p标签的文字颜色为红色*/p {color: red; }3、ID选择器id选择器使用"#"进行标识，后面紧跟id名{:; }<h1 id="title">这是标题</h1>注意HTML标签中ID的属性值在一个页面中必须是唯一的（是W3C规范而不是硬性...
1.在制作sidebar时对li里面的元素进行浮动，li在ie6/7下会出现4px的间间隙：解决方法：在li下加上vertical-align属性，值可为top、bottom、middle；扩展：vertical-align属性为垂直居中，一般与table-cell联合使用，但是对于ie6/7的兼容是无解的。 2.注意： 元素浮动后在ie6/7下会使margin-bottom失效；在开发过程中要注意margin-bottom的使用。 3.清除浮动clearfix（据说使史上最高大上的方法，兼容ie）：.clearfix:after{ con...
1.淘宝的方法在曾经的"淘宝UED招聘"中有这样一道题目：“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。题目的难点在于两点：垂直居中；图片是个置换元素，有些特殊的特性。至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：.box { display: table-cell; vertical-ali...
code<style>.a{background: red;}.b{background: yellow;} </style> <div class="a b">A</div>渲染效果最初以为更改元素中class类里面的类名顺序，渲染效果就会根据类名顺序依次渲染code<style>.a{background: red;}.b{background: yellow;} </style> <div class="b a">A</div>渲染效果更改元素class里面类名的顺序并不能影响渲染顺序code <style>.b{background: yellow;}.a{background: red;}</style> <div class="a b">A</div>...
层叠性所谓层叠性是指多种CSS样式的叠加，也就是说后面设置的样式会层叠（覆盖）之前的样式，层叠性的前提是CSS的选择器的优先级相同，例如，当使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <title>CSS层叠性</title> 7 <style> 8 ...
行内元素格式化顺序：font-size-->em框-->内容区-->行内框-->根据基线放置行内框-->确定行框高度相关概念： leading（行间距）：指填充在两行文字间的铅条，等于line-height 和 font-size之差，其中一半leading加到文字上方，另一半leading加到文字下方，只用于非替换元素。em框：em框指示没有行间距时基线之间的距离，不指定字符间的边界，实际的字形可能比其em框更高或更矮。font-size ：确定给定字体的em框（em box）的高度，但...
1、盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。用公式表示就是：盒子=边框+内边距+内容区域+外边距元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。注意：背景应用...
?p+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误，就是"p+CSS"这种叫法其实是一种不准确的叫法，是国人给这种布局标准页面的方法起的名字，是对技术理解不够透彻导致的，而标准的叫法是什么呢？呵呵，没错，标准叫法是xHTML+CSS！ 单纯从代码上辨别过去的http://www.gxlcms.com/code/7955.html" target="_blank">页面布局方法和现在流行的页面布局方法，认为过去布局页面用的是Table，称之...
HTML CSS 基础 标签默认值样式重置： （css reset）包含：body，p,h1,h2,h3,h4,h5,h6,dl,dd外边距 字体ol，ul，a，img等标签的默认值样式重置用群组进行重置 标签基本特性和转换块和内嵌的特性及区别：内联，内嵌，行内属性标签：1、默认同行可以继续跟同类型标签2、内容撑开宽度3、不支持宽高4、不支持上下的margin和padding5、代码换行被解析快属性：1、默认独占一行显示2、没有宽度时，默认撑满一排display：block；（显示为块）...