Html / CSS常见问题 解决方案
解决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常见问题 解决方案的更多相关文章
- XHTML CSS 常见问题和解决方案
原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...
- CSS常见问题及兼容性
CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script> ; ; ; ;;;};;;;;;;; ...
- 使用jquery.qrcode生成二维码及常见问题解决方案
转载文章 使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...
- JWT 身份认证优缺点分析以及常见问题解决方案
本文转载自:JWT 身份认证优缺点分析以及常见问题解决方案 Token 认证的优势 相比于 Session 认证的方式来说,使用 token 进行身份认证主要有下面三个优势: 1.无状态 token ...
- CSS 常见问题笔记
CSS 常见问题 布局 一.盒模型宽度计算 问题:div1 的 offsetWidth 是多少? <style> #div1 { width: 100px; padding: 10px; ...
- 分针网—IT教育: Html / CSS常见问题的解决方案
1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用 ...
- web移动端常见问题解决方案 (转)
总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...
- 移动端web常见问题解决方案
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...
- CSS Bugs 解决方案
说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 Bugs及解决方案列表(以下实例默 ...
随机推荐
- BZOJ3570 : DZY Loves Physics I
考虑两个质量均为m,速度分别v1.v2的小球发生完全弹性碰撞的影响: 由动能守恒得: $\frac{1}{2}mv_1^2+\frac{1}{2}mv_2^2=\frac{1}{2}mv_1'^2+\ ...
- CC150 - 11.2
Question: Write a method to sort an array of strings so that all the anagrams are next to each other ...
- POJ 2948 Martian Mining(DP)这是POJ第200道,居然没发现
题目链接 两种矿石,Y和B,Y只能从从右到左,B是从下到上,每个空格只能是上下或者左右,具体看图.求左端+上端最大值. 很容易发现如果想最优,分界线一定是不下降的,分界线上面全是往上,分界线下面都是往 ...
- [转]Redis集群的配置
一:memcache 和 Redis 对比总结 [memecache 特点] 1:速度最快(没有自测,但网上有详细的测试用例) 2:支持水平扩展,可以任意添加节点 [redis 特点] 1:速度没有m ...
- Win2K3一句话开3389
网上流传了很多开3389的exe小工具,还有读写注册表的bat批处理,有的是操作注册表,有的是操作各种组件这里提供一个不会被拦截,而且可以使用的开3389的cmd一句话: wmic RDTOGGLE ...
- 找到n中最小的k个数
题目:n个数中,求最小的前k个数. 这道题在各个地方都看到过,在国内出现的频率也非常高. 面完阿里回来听说这道题又被考了,所以还是决定回来写一写,对于这种高频题...顺便再吐槽一下阿里的面试,我竟然一 ...
- sql 语句大小写的问题
关键字不区分大小写 例如 select ,from, 大小写均可 标识符区分大小写 例如 表名,列名 标识符如果不加双引号,默认是按大写执行 标识符如果加双引号,则是按原始大小写执行 但是,当表名加上 ...
- HP StorageWorks MSL2024 Tape Libraries - Tape library Error Codes
Main error codes Error Code Description Details and Solution 80 Can not initialize bar code reader P ...
- MySql之JDBC环境
JAVA连接MySql数据库 JDBC对JAVA程序员而言是一套API "========" SQL语法 JDBC相关知识 jar命令的使用 异常的捕获和处理(Exception- ...
- PAT天梯赛练习题 L3-002. 堆栈(线段树查询第K大值或主席树)
L3-002. 堆栈 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有 ...