初级前端要掌握哪些知识点才能找到一个20k的工作？（一

本文链接：https://blog.csdn.net/qd520_1314/article/details/124404096

class选择器:通过特定的class（类）来查找页面中对应的标签，以 .class名称
伪类选择器::hover鼠标移入某个元素;:before在某个元素的前面插入内容;:after在某个元素的后面插入内容
群组选择器:可以对多个不同的选择器设置相同的样式

[](()选择器的优先级

当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。
通过测算那个选择器的权重值最高，应用哪一个选择器的样式
权重计算方式:

标签选择器：1

class选择器：10

id选择器：100

行内样式：1000

!important 最高级别，提高样式权重，拥有最高级别

[](()背景样式

背景颜色background-color
背景图片background-image

background-image:url(bg01.jpg);

背景图片位置background-position

background-position:10px 100px;

// 代表坐标x，y轴

背景图片重复background-repeat

background-repeat:no-repeat

// no-repeat 设置图像不重复，常用

// round 自动缩放直到适应并填充满整个容器

// space 以相同的间距平铺且填充满整个容器

背景图片定位background-attachment

background-attachment:fixed

// 背景图像是否固定或者随着页面的其余部分滚动

// background-attachment的值可以是scroll（跟随滚动），fixed（固定）

background缩写

background:#ff0000 url(bg01.jpg) no-repeat fixed center

[](()字体样式

字体族font-family

font-family:“微软雅黑”,“黑体”;

font-size:12px;

网页默认字体大小是16px

字体粗细font-weight

font-weight:400;

normal（默认）

bold（加粗）

bolder（相当于和标签）

lighter （常规）

100 ~ 900 整百（400=normal，700=bold）

字体颜色color

颜色的英文单词color:red;

十六进制色：color: #FFFF00;

RGB(红绿蓝)color:rgb(255,255,0)

RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)

字体斜体font-style

font-style:italic

normal 文本正常显示

italic 文本斜体显示

oblique 文本倾斜显示

[](()文本属性

行高line-height

line-height:50px;

可以将父元素的高度撑起来

文本水平对齐方式text-align

left 左对齐

center 文字居中

right 右对齐

文本所在行高的垂直对齐方式vertical-align

baseline 默认

sub 垂直对齐文本的下标，和_{标签一样的效果}

super 垂直对齐文本的上标，和^{标签一样的效果}

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐

文本缩进text-indent

text-indent:2em;

通常用在段落开始位置的首行缩进

字母之间的间距letter-spacing
单词之间间距word-spacing
文本的大小写text-transform

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母。

lowercase 定义仅有小写字母。

文本的装饰text-decoration

none 默认。

underline 下划线。

overline 上划线。

line-through 中线。

自动换行word-wrap

word-wrap: break-word;

[](()基本样式

宽度width

width:200px;

定义元素的宽度

高度height

height:300px

元素默认没有高度

需要设置高度

可以不定义高度，让元素的内容将元素撑高

鼠标样式cursor

定义鼠标的样式cursor:pointer

default默认

pointer小手形状

move移动形状

透明度opacity

opacity:0.3

透明度的值0~1之间的数字，0代表透明，1代表完全不透明

透明的元素，只是看不到了，但是还占据着文档流

可见性visibility

visibility:hidden;

visible 元素可见

hidden 元素不可见

collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 6. 溢出隐藏 overflow

设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

边框颜色outline

input文本输入框自带边框，且样式丑陋，我们可以通过outline修改边框

outline:1px solid #ccc;

outline:none清除边框

[](()样式重置

早期的网页没有css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。

清除元素的margin和padding

去掉自带的列表符

去掉自带的下划线

[](()盒模型样式

块状元素、内联元素和内联块状元素。

块级元素:

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

行内元素:

和其他元素都在一行上
元素的高度、宽度、行高及顶部和底部边距不可设置
元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素:

和其他元素都在一行上
元素的高度、宽度、行高以及顶和底边距都可设置。

元素分类转换display

block：将元素转换为块级元素

inline：将元素装换为行级元素

inline-block：将元素转换为内联块元素

none: 将元素隐藏

描边border

border:2px solid #f00;

线条的样式：

dashed（虚线）| dotted（点线）| solid（实线）。

css样式中允许只为一个方向的边框设置样式：

下描边border-bottom:1px solid red;

上描边border-top:1px solid red;

右描边border-right:1px solid red;

左描边border-left:1px solid red;

间距margin

div{margin:20px 10px 15px 30px;}

内填充padding

padding:10px

[](()浮动float

浮动原理

浮动使元素脱离文档普通流，漂浮在普通流之上的。
浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。

清除浮动带来的影响

clear 清除浮动：

none : 不清除（默认值）。

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许两边有浮动对象

利用伪类实现清除浮动

.clearFix {

content=“”;

display:block;

width:0;

height:0;

clear:both;

}

[](()定位position

定位功能可以让布局变的更加自由。
层模型–绝对定位（相对于父类）

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

#box_relative {

position: absolute;

left: 30px;

top: 20px;

}

如下图所示：

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

层模型–相对定位（相对于原位置）

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

#box_relative {

position: relative;

left: 30px;

top: 20px;

}

如下图所示：

如果想为元素设置层模型中的相对定位，需要设置position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

层模型–固定定位（相对于网页窗口）

position:fixed

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。