在实际开发页面布局时，运用position，对定位的块级元素的嵌套的效果总是不太理解，这里做了几个测试一般的在w3c中我们可以很容易的获取定义:static ： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。inherit ：规定应该从父元素继承 position 属性的...
一、CSS 列表样式列表项标志 list-style-type - list-style-type 属性用于控制列表中列表项标志的样式 - 无序列表: 出现在各列表项旁边的圆点 - 有序列表: 可能是字母、数字或另外某种计数体系中的一个符号 - 无序列表取值 - none : 无标记 - disc : 实心圆，为默认值 - circle : 空心圆 - square : 实心方块 - 有序列表取值 - none : 无标记 - decimal : 无标记 ...
原文: http://blog.gqylpy.com/gqy/256"目录一、盒子模型二、外边距 margin三、内填充 padding四、浮动 float五、清除浮动 clear六、溢出 overflow七、定位 position1. 无定位 static2. 相对定位 relative3. 绝对定位 absolute4. 固定 fixed八、 层叠顺序 z-index九、透明度 opacit一、盒子模型margin：用于控制元素与元素之间的距离；最基本的用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的padding：用于控制内容与...
css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性。Transform浏览器支持情况：Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和...
这个属性的官方文档语法：示例代码：<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>*{margin: 10px;}.a{float: left;height: 300px;width: 300px;border: 10px dashed rgb(128,177,211);padding: 20px;background: url(img/HBuilder.png) no-repeat top left,url(img/HBuilder.png) no-repeat top center,url(img/HBuilder.png) no-repeat top right,url(img/HBuilder.png) no-repeat center left,url...
设置或检索弹性盒伸缩基准值: 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间计算值 – 绝对数:在flex-container主方向大小不足以容纳flex items的flex-basis总和时，浏览器会自动缩小它们实例:<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8"/><title>flex-basis_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨...
css的盒模型包含了content（元素自身）、padding（内边距）、border（边框）及margin（外边距）。如图，浏览器控制台elements的computed可以清晰显示元素盒模型，鼠标多动动就明白了：（蓝色区域表示content元素自身，这里是整个窗口的内容）盒模型有两种：标准模式和怪异模式。在<!DOCTYPE>声明缺失时就会在ie6、ie7、ie8下触发怪异模式标准模式下：盒子总宽度/高度 = content + padding + border + margin，content的width/heigh...
_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高\9：选择IE6+\0：选择IE8+和Opera[;property:value;];：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则[;color:#f00;]; 与 [color:#f00...
<div id="section1"> 示例文本1</div><div id="subsection1-1">示例文本1-1</div><div id="subsection1-2">示例文本1-2</div><div id="section2">示例文本2</div><div id="subsection2-1">示例文本2-1</div><div id="subsection2-2">示例文本2-2</div>CSS2中使用属性选择器来设置<style type=text/css>[id = section1]{ background:yellow;}</style>CSS3中的属性选择器1.[att*=val]属性值包含用val指定的字符[id*=section]{ ...
span 一个没有语义的行内标签base这个标签可以设置超链接的默认跳转方式title 当它是一个标签时用来定义网站的名称,当它是属性时可以用来设置图片的提示文本class 定义标签的类名id 定义标签的Id名active 用来设置元素被激活时的样式的伪类,一般不建议使用伪类实现行为层stylesteet 层叠样式表focus 设置元素获得焦点时样式的伪类,也不建议使用了visited 设置超链接被访问过后的样式的伪类target 设置超链接的跳转方式_blank 是tar...
一、动画概述动画概念 - 过渡属性只能模拟动画效果 - animation 属性可以制作类似 Flash 动画 - 通过关键帧控制动画的每一步 - 使元素从一种样式逐渐变化为另一种样式 - 实现复杂的动画效果 - 浏览器兼容性 - 最新版本支持良好 - Chrome 和 Safari 需要前缀 -webkit- - FireFox 需要前缀 -moz- - Opera 需要前缀 -o-动画示例 - 声明动画 - 创建一个已命名的动画 - 使用 @keyfram...
CSS背景在网页设计中使用频率非常高，然而对于这个开发人员很熟悉的CSS属性，却隐藏着许多不为初级开发人员熟知的细节，这篇文章尝试扒开这层不为人知的面纱。 首先列举一下CSS中关于元素背景的所有属性并简要描述了其作用，其中后面几个属性是在CSS3中新加入的。属性描述备注background简写属性，作用是将背景属性设置在一个声明中。 background-color设置元素背景颜色 background-image把图像设置为背景 background-repeat设置背...
浏览器的内核 谷歌的内核：webkit Firefox（火狐）的内核：Gecko ie的内核：Trident opera（欧朋）的内核：presto 国内浏览器的内核：webkit 注意：css3并不是所有的浏览器都兼容针对同一样式（css3） 在不同浏览器的兼容，需要在样式的属性前加上他的内核前缀 谷歌的前缀：-webkit-transition opera(欧朋)的前缀：-o-transition 火狐（Firefox）的前缀：-moz-tra...
属性值值描述url需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针（一只手）move此光标指示某对象可被移动。e-resize此光标指示矩形框的边缘可被向右（东）移动。ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。nw-resize此光...
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> .button { height: 1em; border: 0; border-radius: .2em; background-color: #34538b; color: #fff; font-size: 12px; font-weight: bol...