2024年CSS学习记录03CSS的作用及样式(1)，字节跳动网络面试

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

div {

text-align: justify;

}

2、垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

如，设置文本中图像的垂直对齐方式：

img.top {

vertical-align: top;

}

img.middle {

vertical-align: middle;

}

img.bottom {

vertical-align: bottom;

}

3、首行缩进：

h3 {

/首行缩进/

text-indent: 2em;

}

4、行高：

h3 {

/行高/

line-height: 20px;

}

5、划线：

h1 {

/下划线/

text-decoration: underline;

}

h2 {

/中划线/

text-decoration: line-through;

}

h3 {

/上划线/

text-decoration: overline;

}

3.4阴影

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

#price{

text-shadow:#3cc7f5 10px -10px 2px;

}

3.5列表

引例：

全部商品分类

• 图书  音像  数字商品
• 家用电器  手机  数码
• 电脑  办公
• 家居  家装  厨具
• 服饰鞋帽  个护化妆
• 礼品箱包  钟表  珠宝
• 食品饮料  保健食品

• 默认效果：

  

  现在，我们想更改一下样式

  #nav{

  width: 300px;

  }

  .title{

  font-size: 18px;

  font-weight: bold;

  text-indent: 1em;

  line-height: 35px;

  background: red;

  }

  ul{

  background: #cbc9c9;

  }

  ul li{

  height: 30px;

  list-style: none;

  text-indent: 1em;

  }

  a{

  text-decoration: none;

  font-size: 16px;

  color: #000;

  }

  a:hover{

  color: rgb(255,80,0);

  text-decoration: underline;

  }

  其中

  list-style：设置列表属性

  list-style:none;去掉圆点

  list-style:circle;空心圆

  list-style:decimal;数字

  list-style:square;正方形

  

  3.6背景

  引例1：

  

  默认是全部平铺的

  添加代码：

  .div1{

  background-repeat: no-repeat;

  }

  

  background-repeat 属性设置是否及如何重复背景图像。

  默认地，背景图像在水平和垂直方向上重复。

  可能的值：

  | 值 | 描述 |

  | — | — |

  | repeat | 默认。背景图像将在垂直方向和水平方向重复。 |

  | repeat-x | 背景图像将在水平方向重复。 |

  | repeat-y | 背景图像将在垂直方向重复。 |

  | no-repeat | 背景图像将仅显示一次。 |

  | inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |

  引例2：

  回到上一个列表案例，我们要在列表右侧添加箭头图片，这里推荐一个矢量图标库网站：iconfont-阿里巴巴矢量图标库

  

  

  添加箭头：

  #nav{

  width: 280px;

  }

  .title{

  font-size: 20px;

  font-weight: bold;

  text-indent: 2em;

  line-height: 35px;

  background: red url(“…/image/下箭头.png”) 240px 10px no-repeat;

  }

  ul{

  background: #cbc9c9;

  }

  ul li{

  height: 30px;

  list-style: none;

  text-indent: 1em;

  background: url(“…/image/箭头.png”) 200px 5px no-repeat;

  }

  a{

  text-decoration: none;

  font-size: 18px;

  color: #000;

  }

  a:hover{

  分享

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】