总结
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
④ 链接外部样式表
你好 你好 你好
1.css
p {
color: red;
font-size: 20px;
}
=============================================================================
由单个选择器构成的
① 标签选择器
HTML
HTML
② 类选择器
HTML
HTML
③ id 选择器
HTML
HTML
④ 通配符选择器
使用 * 的定义, 选取所有的标签
HTML
HTML
① 后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素.
元素1 元素2 {样式声明}
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
代码示例1
- 你好!
- 你好!
- 你好!
代码示例2
- 你好!
- 你好!
- 你好!
代码示例3
- 你好!
- 你好!
- 你好!
② 子选择器
和后代选择器类似, 但是只能选择子标签.
元素1>元素2 { 样式声明 }
- 使用大于号分割
- 只选亲儿子, 不选孙子元素
代码示例1
- 你好
- 你好
③ 并集选择器
用于选择多组标签.
元素1, 元素2 { 样式声明 }
- 通过 逗号 分割等多个元素.
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行.
代码示例1
苹果香蕉
- 鸭梨
- 橙子
代码示例2
苹果香蕉
- 鸭梨
- 橙子
④ 伪类选择器
1) 链接伪类选择器
| 标记 | 描述 |
| :-- | :-- |
| a:link | 选择未被访问过的链接 |
| a:visited | 选择已经被访问过的链接 |
| a:hover | 选择鼠标指针悬停上的链接 |
| a:active | 选择活动链接(鼠标按下了但是未弹起) |
2) :focus 伪类选择器
选取获取焦点的 input 表单元素.
这里此时被选中的表单的字体就会变成红色
=============================================================================
① 字体设置 font-family
注: 字体的名称可以用中文,但是不建议.
你好 你好 你好
② 字体大小 font-size
你好 你好 你好
不好 不好 不好
③ 字体粗细 font-weight
| 值 | 描述 |
| :-- | :-- |
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100,200,300,400,500,
600,700,800,900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
你好 你好 你好
不好 不好 不好
④ 字体样式 font-style
| 值 | 描述 |
| :-- | :-- |
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
你好 你好 你好
不好 不好 不好
① 文本颜色 color
color 属性值的写法:
-
颜色的单词
-
#+ 8位16进制的形式 -
RGB方式
你好 你好 你好你好 你好 你好你好 你好 你好
② 文本对齐 test-align
| 值 | 描述 |
| :-- | :-- |
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
你好 你好 你好你好 你好 你好你好 你好 你好
③ 文本装饰 text-decoration
| 值 | 描述 |
| :-- | :-- |
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
你好 你好 你好
你好 你好 你好
你好 你好 你好
④ 文本缩进 text-indent
输入的属性值可以是长度单位,可以是百分比单位
注: 要是想要首行缩进2格,可以为
2em你好 你好 你好
你好 你好 你好
⑤ 行距 line-height
| 值 | 描述 |
| :-- | :-- |
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
你好
你好
你好
你好
你好
你好
① 背景颜色 background-color
你好你好你好
② 背景图片 background-image:url()
③ 背景平铺 background-repeat
| 值 | 描述 |
| :-- | :-- |
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
你好你好你好你好
④ 背景位置 background-position: x y
| 值 | 描述 |
| :-- | :-- |
| top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right | 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。 |
你好你好你好你好
⑤ 背景尺寸 background-size
属性值:
length|percentage|cover|contain你好你好你好你好
基本用法
border-radius: length;
length表示内切圆的半径,length越大,弧度越大
示例1
哈喽
生成圆形
让 border-radius 的值为正方形宽度的一半即可
哈喽
生成圆角矩形
让 border-radius 的值为矩形高度的一半即可
哈喽
展开写法
border-radius 是一个复合写法. 实际上可以针对四个角分别设置.
border-radius:2em;等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;等价于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
注: CSS 中顺序一般都是按照顺时间顺序的.
==============================================================================
常见的元素:
h1~h6pdivulolli…特点
-
独占一行
-
高度, 宽度, 内外边距, 行高都可以控制.
-
宽度默认是父级元素宽度的 100% (和父元素一样宽)
-
是一个容器(盒子), 里面可以放行内和块级元素.
代码示例
child1
注意事项
-
文字类的元素内不能使用块级元素
-
p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div
常见的元素:
astrongbemideluspan…特点
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
-
扫一扫
1186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
