一. background
复合属性：一个属性有多个属性值。
#bg{
url(bg.jpg) center top no-repeat gray fixed;
}
等同于
#bg{
background-attachment: fixed;
background-color: gray;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
二. margin
margin外边距的问题:
1. 上下外边距会叠加:
2. 父子级包含的时候子级的margin-top会传递给父级(内边距替代外边距)
三. 盒子模型:
盒子大小 = border + padding + width / height
盒子宽度 = 左border + 左padding + width + 右padding + 右border
盒子高度 = 上border + 上padding + height + 下padding + 下border
四. 文本样式:
word-spacing 单词间距
text-indent 首行缩进
letter-spacing 字母间距
五. 锚点:
无标题文档
百步飞剑
夜尽天明
诸子百家
万里长城
君临天下
百步飞剑
夜尽天明
诸子百家
万里长城
君临天下
六. 选择符优先级
样式优先级:
类型选择器(1) < class(10) < id(100) < style行间样式(1000) < js
同级样式默认后者覆盖前者.
七. 伪类详解
伪类用于向被选中元素添加特殊的效果.(元素在特定情况下才具备)
link 未访问(默认)
hover 鼠标悬停(鼠标划过)
active 链接激活(鼠标按下)
visited 访问过后(点击过后)
a四个伪类的顺序: link visited hover active
记忆方法: love hate
a伪类的应用:
a. 四个伪类全用(搜索引擎,新闻门户, 小说网站)
b. 一般网站只用( a:hover{ } )
IE6不支持a以外其他任何标签的伪类;
IE6以上的浏览器支持所有标签的hover伪类;
无标题文档
baidu
八. 标签默认值样式重置
九. 内嵌元素和块元素
/*
内嵌元素: a, span, strong, em
块元素: p, div, h1, h2, h3, h4, h5, h6, ol, li, ul, li, dl, dt
内联，内嵌，行内属性标签：
1、默认同行可以继续跟同类型标签；
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
块属性标签：
1、默认独占一行显示；
2、没有宽度时，默认撑满一排
3、支持所有css命令
display: block; 显示为块
display: inline; 显示为内嵌
display: inline-block; 一行内的块
特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
问题：
1、代码换行被解析；
2、ie6 ie7 不支持块属性标签的inline-block;
*/
十: 前端规范:
1、所有书写均在英文半角状态下的小写；
2、id，class必须以字母开头；
3、所有标签必须闭合；
4、html标签用tab键缩进；
5、属性值必须带引号；
6、
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
9、p,dt,h标签 里面不能嵌套块属性标签；
10、a标签不能嵌套a；
11、内联元素不能嵌套块；
十一: 浮动:
/*
浮动: left/right/none inline-block的加强版
元素加了浮动，会脱离文档流 ，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
4.脱离文档流(文档流是文档中可显示对象在排列时所占用的位置)
5.提升层级半层
clear left/right/both/none 元素的某个方向不能有浮动元素
*/
十二. 清浮动
无标题文档
十三. 关于浮动的一些兼容性问题
无标题文档
无标题文档
-
文字文字文字文字文字
作者
-
文字文字文字文字文字
作者
-
文字文字文字文字文字
作者
-
文字文字文字文字文字
作者
无标题文档
无标题文档