零基础学院第五天和第六天 | http://ife.baidu.com/course/detail/id/40 |
---|---|
code | https://github.com/iCycloid/IFE2018/tree/master/4and5 |
预览效果 | https://icycloid.github.io/IFE2018/4and5/resume.html |
盒模型的概念 |
---|
给元素内容添加内边距、边界和外边距来布置单个元素的盒子 |
inline、block和inline-block的概念 |
块框( block box)是定义为堆放在其他框上的框(例如:其内容会独占一行),而且可以设置它的宽高,之前所有对于框模型的应用适用于块框 ( block box)行内框( inline box)与块框是相反的,它随着文档的文字(例如:它将会和周围的文字和其他行内元素出现在同一行,而且它的内容会像一段中的文字一样随着文字部分的流动而打乱),对行内盒设置宽高无效,设置padding, margin 和 border都会更新周围文字的位置,但是对于周围的的块框( block box)不会有影响。行内块状框(inline-block box) 像是上述两种的集合:它不会重新另起一行但会像行内框( inline box)一样随着周围文字而流动,而且他能够设置宽高,并且像块框一样保持了其块特性的完整性,它不会在段落行中断开。(在下面的示例中,行内块状框会放在第二行文本上,因为第一行没有足够的空间,并且不会突破两行。然而,如果没有足够的空间,行内框会在多条线上断裂,而它会失去一个框的形状。)默认状态下display属性值,块级元素display: block ,行内元素display: inline |
内外边距,宽度,高度,box-sizing等属性 |
![]() |
浮动,清除浮动 |
clear: both;(待补充) |
如何使用浮动进行布局 |
多列布局(liquid layout),固定宽度布局(fixed width layout) |