前端一些小知识点
一,主流浏览器及内核
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>
解決:只设置一个
推荐阅读