web前端技巧整理【持续更新】

本文链接：https://blog.youkuaiyun.com/waiting7436/article/details/14124737

28.(倒序更新).对于高清视网膜Retina屏幕图像会变模糊，可以使用css4的新属性：images-set；

background-image: -webkit-image-set(url(http://xxx.png) 1x,url(http://xxx2.png) 2x);

1.今天在做一个页面的时候碰到了箭头居中的效果：由于想实现点击区域很大所以用了padding-top:23%。但是在计算23%的时候出现了问题，经过研究发现：padding-top的百分比是根据期父元素的width而不是height来计算的，很奇怪吧？哪位大牛能给解释下。

2.某个层加了浮动后又加margin后在ie6下一定会出现双倍边距。----------解决方法是display:inline;（虽然知道，但是每次都忘）。

3.左侧定宽右侧自适应+左右定宽中间自适应的框架一定要会运用，很多时候都会运用上，

demo1（左侧定右侧自适应）：

<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> <style type="text/css">
.container {
  border:1px solid #fff;
}
nav {
  float:left;
  width: 200px;
}
section {
  margin-left: 200px;
  word-wrap:break-word;
}
</style>
<div class="container">
<nav style="width:200px;height:200px;background-color:red;">


</nav>
<section class="nav" style="height:100px;background-color:blue;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxa
</section>


<section class="nav" style="height:100px;background-color:green;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxa
</section>
</div</span></span>

demo2（左右定中间自适应）：

<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>双列布局，左侧定宽，右侧自适应</title>
<style>
    html,body{ height:100%; margin:0px; padding:0px; }
    #header { width:100%; height:20px; background:#CCC; }
	#footer { width:100%; height:20px; background:#CCC; }
    #main { padding-left: 200px; padding-right: 200px;}
    #left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
    #right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
    #middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

4.在ie6下插入图片时候用img标签会有img下会有几个像素的空白会导致你跟设计稿做的东西不一样（会被主管火眼看出来然后挨骂）---解决办法是将img变成块级元素;display:block;

5.让文本在块内垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二个比第一个好用，具体我也不知道为什么。

6.a标签的lvha不是很常用，但是一定会用:a:link{} a:visited{};a:hover{}a:active{}

7.文本截断不换行貌似很常用（这几天天天用）：white-space:nowrap;overflow:hidden;text-overflow:ellipsis;（换行为：word-wrap:break-word;）

8.清除浮动的方法很多，这几天主要用的三种：1）clear:both;2)overflow:hidden;3).我的指导人最爱用的：#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}

9.鼠标手势有的时候在ie下会消失，这个情况这两天也出现过几次。----------------解决办法是corsor:pointer;(注意不能是hand--指导人特别提醒)

10.定义一个只有2像素的高度的容器的时候在ie6下会有bug--解决方法是将各种属性清零，尤其是font-size:0;height:0;line-height:0;

11.max-width在ie6下会不起作用---解决办法是_width:*;(上个周遇到过这个问题)

12.!important 规则--以前从来没用过这个属性，直到前天主管看我的代码时候提醒我在一个页面响应式的时候后来的width会覆盖本身的width:100%;所以要加width:100%!important;

13.清除浮动非常非常重要---比如有的时候容器无法自适应高度你就要用到它的！！！

14.点击文字的时候也会点击上单选框或者复选框了比如csdn的这个功能：方法是用lable包住单选框或者用lable for“id”。

15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。

16. 伪类 :link 和visited称为链接伪类，只能应用于锚元素a。而：hover ：active :focus称为动态伪类，可以运用于任何元素。（ie6不支持focus、ie7不支持 :active :hover）。------还可以伪类连接使用 a:visited:hover{};

17.如果想要达到这种结构：（只影响子元素而不影响到“孙子元素”）

<ul class="nav">
	<li>red</li>
	<li>
		<ul>
			<li>black</li>
		</ul>
	</li>
</ul

理论上应该用子元素选择器 .nav>li----------但是此方法在ie6下不支持，在ie7下父元素与子元素有注释的时候有bug。

所以正确的做法应是： .nav li{color:red;} .nav li *{color:black;}

<style>
.nav li{
	color:red;	
}
.nav li *{
	color:black;	
}
</style>
<ul class="nav">
	<li>red</li>
	<li>
		<ul>
			<li>black</li>
		</ul>
	</li>
</ul

18.对于选择器的优先级问题：以下的两个标题都是灰色

<style>
#content div#main-content h2{
	color:gray;
}
#content #main-content>h2{
	color:blue;
}
body #content div[id="main-content"] h2{
	color:green;	
}
#main-content div.news-story h2{
	color:orange;
}
#main-content [class="news-story"] h2{
	color:yellow;
}
div#main-content div.news-story h2.first{
	color:red;	
}
</style>
<div id="content">
	<div id="main-content">
		<h2>strange times</h2>
		<p>什么颜色</p>
		<div class="news-story">
			<h2 class="first">news-story--h2</h2>
			<p>news-story----------p</p>
		</div>
	</div>
</div>

选择器优先级示例
选择器	优先级
style=""	1000
#wrapper #content{}	200
#content .datepoted{}	110
div#content{}	101
#content{}	100
p.comment .dateposted{}	21
p.comment{}	11
div p{}	2
p{}	1

19.正常的盒子模型的width是由content+padding+border组成的。这往往会让你把握不好容器的宽度。尤其是距离左边距为定值，而宽度是百分比的时候。解决方法是改变盒模型box-sizing，设置后此元素的内边距和边框不再会增加它的宽度，而是在特定宽度内增加border和padding。（使用特定前缀-webkit-box-sizing 和-moz-box-sizing同时记住它是支持IE8+）

20.一个标签float:left;后就变成了块级元素了。不用加任何的display：block; 或者 display:inline-block;

21.surface下viewport不生效的解决办法

@media screen and (min-width: 767px) and ( device-aspect-ratio:16/9){
  @-ms-viewport {
  width: device-width;
  zoom:1;
  max-zoom:1;
  min-zoom:1;
  }
}

22.surface下IE10 点击链接，背景变色

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
a { background-color:transparent; }
}

23.【转】IE6中hover之后子元素不消失的问题

:hover虽然是个好东西，但是万恶的ie6对它支持却有各种各样的BUG。

但是如果用这样的方法来切换子元素的display:none跟display:block就会引起子元素不消失的bug，解决方法是在鼠标不放上的用绝对定位把元素隐藏而不是用display:None，比方说用这个 ~~top:4000px;left:4000px;position:absolute;~~ 请使用margin-left:-999999px;并在父元素加上overflow:hidden;否责会导致整个html被撑开！

24.

ie7 relative问题：父元素使用relative，子元素使用absolute，子元素高度大于父级高度，问题出现了，在ie7下父级被子元素高度撑开了

<ul>
   <li style="position:relative;">
      <div style="position:absolute;">position:absolute;</div>
    </li>
</ul>
那么，在ie7下会出现撑开父级的情况，原因是因为ie7下不支持<li>中嵌套<div>，把<div>换掉就行了。

25:ie6下背景色不显示 :hover后加zoom:1;

26:外层定宽超出隐藏，里面的内容比较大，想显示中间的区域: position:absolute;left:50%;margig-left:-200px;(200是当前img宽度的一半)

27.手机网站适应手机屏幕：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />