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.不满足的话会自动生成滚动条。