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

Day7_8

作者彭林课程第七天到第八天:学习布局542次浏览12018-05-11 22:22

width和height:设置内容框(content box)的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其它框。
padding: 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。
border:CSS 框的边界(border)是一个分隔层,位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。
margin:外边距(margin)代表 CSS 框周围的外部区域,称为外边距,它在布局中推开其它 CSS 框。其表现与 padding 很相似;
溢流:overflow:auto: 当内容过多,溢流的内容被隐藏,然后出现滚动条来让我们滚动查看所有的内容。
hidden: 当内容过多,溢流的内容被隐藏
visible: 当内容过多,溢流的内容被显示在盒子的外边(这个是默认的行为)
背景裁剪:background-clip:border-box;padding-box;content-box;

CSS框类型:display:inline:定义为堆放在其他框上的框(例如:其内容会独占一行),而且可以设置它的宽高,之前所有对于框模型的应用适用于块框 ( block box)
block:它随着文档的文字(例如:它将会和周围的文字和其他行内元素出现在同一行,而且它的内容会像一段中的文字一样随着文字部分的流动而打乱),对行内盒设置宽高无效,设置padding, margin 和 border都会更新周围文字的位置,但是对于周围的的块框( block box)不会有影响。
inline-block:它不会重新另起一行但会像行内框( inline box)一样随着周围文字而流动,而且他能够设置宽高,并且像块框一样保持了其块特性的完整性,它不会在段落行中断开。(在下面的示例中,行内块状框会放在第二行文本上,因为第一行没有足够的空间,并且不会突破两行。然而,如果没有足够的空间,行内框会在多条线上断裂,而它会失去一个框的形状。)
2018.05.07
定位:
静态定位:默认
相对定位:position:relative; 它与静态定位非常相似,占据在正常的文档流中,除了你仍然可以修改它的最终位置,包括让它与页面上的其他元素重叠。
绝对定位:position:absolute;绝对定位的元素不再存在于正常文档布局流程中。相反,它坐在它自己的层独立于一切。 它们指定元素应距离每个包含元素的边的距离,而不是指定元素应该移入的方向。 所以在这种情况下,我们说的绝对定位元素应该位于从“包含元素”的顶部30px,从左边30px
margin: 0 auto; 水平居中,。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。】
max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

  • {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
        box-sizing: border-box;
    
    } -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。
    在一个相对定位(position属性的值为relative)的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
    一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置
    absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

.clearfix {
overflow: auto;
}
.clearfix {
overflow: auto;
zoom: 1;
}图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面!
响应式设计
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}

使用 inline-block 来布局。有一些事情需要你牢记:
vertical-align 属性会影响到 inline-block 元素,你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙

多行布局
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
float浮动,浮动的css及HTML写在前面,在浮动的css中还要加上overflow:hidden清楚浮动

0条评论