前端一些小知识点
一，主流浏览器及内核
Chrome Webkit/blink
IE Trident
Firfox Gecko
Safari Webkit
Opera presto
二，css权重
！importent Infinity（正无穷）
行间样式 1000
id 100
class/属性/伪类 10
标签/为元素 1
通配符 0
css的优先级取决于权重，权重间的进制是256.
三，行级 块级 行级块 元素
行级元素：1内容决定元素大小 2无法通过css改变宽高（span em a strong...）
块级元素：1独占一行 2可以改变宽高 （p div ul li form address...）
行级块元素：内容决定大小 可以改变宽高 (img)
四，定位
绝对定位：absolute：脱离原来位置，以最近父级定位，如果没有以文档顶端定位
相对定位：relative：保留自己以前的位置，并且以自己以前位置定位
五，margin俩bug
1，margin-top塌陷：子div在父div中 子div margin-top无效，除非子div margin-top值大于父级的，而且此时还带动父级一起移动。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background: #000000;
}
.content{
margin-left: 50px;
margin-top: 50px;/* 这句话并不会有效 */
width: 50px;
height: 50px;
background: #008000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body></html>
父级div上边框消失了一样，给父级加上一个上边框可以解决（不可取），或者使用BFC（block formatting context 块级格式化上下文）
CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
给父级添加如上所示就能解决此问题
2，margin合并：两个并排块级元素，上块设置margin-bottom同时下块设置margin-top。两个只会一个有效。（值大的那个有效）
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.wrapper {
margin-bottom: 50px;
/* 无效 */
width: 100px;
height: 100px;
background: #000000;
}
.content {
margin-left: 50px;
margin-top: 100px;
/* 有效 */
width: 50px;
height: 50px;
background: #008000;
}
</style>
</head>
<body>
<div class="wrapper">
</div>
<div class="content"></div>
</body></html>
解決：只设置一个
六，不加载css/js情况下网站能运作的一个小例子
图片作为超链接时，网速不佳不能加载css，依然可以继续操作。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a {
display: block;
border: 1px solid black;
background: url(img/lushi.ico) 0 0 no-repeat;
width: 100px;
/* 第一种 */
/*
height: 0px;
padding-top: 100px;*/
/* 第二种*/
/*
height: 100px;
text-indent: 199px;
white-space: nowrap; */
overflow: hidden;
background-size: 100% 100%;
}
</style>
</head>
<body>
<a href="https://baidu.com" target="_blank">炉石</a>
</body></html>第一种
1，给a标签设置块级/行级块 和宽。然后高度为零（此时图片就显示不出来）。
2，然后加上padding-top就会把图片需要的位置顶出来（图片可以出现在padding中），并且把超链接文字顶出a标签范围。
3，然后overflo-hidden把文字隐藏就好了。
4，当不加载css的属性时，‘炉石’就会出现，不耽误操作。
第二种
1，给a标签设置块级/行级块 宽和高。
2，然后设置文本缩进，把‘炉石’顶出去，并设置不换行。
作者：猪翔heart
原文链接：https://www.cnblogs.com/zx3180/p/10446119.html
共同学习，写下你的评论
评论加载中...
作者其他优质文章
