css注意点总结

块元素：h1 div p ul ol li

1：总是从新行开始，不给宽度，宽度默认100%
2：高度，宽度，内边距，外边距可以控制
3：可以容纳其他行内元素或块元素，但是文字类的块元素h1，p，ul，ol不能放入div，一般放span

行内元素：a span b strong em i

1：和相邻元素在一行
2：宽度是本身内容的宽度
3：宽，高无效
4：水平方向padding marging 可设置，不要设置行内元素的上下边距。
5：行内元素只能容纳文本或其他行内元素

行内块： img input td

1：跟其他在一行，本身的宽度
2：高度，宽度，外边距，内边距可以控制。

浮动注意点：
1，外边距塌陷，盒模型，box-sizing content box border box
2，浮动是让多个块元素显示在同一行上，把块转为行内块inline-block可以显示在一行，但是有缝隙，兼容性也不好(不用)，所以使用浮动。
3，块级元素设置了浮动相当于把块转为行内块，默认内容撑开盒子。
3，块级元素设置了浮动相当于把块转为行内块，并且没有缝隙，更好的兼容性，定位也会把块转为行内块
4，盒子浮动位置根据上一个位置确定，上一个元素浮动了，这个和他同一行，上一个是标准流，就会显示到下一行上
5，行内元素加上浮动，这个时候自动转为行内块元素，可以设置高度位置。
6，浮动是不占位置的，浮在上面的，标准流的可以在其下面。
7：为了没有缝隙的显示，设置盒子浮动，浮动后不占有位置，会影响布局，解决给浮动的盒子套上标准流的父亲。
8，有时候父盒子没有给（不方便）高度（内容多少就撑开盒子），这个时候子盒子是浮动的，则下面的盒子会上来，这个时候需要清除浮动。给父盒子添加overflow：hidden。或者设置伪元素，双伪元素clearfix清除浮动。

定位注意点：
1，相对定位，占位置，边偏移相对于原先标准流中的位置
2，绝对定位，不占位置，边偏移以浏览器左上角。
3，子绝父相，子元素相对于父元素边偏移，绝对定位居中这个时候不用0 auto，必须用边偏移宽高一半，然后边偏移的一半。
4，固定定位，给宽和高，不然就用内容撑开盒子。
5，固定定位，绝对定位，如果行内元素设置了，自动转化为行内块元素，可以直接设置宽和高。有float absolute fixed 就不用设置display转换了。

内盒子给了宽度又给了内padding会撑开盒子，**特殊：没有给内盒子宽度，则内边距不会撑开盒子！**如果给了P width：200px，则内盒子宽就为230。而如下是不会撑大内盒子的。

标准流一行一行的，浮动显示在一行，定位可以叠在一起！
定位也解决了浮动，因为定位把块转为行内块！

嵌套关系塌陷（外边距塌陷）
父盒子与子盒子嵌套关系，都是标准流（没有浮动定位），给子盒子一个外边距，会把父盒子一起带下来。
解决，1～把给子盒子的外边距改为给父盒子的内边距。
2～给子盒子浮动 推荐
3～父盒子overfloat hidden
4～给父盒子设置一个border可解决
5～子盒用绝对定位 推荐

只针对行内元素，行内块元素有效，verticall-align:middle也可以去除图片空白缝隙！
去除缝隙也可以转为块元素，就不会基线对齐了！

css书写规范：
先写布局定位属性，display position float clear visibility overflow
自身属性，width height marging padding border background
文本属性，color font text-decoratione text-align vertical-align white-space
其他属性 content cursor box-shadow

其他注意：
1：制作导航栏，ul包含li，li包含a，因为li是块级元素给li浮动，把a转为行内块然后高设置内边距，因为导航栏字数不一样，不方便给a设置宽，设置左右padding撑开盒子。（因为内容不一样，使用内容撑开盒子，不设置宽，使用内padding）。
3：table设置边框，如果只给table设置border那么表格就只有外边框，如果设置表格内边框需要设置td。
4：图片不能超过200k
5：固定定位，让一个广告临帖版心，左边～left:50然后margin-left负的版心宽度的一半加上自己的宽度的一半！
6：outline:none去掉轮廓线。

7：强制一行显示，并且用省略号！
white-space:nowrap
overflow:hidden
text-overflow:ellipsis
8：插入图片一般用于产品展示，背景图片一般是小图标，精灵图，超大的背景图。
9：在div中盒子嵌套盒子div嵌套div，h1 p ul ol li 本身就是块级盒子，只需要最外嵌套盒子，h1 p ul ol li 不需要再单独嵌套盒子
10：h1 p ul ol li可以设置高度，设置border，如果li里面有a，a只需要设置字体，去掉下划线之类。
块元素li设置margin外边距，注意外边距塌陷（外边距塌陷问题，所以尽量设置内边距），设置了内padding，如果li没有给宽度，li盒子不会变大而是由内容撑开盒子，如果li给了宽度则li盒子需要减掉内边距padding
11：子盒子可以比父盒子大，使用举例，子盒子中要装内容，设置了margin值内容会掉下来，给子盒子稍微大一点，最后一个的margin反正也看不到。
12：当给盒子加了固定定位或者绝对定位后，相当与转为了行内块，不设置宽度此时是由内容撑开盒子，所以定位的盒子经常要给宽度。（定位的盒子如果是通栏，宽度设置为为100%）

父盒子中的内容垂直居中只需要给父盒子设置高度等于行高，父盒子里面的子盒子会继承父盒子的行高等于行高，垂直居中了。

格式注意：
1：类名全小写字母，使用_连接
2：css选择器写2-3个就差不多了，不要超过4个

ps切片工具
1：使用切片工具切片，然后文件菜单存储为web所用格式，选中切片。
2：清除选中切片，视图菜单，清除切片，清除辅助线。
3：图层菜单，选中图层，新建基于图层的切片。
4: www.cutterman.cn