前端知识点汇总(1)

前端知识点——五大主流浏览器及其内核

IE浏览器 内核是trident

Firefox(火狐浏览器) 内核是Gecko

Google chrome 内核是webkit/blink

Safari(苹果浏览器) 内核是webkit

opera(欧朋浏览器) 内核是presto

前端知识点——css选择器及其权重

css选择分为7种：分别是 通配符选择器/标签选择器/伪元素选择器/类名选择器/属性选择器/伪类选择器/id选择器。

css选择器权重比较

!important 权重无穷

行间样式 权重1000

id选择器 权重100

class|[属性选择器]|伪类 权重10

标签选择器|伪元素 权重1

通配符选择器 权重0

前端知识点——伪类与伪元素

伪类

伪元素

前端知识点——块级元素|行级元素|行级块元素

块级元素

特点：独占一行，可以通过css改变宽高,display:block;
举例：div p ul li ol li hr form address

行级元素

特点：内容决定元素所占位置，不可以通过css改变宽高,display:inline;
举例：span strong em a del

行级块元素

特点： 内容决定大小，可以改变宽高,display:inline-block;
举例：img

前端知识点——position的常用属性

position:absolute;绝对定位

特点：脱离原来位置进行定位，相对于最近的有定位的父级进行定位，如果没有有定位的父级，则相对于文档进行定位。

position:relative;相对定位

特点：保留原来位置进行定位，相对于自己原来的位置进行定位。

position:fixed;固定定位

特点： 固定到某一位置，不会随着页面的滚动而改变位置。

前端知识点——parseInt()函数

parseInt();可以有一个参数，也可以有两个参数。

当有一个参数的时候，执行此函数的结果就是将此参数转化为整数，此参数默认为十进制数。

当有两个此参数时，如果第一个参数是“0x”开头的，则代表是16进制的，如果第一个参数是“0”开头的，则代表是8进制的，然后将这个数转化成第二个参数的进制的。

parseInt(021,8); 第一个参数是0开头的，则这个数是8进制的，所以转化成十进制的结果就是 2*8+1=17，第二个参数是8，则需要将十进制的17转化为8进制，结果就是15.

前端知识点——浮动流

float:left/right;浮动元素产生了浮动流。

浮动元素产生了浮动流。所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性(inline)的元素以及文本都能够看法浮动元素。

清除浮动的几种方法：

触发块级元素的bfc属性。 float:left/right;position:absolute;overflow:hidden;
在浮动元素的兄弟元素上，新增一个p元素或者div元素，添加一个额clear类名，css属性为clear:both;
给浮动元素的父级添加clearfix属性，给父级的伪元素添加以下css代码，伪元素的三件套：

.clearfix::after{
	content:"";
	display:block;
	clear:both;		
}

position:absolute;float:left/right;

添加了这两种css样式的元素，可以打元素内部把元素转换成 inline-block；行级块元素的特征是L元素根据宽高改变位置，且可以通过css设置宽高。

文本元素溢出打点

单行文本溢出打点

禁止换行：white-space:nowrap;
溢出部分隐藏：overflow:hidden
文本显示为点：text-overflow:ellipsis;

多行文本溢出打点

溢出部分隐藏：overflow:hidden;
文本显示为点：text-overflow:ellipsis;
将对象作为弹性伸缩盒子模型展示：display:-webkit-box;
限制在一个块元素显示的文本的行数：-webkt-line-clamp:2;
设置或检索伸缩盒子对象的子元素的排列方式：-webkit-box-orient:vertical;

文字替换图片的方法：

html中写文字，css样式设置background-image:url(图片) no-repeat;
设置css样式。
text-indent:-9999px;文字缩进，负值则表示文字会出显示区域。
white-space:nowrap;设置文字不要换行。
overflow:hidden;溢出部分隐藏。
这样设置的结果就是，如果css出现了问题，则Html中会显示文字，如果css没有问题，则展示图片。

文字替换图片的方法2：

考虑的原理是padding中可以出现背景图片但是不能出现内容，所以可以将元素高度设置为0；padding-top设置为元素的原有高度，overflow:hidden;此时设置的文字不会展示，图片会展示，但是当css不识别的时候，只能展示为文字。