Html / CSS常见问题 解决方案

解决Safari下input光标过大

input {
  line-height: normal;
}

设置浮层

html, body {
 /*只有父元素设置宽高为100%子元素设置宽高100%时才能撑满整个页面*/
  width: 100%; height: 100%; } .shade { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; opacity: 0.3; } 

CSS绘制三角形

.caret {
    width: 0;
    height: 0; border-top: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; } 

清除浮动

1.浮动元素父级添加样式

.father {
  overflow: auto;
  /*overflow: hidden;*/
  zoom: 1; /*解决ie兼容问题*/ } 

2.父元素后添加伪元素

.clearfix:after {
    content: '';
    display: block; height: 0; overflow: hidden; clear: both; } 

3.同样可以使用如下方式（兼容IE）

.clearfix:after {
    content: '';
    display: table; clear: both; } 

4.在浮动元素后添加div.clear

.clear {
  clear: both;
  height: 0;
  overflow: hidden; } 

注意点

1. .clearfix 应用在包含浮动子元素的父级元素上

2.  

    

    

   使用clear清除浮动会发生margin重叠显现,使用BFC清除浮动（在浮动元素的父元素上添加overflow: hidden;）则会把整个元素包起来，从而不会发生margin重叠现象

设置元素div3高度为浏览器高度100%

若html结构如下:

body > div1 > div2 > div3

若要使得  div3 占满整个屏幕高度，CSS设置如下:

html, body {
  height: 100%;
}

.div1, div2, div3 { height: 100%; } 

元素的高度100%只相对于父元素

CSS书写顺序

1. 位置属性

   position, top, right, z-index, display, float

2. 大小

   width, height, padding, margin

3. 文字系列

   font, line-height,  color, text-align

4. 背景

   background, border

5. 其他

   animation, transition

锚点链接

h5中使用 id 作为锚点链接，如下：

<a href="#item1"></a> <div id="item1"></div> 

Yahoo军规

1. 尽量减少HTTP请求，将CSS、js、img资源进行合并
2. 使用CDN内容分发网络：尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输地更快更稳定（将用户的请求导向到离用户最近的服务器节点（增加服务器副本）上，解决网络拥挤的状况）
3. 增加Expire/Cache-Control头:在本地缓存中找到对应资源，若时间未过期，则直接使用此资源，不会发送http请求
4. 启用Gzip压缩
5. 将CSS放在顶部
6. 将JS放在最下面
7. 避免在CSS中使用Expressions
8. 将CSS和JS放到外部文件中
9. 减少DNS查询
10. 压缩CSS和JS
11. 避免重定向
12. 移除重复的脚本
13. 配置实体标签Etag（使用特殊字符串标识某个请求资源版本）
14. 使用AJAX缓存

父元素宽度不够导致浮动元素下沉

为父元素添加负值的margin-right

.father {
  margin-right: -32px;
}

z-index

z-index 只针对定位元素 (absolute relative fixed )有效

若不同的 z-index元素有嵌套，则显示层级由父元素的z-index决定

若不同的 z-index 元素无嵌套，则按照显示顺序以及数值大小决定显示层级

层叠水平（stacking level）——由低到高 (更符合加载功能和视觉呈现)

1. 层叠上下文 background/border
2. 负 z-index
3. 块状水平盒子 block
4. 浮动盒子 float
5. 水平盒子 inline/inline-block
6. z-index: auto / z-index: 0
7. 正 z-index

relative

1. relative 定位时，对其他元素不会有影响
2. relative定位时，若同时设置：top bottom : 则只有top有效，bottom无效 left right只有left有效，right无效
3. posittion: relative; 会提高对应元素的z-index

判断有无滚动条

if($("body").scrollTop()<=0 ){  
    // do()...
}

滚动条滚动到页面最底部

if ($(document).scrollTop() >= $(document).height() - $(window).height()) {

滚动条滚动到指定元素位置

$("html,body").animate({scrollTop:$("#elem").offset().top},1000);

元素高宽未知时设置水平和垂直居中

div {
    position: fixed;
    top: 50%;
    left: 50%; transform: translate(-50%, -50%); } 

隐藏滚动条

在出现滚动条的元素上添加样式：

.noScrollBar {
    overflow-x: hidden;
    overflow-y: hidden;
}

1.div居中方法
{
	margin：0 auto
	position 50% 50% top:-'height';left:-'width';
	当不知道宽度的时候给父级两边加固定的padding，就可以实现居中
}
2.兼容问题
{
	每个浏览器默认的padding margin不同 所以 *{margin:0;padding:0;}
	H5新特性就加前缀-ms- -o- -webkit- -moz- 
}
3.IE8  
{	
	最重要！！一定不要用flex布局；
	a标签下有img会出现边框 解决办法border:none;
	li padding：0px；不然有空隙；
	IE8  不能用nth();
	圆角：
   		 behavior: url(js/ie-css3.htc)；/*引入htc文件*/
                 -webkit-border-radius: 50%;
                   -moz-border-radius: 50%;
                     -o-border-radius: 50%;
                        border-radius: 50%;
                         background: white;
	背景可能变成黑底 需要再重新设置background颜色
	去掉input默认的边框：border:0;/* 包括所有input，兼容 ie6 ie7 ff chrome */
}
4.奇葩问题
   tabs切换下面从按钮后开始显示 加个margin-top:1px 就可以了

<input type="submit"> 出现边框 出现默认字体“提交” 解决方法：

input{

   border：none;

}//去边框

<input type="submit" value=""> //把默认的value设为空