分针网—IT教育: Html / CSS常见问题的解决方案
2017-05-03 14:00
204 查看
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;}
.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重叠现象
若html结构如下:
body > div1 > div2 > div3
若要使得 div3 占满整个屏幕高度,CSS设置如下:
html, body { height: 100%;}
.div1, div2, div3 { height: 100%;}
元素的高度100%只相对于父元素
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>
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;}
1)z-index 只针对定位元素 (absolute relative fixed )有效
2)若不同的 z-index元素有嵌套,则显示层级由父元素的z-index决定
3)若不同的 z-index 元素无嵌套,则按照显示顺序以及数值大小决定显示层级
1)层叠上下文 background/border
2)负 z-index
3)块状水平盒子 block
4)浮动盒子 float
5)水平盒子 inline/inline-block
6)z-index: auto / z-index: 0
7)正 z-index
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;}
原文链接:http://www.cnblogs.com/wx1993/p/5765335.html
本文转载自分针网
相关文章推荐
- Html / CSS常见问题 解决方案
- Html / CSS常见问题 解决方案
- html css常见问题经验总结 源于css3.0 API
- 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】
- CSS 常见问题和解决方案
- HTML、CSS的一些常见问题
- css中元素居中显示的常见问题及解决方案
- HTML基础10--CSS常见问题
- css 常见兼容性问题及解决方案
- HTML + CSS处理常见问题
- HTML css 常见问题
- 解决在用HTML+DIV+CSS编写网页时,各个浏览器的兼容问题
- 常见浏览器兼容性问题与解决方案
- Android WebView常见问题解决方案汇总
- Android studio安装配置常见问题及其解决方案
- 关于CSS+DIV一些兼容问题常见的例子
- chrome对比IE常见问题解决方案
- matlab常见问题解决方案
- html+css收集的一些问题
- CSS 控制应为Html页面高度导致抖动的问题