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

布局的学习

作者侯雨生课程第七天到第八天:学习布局668次浏览42018-05-05 17:18

定位

默认
position: static;

绝对定位
相对于最近的“positioned”祖先元素。如果绝对定位的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动

  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;

相对定位
在一个相对定位的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

  position: relative;
  width: 600px;
  height: 400px;

固定定位
一个固定定位元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。

  position: fixed;
  bottom: 0;
  right: 0;

浮动

float: right;//右
floatleft//左

clear 属性被用于控制浮动。

<div class="box">...</div>
<section>...</section>


.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

百分比宽度

  float: right;
  width: 50%;

媒体查询

@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

nline-block 布局

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

css3新属性--文字多例

.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;
}
0条评论