第五课《三种简历》-CSDN博客

一、理解框模型

框属性：width、height、padding、border、margin
溢流 overflow 的处理方式：
1. auto:当内容过多，溢流的内容被隐藏，然后出现滚动条来查看所有的内容
2. hidden:当内容过多，溢流的内容被隐藏
3. visible:当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）
处理背景剪裁的属性 background-clip：
1. border-box：背景延伸到边框外沿（但是在边框之下）
2. padding-box：边框下面没有背景，即背景延伸到内边距外沿
3. content-box：背景裁剪到内容区外沿
4. text：背景被裁剪为文字的前景色
处理框宽高尺寸的属性 box-sizing：
1. content-box：是默认值。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中
2. border-box：告诉浏览器去理解设置的边框和内边距的值是包含在width内的。也就是说，如果将一个元素的 width 设为100px，那么这100px会包含其它的 border 和 padding ，内容区的实际宽度会是 width 减去 border + padding 的计算值
框类型：
1. 块框：定义为堆放在其他框上的框（例如：其内容会独占一行），可以设置它的宽高
2. 行内框：与块框是相反的，它随着文档的文字流动（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内框设置宽高无效，设置 padding, margin 和 border 都会更新周围文字的位置，但是对于周围的的块框不会有影响
3. 行内块框：它不会重新另起一行但会像行内框一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开
outline 属性：看起来像边框，但是它不是框模型的一部分，不会修改框的大小（具体来说，ouline 是画在边框之外，外边距区域之内）
设置宽和高约束的方式：min-width、max-width、min-height、max-height

二、理解浮动（一）

浮动的工作方式：浮动元素会脱离正常的文档布局流，并吸附到其父容器的某一侧。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其另一侧的空间
清除浮动属性 clear：这个元素和源码中后面的元素将不浮动，除非稍后将一个新的 float 声明应用到此后的另一个元素。取值为 left/right/both，表示停止任何活动的左侧/右侧/左右两侧浮动
学习了两列布局和三列布局的实现方式
浮动的问题及解决方法：
1. 整个宽度难以计算，为每一列增加 margin、border、padding 属性时会增加宽度，使总宽度溢出破坏了布局结构。可以将 box-sizing 属性设置为 border-box 解决
2. 由于浮动元素脱离于正常文档流存在，因此他们在父元素中所占高度为0，而且非浮动元素不能通过增加外边距的方式来和浮动元素创造空间。解决办法为在想要清除的浮动之后添加一个看不见的“clearfix div”

三、学习了百度的编码规范

四、完成了第五课的编码任务，依据设计稿实现一份html文档，三份css样式

总结：

原本是几天的课程，由于期间的春节假期耽搁了许久，今天总算完成了！这节课给我的感觉是很基础但是很重要的一节课，很多内容需要去深究最终的原理，我想他们应该都可以在官方文档那些晦涩却严谨的句子里找到答案。目前实现一般的设计稿困难不大，但是实现的方法有很多种，我使用的不一定是最优的那一个，另外写样式表总感觉没有很清晰的逻辑性，接下来还需要多了解一些这方面的经验或者标准。