百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

一些以前不知道的知识

作者骆慧课程第五天和第六天:三种简历592次浏览12019-05-23 20:15

一.溢流(overflow)
1.auto: 当内容过多,溢流的内容被隐藏,然后出现滚动条来让我们滚动查看所有的内容。
2.hidden: 当内容过多,溢流的内容被隐藏。
3.visible: 当内容过多,溢流的内容被显示在盒子的外边(这个是默认的行为)
二.背景裁剪(background-clip)
1.border-box
背景延伸至边框外沿(但是在边框下层)。
2.padding-box
背景延伸至内边距(padding)外沿。不会绘制到边框处。
3.content-box
背景被裁剪至内容区(content box)外沿。
4.text
背景被裁剪成文字的前景色。
三.CSS 框类型(display)
1.块框( block box)是定义为堆放在其他框上的框(例如:其内容会独占一行),而且可以设置它的宽高,之前所有对于框模型的应用适用于块框 ( block box)
2.行内框( inline box)与块框是相反的,它随着文档的文字流动(例如:它将会和周围的文字和其他行内元素出现在同一行,而且它的内容会像一段中的文字一样随着文字部分的流动而打乱),对行内盒设置宽高无效,设置padding, margin 和 border都会更新周围文字的位置,但是对于周围的的块框( block box)不会有影响。
3.行内块状框(inline-block box) 像是上述两种的集合:它不会重新另起一行但会像行内框( inline box)一样随着周围文字而流动,而且他能够设置宽高,并且像块框一样保持了其块特性的完整性,它不会在段落行中断开。(在下面的示例中,行内块状框会放在第二行文本上,因为第一行没有足够的空间,并且不会突破两行。然而,如果没有足够的空间,行内框会在多条线上断裂,而它会失去一个框的形状。)
四.设置宽和高的约束
其它一些属性可以用更灵活的方式控制内容盒的大小 — 是通过设置大小约束,而不是设置一个绝对大小。这是通过属性 min-width、max-width、min-height 和 max-height 实现的。
五.完全改变盒模型( box-sizing: border-box;)
六.首字下沉
例如:
p::first-line {
text-transform: uppercase;
}

p::first-letter {
font-size: 3em;
border: 1px solid black;
background: red;
float: left;
padding: 2px;
margin-right: 4px;
}
七.清除浮动(clear)
clear 可以取三个值:
1.left:停止任何活动的左浮动
2.right:停止任何活动的右浮动
3.both:停止任何活动的左右浮动

0条评论