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

布局

作者戈源课程第七天到第八天:学习布局155次浏览12018-08-30 19:33

float

<!--float:left;width:30%-->
<!--<br> 父div固定了width: 100%;height: 75px;-->
```

<p>1、实现一个两栏布局,左侧占30%宽度,右侧占70%宽度</p>

<div style="width: 100%;height: 75px;">

<div style="float: left;width: 30%;height: inherit;background-color: red">

<!--float:left;width:30%-->

<!--<br> 父div固定了width: 100%;height: 75px;-->

</div>

<div style="float: left;width: 70%;height: inherit;background-color: #00bbee">

    <!--..float:left;width:70%-->

</div>

</div>


### float+margin
实现一个两栏布局,左侧固定宽度,右侧根据浏览器宽度进行自适应变化

左侧:width=30%,height=75px;float= left
右侧:margin-right: 0px;margin-left: 30%;height: inherit
右侧通过定义margin外边框的与左边距离,与右边的距离,自适应变化
```

position

实现一个两栏布局,右侧固定宽度,左侧根据浏览器宽度进行自适应变
设置了position:absolute要结合right,left,top,bottom使用

最外层的div,即父div要position:relative,这样子div会在父div的范围内定位。子div要设置position:absolute
父div:width=100%;height=75px;position=relative
子div:

  •   左侧divheight: inherit;position: absolute;right: 30%;top: 0px ;left: 0px;
    
  •   右侧divwidth: 30%;height: inherit;position: absolute;right: 0px;top: 0px;
    

flow+position+margin

flow分为 块元素、行内元素
这里更详细

0条评论