标签：width one repeat-y 项目结构 repeat 并集 rom after ott
### css常见属性
- color:red/rgb(255,0,0)/#f00;
+ 注意，如果有a链接，必须在a链接中设置字体的颜色；在外面设置a链接中的字体颜色，无效；
- font:400 14px/28px "宋体 微软雅黑"；
+ font-weight:400; bold->700;
+ font-size:14px;
+ line-height:28px;
+ font-family:"宋体"
- background:url("相对地址") no-repeat left top red;
+ background-image:url();
+ background-repeat:no-repeat; repeat-x; repeat-y;
+ background-position:0 0； left top;
注意：background中的精灵图(雪碧图)，主要通过修改位置和宽高来展现图片；
- 字体是否倾斜
+ font-style:italic 倾斜／ normal 正常；
- 下划线和删除线
+ text-decoration: line-through; 删除线；
+ text-decoration: none; 去除下划线；
+ text-decoration: underline;添加下划线；
### css中的选择器：
- 1.标签选择器：div p ul li dt dd em i u del strong b input label from table
+ 缺点：只能进行共性的操作，无法个性操作；
- 2.class选择器和 3.ID：
+ `.class名`,同一个页面能有无数个相同的class名；
+ `#id名`，同一个页面只能有一个ID名；（ID名是不能重复的）
+ 在真正的开发过程中，class是用来设置样式的，id是用来获取元素；
```
<div class="div1 div2 div3" id="div1"></div>
```
- 4.后代选择器：div p(把div容器下，子子孙孙的p元素都选择上了)
- 5.子选择器：div > p(选择div容器下的儿子)；兼容IE7+；
- 6.交集选择器: div.div1
- 7.并集选择器：div,p
- 8.通配符*：代表所有的元素；
- 9.序选择器：兼容IE8+;
+ div > p:first-child
+ div > p:last-child
- 10.下一个兄弟选择器 ul li+li{} 兼容IE7+
### 开发常用的浏览器
- chrome
- IE7~11
- firefox;
### CSS的继承性和层叠性
- 以font开头的属性都能够继承；line-height
- color可以继承
- text开头的也可以继承，比如text-align;
### css权重
- !important权重无穷大；（少用为好）
- id的权重大于class的权重；
### css盒子模型
- css盒子模型由5部分：
+ 内容的宽高+padding+border+margin;
- 单行文本的居中：height = line-height
- 多行文本的居中，padding和line-height
- padding：
+ padding是内边距
+ padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色；
+ padding是复合值
padding:30px; ->pl30; pt30;pr30;pb30;
padding:20px 30px; ->上下为20px 左右30px;
padding:10px 20px 30px; -> 上10px 左右20px 下30px;
padding:10px 20px 30px 10px; 上 右 下 左；
如果现设置padding:30px;
再设置padding-left:10px;
请问最后的值各是多少？
左10px; 其他都是30px;
- margin：外边框
- border:
+ border:1px solid #000;
+ border-width
+ border-style：solid（实体）,dashed（虚线）,dotted（点）
+ border-color
### 行内元素和块级元素
- p标签虽然是文本标签，但是，它可以当容器来使用，p标签内一定不能放div; p块元素；他独占一行；
- 文本元素：p span a i em u b strong img
- 容器级：div li dt dd h级（不建议）
- 除了p，所有的文本元素，都是行内元素；
- 所有容器级别的元素，都是块元素
- 块和行内元素的相互转化
+ display：inline; //行内
+ display:inline-block;//行内块；
+ display：block; //块
- 关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）
- 关于脱离文档流的方法
+ 浮动 float:left; float:right;
+ 绝对定位 position:absolute;
+ 固定定位 position:fixed;
+ 重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；
+ 注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽；
- 清除浮动的方法：
1. clear:both (clear:left 和 clear:right)
2. over-flow:hidden;（他是溢出隐藏，但是可以用来清除浮动）
3. 伪类清除浮动
ul:after{
height:0;
content:"";
display:block;
clear:both;
}
### 最基本的开发，首先必须创建的项目结构
- images文件夹：放切好的图片
- css文件夹：放置css文件：index.css
- index.html文件
### 项目开发细节：
- www.baidu.com/favicon.ico+enter键；
- PS中的快捷键
+ m:虚线框；
+ 选中需要的图片后，ctrl+c; ctrl+n;ctrl+v;
+ 保存图片：ctrl+alt+shift+s
-
标签：width one repeat-y 项目结构 repeat 并集 rom after ott
原文地址：http://www.cnblogs.com/peakol/p/7067026.html
