Html / CSS常见问题 解决方案
解决Safari下input光标过大
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; }
CSS绘制三角形
.caret { width: 0; height: 0; 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: 1; /*解决ie兼容问题*/ }
2.父元素后添加伪元素
.clearfix:after { content: ''; display: block; height: 0; 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: 0; 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; }