1、块级元素建议用margin—top、margin-bottom去调整垂直高度，行内元素（span、img、文字等）用vertical-align调整垂直高度。可以给具体的值也可以用middle等。文字还可以用line-height调整。
eg：
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style type="text/css"> | |
| p { | |
| border: 1px solid red; | |
| } | |
| /*img、display=inline-block、文字都可以使用vertical-align调整垂直高度*/ | |
| /*文本还可以使用line-height去调整，建议先使用vertical-align*/ | |
| img { | |
| vertical-align: middle; | |
| } | |
| span { | |
| vertical-align: 1px; | |
| /*line-height: 1px;*/ | |
| } | |
| /*div这种块级元素，建议使用margin-top或者margin-bottom去调整垂直高度*/ | |
| </style> | |
| </head> | |
| <body> | |
| <p><span>哈哈哈哈</span><img src="little-girl.bmp" alt=""></p> | |
| </body> |
2、优先级及权重
| /* | |
| 一、根据声明，写了就有 | |
| 二、根据样式声明的重要性和来源进行优先级排序 | |
| - 重要性：$$$$$$$$$$$$$$$$$$$$$$$$$$$$$11111111111111 | |
| 带有!important的比没有带!important的优先级高，写在元素里面的 | |
| 例如: h2 {color: red !important;} | |
| - 来源： | |
| 1.浏览器默认样式 | |
| 2.用户在浏览器中定义的样式中的normal规则 | |
| 3.开发人员定义的样式中的normal（你自己写的代码） | |
| 4.开发人员定义的样式中的important（你自己写的代码） | |
| 5.用户在浏览器中设定的样式 | |
| 三、按照特殊性$$$$$$$$$$$$$$$$$$$$$$$$$2222222222222222 | |
| 1.内联最强 | |
| 2.其次是id | |
| 3.class | |
| 4.元素选择器 | |
| 5.通配符 | |
| 四、按顺序$$$$$$$$$$$$$$$$$$$$$$$$$$$3333333333333333333 | |
| 后面的优先级更高（覆盖前面的） | |
| */ |
3.表单中disabled属性不能提交给后台，readonly可以提交，但只读。
4、margin在垂直方向只能取最大值不会相加，但兄弟间左右会相加。
5、块元素(block element) HTML标签分类明细
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单 （只能用来容纳其它块元素）
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element) HTML标签分类明细
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素 HTML标签分类明细
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
6.关于浮动：浮动很多时候是用来解决多列显示的问题，浮动之后变为inline-block(浮动文本必须制定width) 浮动之后会脱离文档流，浮动后的元素不会存在margin的垂直方向的问题，浮动之后会影响周围元素的布局。
7！！但浮动只会影响后面的元素，不会影响前面的元素，！！！！因此想要文字环绕图片就先把图片放前面让其浮动。
8、清除浮动的方法：（1）、添加空元素，clear：both。（2）、使用css after固定语法。eg：
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| /*使用:after，让浮动不要影响下面的$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/ | |
| .container>div { | |
| float: left; | |
| } | |
| .container:after { | |
| content: ""; | |
| clear: both; | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div>一</div> | |
| <div>二</div> | |
| </div> | |
| <div class="footer">12345</div> | |
| </body> |
9、主浏览器内核：firefox：gecko ，opera、：blink（还是prosto？） ，ie：trident ，safari、谷歌：webkit。
10.适应各种分辨率，给body设置min-width：960/1080.不满足的话会自动生成滚动条。
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
