分针网—IT教育： Html / CSS常见问题的解决方案

1. 解决Safari下input光标过大

input {
  line-height: normal;
}

2. 设置浮层

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

3. CSS绘制三角形

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

4. 清除浮动

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重叠现象

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

若html结构如下:

body > div1 > div2 > div3

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

html, body {
  height: 100%;
}

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

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

6. 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

7. 锚点链接

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缓存

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

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

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

9. z-index

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

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

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

10. 层叠水平（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

11. relative

1）relative 定位时，对其他元素不会有影响

2）relative定位时，若同时设置：top bottom : 则只有top有效，bottom无效 left right只有left有效，right无效

3）posittion: relative; 会提高对应元素的z-index

12. 判断有无滚动条

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

13. 滚动条滚动到页面最底部

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

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

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

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

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

16. 隐藏滚动条

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

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

原文链接：http://www.cnblogs.com/wx1993/p/5765335.html

本文转载自分针网