前端一些不常关注的点

 

 

 

未知宽高的img如何在容器里水平、垂直居中
第一种方法：
<div class="box">
<img src="bigptr.jpg /><span></span>
</div>
.box {width: 800px; height: 600px; border: 2px solid #000; text-align: center;}
span {display: inline-block; height: 100%; vertical-align: middle;}
img {vertical-align: middle;}
第二种方法：
<div class="box">
<span><img src="bigptr.jpg /></span>
</div>
不考虑兼容的话，可以使用：
.box {width: 800px; height: 600px; border: 2px solid #000; display: table;}
span {display: table-cell; text-align: center; vertical-align: middle;}
考虑IE6、7兼容，则要写成：
.box {width: 800px; height: 600px; border: 2px solid #000; display: table; position:
relative; overflow: hidden;}
span {display: table-cell; text-align: center; vertical-align: middle; *position:
absolute; left：50%; top: 50%;}
img {*position: relative; vertical-align: top; left: -50%; top: -50%}

 

 

 

CSS 命名关键词参考:
页头：header 登陆条：loginBar 标志：logo 侧栏：sideBar 广告：banner 导航：nav 子导航：
subNav 菜单：menu 子菜单：subMenu 搜索：search 滚动：scroll 页面主题：main 内容：
content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：
joinus 指南：guide 服务：service 热点：hot 新闻：news 下载：download 注册：register 状
态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendLink 页脚：footer 版
权copyRight 外套：wrap 商标：label 顶导航：topnav 边导航：sidebar 左导航；leftsideBar
右导航：rightsideBar 注释：note 面包屑：breadCrumb（即页面所处位置导航提示） 容器：
container 内容：content 当前：current

 

 

##常见标签和SEO浅析
标题h标签
段落p标签
强调strong标签（粗体）
强调em标签（斜体）
span标签
有序列表ol标签
无序列表ul标签
列表项li
定义列表dl
定义列表标题dt
定义列表项dd
浅析SEO（搜索引擎优化）
部分方法： 1. 页面标签语义化 2. 使用对SEO有利的标签：h1/h2/h3/strong/em… 3. 提高页面关键词
密度 4. 其他
SEM：搜索引擎营销；（包含SEO）

 

 

inline-block的应用：分页导航
分析结构（div包一排a）
a标签支持宽高并在一排显示，因此要设置inline-block
有hover效果
cursor指针样式（规定要显示的光标的类型）
cursor: pointertextmove …
cursor: url(hand.cur), pointer; 如果前面图片没引入进来，就用后面的pointer

 

 

清除浮动:
.clear { /*用来处理IE6、7*/
zoom: 1;
}
.clear:after { /*用来处理其他浏览器*/
content: "";
display: block; /*或display: table;也可以*/
clear: both;
}

 

 

vertical-align的作用

作用一：vertical-align是垂直对齐样式。要给每个要对齐的元素都加上这个属性。vertical-align
对于浮动的元素是失效的，浮动元素是默认顶部对齐的。
作用二：用于清理图片下方的空隙。（将img放在块中，img下方会有几个像素的空隙。可以为img设
置display: block;来清理，但是这种方法有局限性，因此推荐给img添加vertical-align: top;样式
来清理。）

 

 

###滤镜和遮罩弹窗
<div class="mask"></div> //遮罩
<div class="alert"></div> //弹窗

body, html { //这里是为了兼容IE6。如果不给body和html加height: 100%的话，IE6下的蒙板只在最
上面显示一条）
height: 100%;
}
.mask { //遮罩的样式
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter:alpha(opacity=50);
}

.alert { //弹窗的样式
width: 400px;
height: 200px;
background: #fff;
border: 2px solid black;
position: absolute;
top: 50%;
left: 50%;
margin-top: -102px; //注意盒子的高度是200像素加上边框宽度×2，也就是204px
margin-left: -202px; //注意盒子的高度是404，而不是400.所以一般就是202px。此处一定要注
意。
}

 

 

label的用法（用for进行关联 id）：
<input type="radio" name="gender" id="a" /><label for="a">男</label>
<input type="radio" name="gender" id="b" /><label for="b">女</label>

 

 

 

outline轮廓线：可以用outline: none去掉表单元素的焦点线
a标签轮廓线去除方法：
1. <a href=”#” onfocus=”this.blur();”>…</a>
2. <a href=”#” hidefocus>…</a>

 

 

 

##热区
<img src="bigptr.jpg" usemap = "#Map" />
<map name = "Map">
<area shape = "circle" coords = "378, 132, 56" href = "http://www.baidu.com">
<area shape = "rect" coords = 462, 157, 566, 217" href = "http://www.google.com">
<area shape = "poly" coords = "227, 251, 186, 220, 168, 221 ..." href =
"http://www.qq.com">
</map>
map 热区
shape = “circle” 圆形 rect
coords = “圆心点x, 圆心点y, 原的半径”
href 跳转地址
shape = “rect” 矩形
coords = “矩形左上角x, 矩形左上角y, 矩形右下角x, 矩形右下角y”
shape = “poly” 不规则多边形
coords = “第一个点x, 第一个点y, 第二个点x, 第二个点y,…… “

 

 

 

##data uri
把图片src里面的地址用data uri代替
优点：减少HTTP请求数
缺点：无法被重复利用；会使文件变大
在线工具: http://dancewithnet.com/lab/2009/data-uri-mhtml/create/1376100722.php

 

##iframe
iframe外联框架。现在已经不太用了。
<iframe src="http://www.baidu.com" width="1200" height="600" frameborder = "0"
scrolling="no"></iframe>

 

 

##flash引入
<embed src=”1.swf width=”400” height=”400”></embed> embed标签就好用object标签包起来
<object>
<embed src="1.swf" width="400" height="400"></embed>
</object>
flash透明 <param name=”wmode” value=”transparent”> wmode=”transparent”:
<object>
<param name="wmode" value="transparent">
<embed src="1.swf" width="400" height="400" wmode="transparent"></embed>
</object>

 

 

##引入视频
在HTML5中：
<video></video>
如果要兼容IE的话，要用flash来做。常用的两种方法：
1. 用Dreamweaver自带的视频播放器（只支持flv格式）
2. 借助其他视频网站（优酷等），通过复制网站声称的代码，实现嵌入视频。

 

 

##词内断行和省略号
text-overflow (clip ellipsis)
white-space: nowrap
word-break: break-all和word-wrap: break-word;
文字溢出显示省略号，有三个样式设置缺一不可：一，给元素添加宽度width。二、设置overflow:
hidden。三、white-space: nowrap。三个条件齐备之后，设置text-overflow: ellipsis才会其效果。
给元素添加宽度是为了兼容IE6.在标准浏览器下，不给元素添加宽度，也可以。