解决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;
}
05-11 18:09
查看更多