基本知识点 - 码农教程

Div中不同大小的图片水平垂直居中

</div>

.box{ position: relative;}

.img{ width: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);}

Jquery中的text() html() val()区别

Text() 设置或返回被选元素的文本内容

Html() 返回或设置被选元素的内容，包括标签

Val() 返回或设置被选元素的值（元素的值是通过value属性设置的，该方法大多用于input元素）

Input点击后不要出现轮廓框 outline:medium

标签前后一些小图标可以用伪类（伪类元素不能事件函数）

P::before{ content:””;

Border-style:solid;

Width: }

标签用h,去掉H的加粗用 font-weight:normal

Calc(100% - 10rem) 计算变动的宽高

Display:flex; //设置弹性布局

Justify-content:center; //水平居中

Align-items:center: //垂直居中

P块标签内容超出长度就影藏

display: block; //转换为块标签

overflow: hidden; //当前元素内的内容溢出的时候影藏溢出的部分

text-overflow: ellipsis;

white-space: nowrap;

P块标签内容显示两行超出长度就影藏

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

P标签的内容不换行时用

word-break: break-all;

input-button按钮变60秒倒计时（也可以用span标签）

var wait = 60;

function time(o) {

if(wait == 0) {

o.removeAttribute("disabled");

o.value = "获取验证码";

wait = 60;

} else {

o.setAttribute("disabled", true);

o.value = wait + "秒后重新获取";

wait--;

setTimeout(function() {

time(o)

}, 1000)

}

document.getElementById("btn").onclick = function() {

time(this);

}

标签位置在页面固定 position:fixed;

Tab标签 .hover {color: #2395FF;

border-bottom: 0.2rem solid #2395FF;

}

</ul>

</div>

$(function(){

$("#ul1 li").on("click",function(){

$(this).addClass("hover").siblings("li").removeClass("hover");

var index=$(this).index();

$("#tabs div").eq(index).show().siblings(".tab").hide()

})

css三角形 border-style:solid;

Border-color:#DCDCDC transparent transparent transparent;

页面加载后自动刷新的方法

在页面开头加上代码

function fresh() {

if(location.href.indexOf("?reload=true") < 0) {

location.href += "?reload=true";

}

setTimeout("fresh()", 50)

</script>

Input 和 textarea中的placeholder属性设置文字颜色和字号（可以在冒号前面写input和textarea）

::-webkit-input-placeholder{/*Webkit browsers*/

color:#999;

font-size:16px;

}

:-moz-placeholder{/*Mozilla Firefox 4 to 8*/

color:#999;

font-size:16px;

}

::moz-placeholder{/*Mozilla Firefox 19+*/

color:#999;

font-size:16px;

}

:-ms-input-placeholder{/*Internet Explorer 10+*/

color:#999;

font-size:16px;

}

跳转时重新打开一个页面

window.open("systemversion.html");

标签内的文本左右对齐

text-align: justify;

text-justify: inter-ideograph;

如何将一张图片自适应铺满在Html网页中?

<body

background=“这里是你要使用的图片的路径”

style=" background-repeat:no-repeat ;

background-size:100% 100%;

background-attachment: fixed;">

div{width:100%;height:100%;position:absolute;}

微信浏览器播放video自动全屏问题

微信浏览器用的是chrome的内核播放会自动将视频全屏
要解决问题需要在video标签中添加如下内容

webkit-playsinline="true"

x-webkit-airplay="true"

playsinline="true"

解决安卓部分浏览器问题的时候需要加上
x5-playsinline

P标签内的文字占两行，多余的影藏，再加省略号

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

自动换行属性

word-break: normal|break-all|keep-all;

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

Select option 后台获取到的数据显示的问题

if(jibenInfo.Records[0].cus_sex=="男"){

$('#sex option:nth-of-type(2)').attr("selected","selected");

}else{

$('#sex option:nth-of-type(1)').attr("selected","selected");

};

attr在iOS上不兼容，可以换成prop

jQuery实现删除节点（HTML代码）的用法

$("#list li").remove();

弹窗出现后自动多少秒后消失用的方法

setTimeout()

setTimeout(function(){alert("Hello"); }, 3000);

$(".underDev").click(function() {

$("#tishin").fadeIn(); //淡入效果

setTimeout(function(){ //自动多少秒后消失 $("#tishin").fadeOut(); //淡出效果

},1200)

})

原文地址：https://www.cnblogs.com/zjboke/p/11833412.html