解决Safari下input光标过大

input {
line-height: normal;
}

设置浮层

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

CSS绘制三角形

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

文字超出显示省略号

/*<p class='text-ellipsis'></p>*/
.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

清除浮动

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

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

2.父元素后添加伪元素

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

3.同样可以使用如下方式(兼容IE)

.clearfix:after {
content: '';
display: table;
clear: both;
}
注:使用 display: block/table;是因为定义 display 为 block 或 table 的元素前后会自动添加换行符。(HTML DOM display 属性
4.在浮动元素后添加 div.clear
.clear {
clear: both;
height:;
overflow: hidden;
}

5. 在浮动元素后面添加 br 元素

<br clear="all">

注意:

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书写顺序

/* 位置属性 */
position, top, right, z-index, display, float /* 大小 */
width, height, padding, margin /* 文字系列 */
font, line-height, color, text-align /* 背景 */
background, border /* 其他 */
animation, transition

锚点链接

h5中使用 id 作为锚点链接,如下:

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

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

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

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

判断有无滚动条

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;
}

Html / CSS常见问题 解决方案的更多相关文章

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

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

  2. CSS常见问题及兼容性

    CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script>  ; ; ;                    ;;;};;;;;;;;       ...

  3. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  4. JWT 身份认证优缺点分析以及常见问题解决方案

    本文转载自:JWT 身份认证优缺点分析以及常见问题解决方案 Token 认证的优势 相比于 Session 认证的方式来说,使用 token 进行身份认证主要有下面三个优势: 1.无状态 token ...

  5. CSS 常见问题笔记

    CSS 常见问题 布局 一.盒模型宽度计算 问题:div1 的 offsetWidth 是多少? <style> #div1 { width: 100px; padding: 10px; ...

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

    1. 解决Safari下input光标过大   2. 设置浮层   3. CSS绘制三角形   4. 清除浮动   1) 浮动元素父级添加样式   2) 父元素后添加伪元素     3) 同样可以使用 ...

  7. web移动端常见问题解决方案 (转)

    总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...

  8. 移动端web常见问题解决方案

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...

  9. CSS Bugs 解决方案

    说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 Bugs及解决方案列表(以下实例默 ...

随机推荐

  1. LightOJ1326 Race(DP)

    题目问N匹马比赛有多少种结果.一开始想用排列组合搞搞,然后发现想错了.艰难地把思路转向DP,最后AC了. dp[i][j]表示前i匹马确定出j个名次的方案数 dp[1][1]=1 对于第i匹马,它要确 ...

  2. HDU 1241 (DFS搜索+染色)

    题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=1241 题目大意:求一张地图里的连通块.注意可以斜着连通. 解题思路: 八个方向dfs一遍,一边df ...

  3. robotium 新建 android 测试项目:

    注意:新建项目后再运行前一定要修改Manifest文件中的instrumentation 中的target package, 这个是测试的入口 1. 程序开始要通知系统我要测的app是什么 如何知道a ...

  4. 【NOI2015】荷马史诗

    追逐影子的人,自己就是影子. ——荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷马史诗>.但是由<奥德赛>和& ...

  5. NOIP201103瑞士轮

    试题描述 [背景]在双人对决的竞技性比赛,如乒乓球.羽毛球.国际象棋中,最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少,每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较低,但比赛过程 ...

  6. SQL中distinct的用法(转自博主:Rain Man)

    在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出不同(distinct)的值.关键词 distinct用于返回唯一不同的值. 表A: 示例1 select distinct nam ...

  7. NSString、NSMutableString基本用法

    NSString其实是一个对象类型.NSString是NSObject(Cocoa Foundation的基础对象)的子类 一.NSString的创建 1.创建常量字符串.NSString *astr ...

  8. 我对Java的java.lang.Class这个类的深入理解

    类是对同一类事物的描述,字段具体的值只有到类实例化时才会指定,静态字段除外.所有的类也是同一类事物,用Class这个类来描述.Class类与String.Person等类是同一个级别的.java的字节 ...

  9. VSS错误自动修复

    公司项目开发源代码管理一直用vss,从vss6.0用到vss8.0(vss2005),在近两年的试用中碰到一些大大小小的问题:1:vss服务迁移,这个比较好办,直接将整个vss目录拷贝过去,加上相应的 ...

  10. 【新产品发布】《GM1001 4~20mA 高精度电流采集模块》

    一.主要特性 1.测量精度高达±0.01%FS±0.002mA: 2.采样电阻仅10欧姆(20mA时压降仅0.2V),对被测系统影响  微乎其微: 3.差分输入,可测量正反电流无需改动硬件,使用方便: ...