CSS学习笔记，大厂前端开发面试解答

最新推荐文章于 2024-09-26 10:01:01 发布

程序员8000

最新推荐文章于 2024-09-26 10:01:01 发布

阅读量723

点赞数 13

分类专栏： 2024年程序员面试文章标签： css 学习笔记

本文链接：https://blog.csdn.net/2201_75604580/article/details/136893368

版权

2024年程序员面试专栏收录该内容

13 篇文章 0 订阅

订阅专栏

}

/选中父元素，下的p元素的第二个类型/

p:nth-of-type(2){

background-color: yellow;

}

li1
li2
li3
- 结果图
3.5属性选择器（常用）

= 绝对等于

*= 包含这个元素

^= 以这个开头

$= 以这个结尾
- 代码示例
Title

1

2

3

4

5

6

7

8

9

10
- 结果展示
四、美化网页元素

=======================================================================

4.1为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引用户
- 凸显页面主题
- 提高用户体验
span标签：重点要突出的字，使用span标签括起来
Title
欢迎学习Java

4.2字体样式

4.3文本样式
1. 颜色 color rgb rgba
2. 文本对齐的方式 text-align=center
3. 首行缩进 text-indent:2em
4. 行高 line-height: 单行文字上下居中
5. 装饰 text-decoration:
6. 文本图片水平对齐：vertical-align：middle
Title
123456

123456

123456

故事介绍

天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；

而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。

太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。

然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王，这调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。

然而面对众人对哪吒的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔，他将何去何从

哪吒之魔童降世
- 结果图展示
4.4阴影

/text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色/

#price{

text-shadow: 10px 10px 2px grey;

}

4.5超链接伪类

/* 未访问的链接 */

a:link {

color: #85e9ff;

}

/* 已访问的链接 */

a:visited {

color: #00FF00;

}

/* 鼠标悬停链接 */

a:hover {

color: #FF00FF;

}

/* 已选择的链接 */

a:active {

color: #0000FF;

}

4.6列表

/ul li/

/*

list-style:

none 去掉原点

circle 空心圆

decimal 数字

square 正方形

*/

ul li{

height: 30px;

list-style: none;

text-indent: 1em;

}

4.7背景
1. 背景颜色 background-color
2. 背景图片 background-image
4.8渐变

推荐一个网站：Grabient

background-color: #4158D0;

background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

五、盒子模型

=====================================================================

5.1什么是盒子模型
- margin:外边距
W3School-外边距
- padding：内边距
W3School-内边距
- border：边框
W3School-边框
- 盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度

5.2边框
- 边框的粗细
- 边框的样式 border-style
- 边框的颜色 border-color
W3School-CSS边框颜色

5.3圆角边框

W3School-CSS圆角
Title
5.4阴影

W3School-CSS阴影

六、浮动

===================================================================

块级元素：独占一行

h1~h6 p div 列表…

行内元素：不独占一行

span a img strong…

行内元素可以被包含在块级元素中，反之，则不可以。
- display
Title
div块元素

span行内元素
- 浮动(float)
float 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
- float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。

inherit - 元素继承其父级的 float 值

父级边框塌陷的问题
- clear
none - 允许两侧都有浮动元素。默认值

left - 左侧不允许浮动元素

right- 右侧不允许浮动元素

both - 左侧或右侧均不允许浮动元素

inherit - 元素继承其父级的 clear 值
- 解决方案：
1、增加父级元素的高度(简单，元素假设有了固定的高度，就会被限制)

2、浮动元素后面增加一个空的div标签，清除浮动（简单，代码中尽量避免空div）

.clear{

clear:both;

margin:0;

padding:0;

}

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
- 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
- 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
- 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-D1BqpEbm-1710960307905)]
[外链图片转存中…(img-McEsuRGK-1710960307905)]
[外链图片转存中…(img-H06KJ90u-1710960307906)]
[外链图片转存中…(img-neJ1VnEA-1710960307906)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-vd04pOmU-1710960307906)]

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
- 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
- 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
- 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！