前端知识点汇总(1)

不念不忘少年蓝@ 2021-07-25 23:09 566阅读 0赞

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

##### 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 #####

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

## 伪类 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

## 伪元素 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

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

## 块级元素 ##

特点：**独占一行**，可以通过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不识别的时候，只能展示为文字。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/5eda646d8f464fdc8d6fe1d3bfff75b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/953cddfc091544c594664bf0a8046468.png