1. 解决Safari下input光标过大
 
2. 设置浮层
 
3. CSS绘制三角形
 
4. 清除浮动
 
1) 浮动元素父级添加样式
 
2) 父元素后添加伪元素
 
 
3) 同样可以使用如下方式(兼容IE)
 
4) 在浮动元素后添加div.clear
 
注意点
1) .clearfix 应用在包含浮动子元素的父级元素上
2) 使用clear清除浮动会发生margin重叠显现,使用BFC清除浮动(在浮动元素的父元素上添加overflow: hidden;)则会把整个元素包起来,从而不会发生margin重叠现象
5. 设置元素div3高度为浏览器高度100%
若html结构如下:
body > div1 > div2 > div3
若要使得 div3 占满整个屏幕高度,CSS设置如下:
元素的高度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 作为锚点链接,如下:
 
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
 
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. 判断有无滚动条
 
13. 滚动条滚动到页面最底部
 
14. 滚动条滚动到指定元素位置
 
15. 元素高宽未知时设置水平和垂直居中
 
16. 隐藏滚动条
在出现滚动条的元素上添加样式:
 
 
 
 
原文链接:http://www.cnblogs.com/wx1993/p/5765335.html
 
本文转载自分针网

分针网—IT教育: Html / CSS常见问题的解决方案的更多相关文章

  1. 分针网—IT教育: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  2. 分针网—IT教育:作为PHP开发人员容易忽视的几个重点

    无论是学习什么样的一个开发.ASP开发.java开发.当学习还不是很久的时候,一般都是不知道它们的精华是在哪里,而现在很多的php程序员也是不知道PHP的精华所在,为什么perl在当年在商界如此的出名 ...

  3. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  4. 分针网—IT教育:调皮的JavaScript

    JavaScript是一门有趣的语言,不仅有趣而且调皮,不同的内核的浏览器在解析的时候表现会有些差异,今天主要是抛砖引玉,和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScr ...

  5. 分针网—每日分享:HTML解析原理

    标准的web前端工程师需要知道 ◎浏览器(或者相应播放器)的渲染/重绘原理   这我得加把劲了.我还真的说的不是很清楚,我就G下,结果不是很多,找到了有一个,就记下来了...   以下部分来自hand ...

  6. 分针网——每日分享: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  7. 分针网—每日分享: 怎么轻松学习JavaScript

    js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.   我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路& ...

  8. XHTML CSS 常见问题和解决方案

    原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...

  9. 【模拟,时针分针秒针两两夹角】【没有跳坑好兴奋】hdu - 5387 (多校#8 1008)

    算是最好写的一道题了吧,最近模拟没手感,一次过也是很鸡冻o(* ̄▽ ̄*)o 注意事项都在代码里,没有跳坑也不清楚坑点在哪~ #include<cstdio> #include<cst ...

随机推荐

  1. Mobiscroll日期插件使用

    相关资源 官方帮助文档:https://docs.mobiscroll.com/3-0-1 导入资源文件 <link href="${webRoot}/template/green/w ...

  2. java与xml之间的转换(jaxb)

    使用java提供的JAXB来实现java到xml之间的转换,先创建两个持久化的类(Student和Classroom): Classroom: package com.model; public cl ...

  3. 机器学习 - pycharm, pyspark, spark集成篇

    AS WE ALL KNOW,学机器学习的一般都是从python+sklearn开始学,适用于数据量不大的场景(这里就别计较“不大”具体指标是啥了,哈哈) 数据量大了,就需要用到其他技术了,如:spa ...

  4. Linux学习之sudo命令

    在学习Linux用户管理时,我们不得不需要了解一个命令,那就是sudo.sudo的作用是切换身份,以其他身份来执行命令. 那么为什么在Linux系统中我们需要来切换身份呢?原因有以下几个方面 1.养成 ...

  5. WebStorm里启动electron项目

    WebStorm里启动electron项目,其实很简单 一.第一步打开下面的窗口 二.然后输入electron .,然后敲下 回车键,然后等会项目界面就会出现了. PS:electron 和 点之间有 ...

  6. WPF之路一:相对路径图片显示

    由于公司项目的需要,改为WPF开发,因此需要学习WPF,遇到的第一个问题就是在显示的图片的时候,写绝对路径,图片显示没有问题,但是写相对路径的时候,发现图片无法正常显示,在网上搜了一下,得到的答案是需 ...

  7. 持续集成:TestNG组织如何测试用例 1

    持续集成:TestNG组织如何测试用例   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90 ...

  8. 老李推荐:第4章1节《MonkeyRunner源码剖析》ADB协议及服务: ADB协议概览 1

    老李推荐:第4章1节<MonkeyRunner源码剖析>ADB协议及服务: ADB协议概览   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试, ...

  9. SQL编程的一些良好好习惯

    |转载自:cnblog |原文链接:http://www.cnblogs.com/MR_ke/archive/2011/05/29/2062085.html 我们做软件开发的,大部分人都离不开跟数据库 ...

  10. .net md5

    今天试着写了一下MD5加密,网站注册登录估计都用到MD5,今天就把写的贴出来 public string GetMd5(string user) { using (MD5 md5 = MD5.Crea ...