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

CSS学习总结:浮动、定位、父容器塌陷问题

作者崔晋瑜课程任务六:通过HTML及CSS模拟报纸排版3324次浏览392017-02-26 16:22
        怎么说呢,从接触前端起,到现在已经有三个月了,这么长时间的学习呢,我的水平依然一般,前几天参加了IFE2017,下面总结一下对CSS中浮动、定位、分列布局、父容器塌陷问题的一些心得。

  首先,浮动和定位是CSS中布局的基础,通过浮动和定位,可以实现对每一个盒模型精确到像素级别的控制,可见其重要性。

  先谈谈浮动:

  在HTML的文档对象模型里,采用的是流式布局,也就是说,块级元素是独占一行的,想让块级元素并排,主要是两种办法,一种是在CSS里设置块级元素的display为inline-block。但是很多时候并不适合用这种办法,更多时候我们会采用浮动的办法。

  浮动,主要有两种float:left;和float:right;浮动可以让块级元素脱离标准文档流,可以理解成为定义了浮动的元素,就要向所定义方向去移动,直到被阻挡住或者碰到了父容器边界。如果当行剩宽度不足,那么所浮动的盒子,就会浮动到下一行。浮动为实现页面布局提供了一种解决方案。

  但是,不能忽略的是,有时候通过简简单单的浮动不能达到我们对界面布局的需求。这时候定位的重要性就体现了出来,定位可以分为四种:relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、static。当我们不对元素应用定位属性时,就相当于static。

  那么,如何理解relative定位呢?应用了relative定位的元素(盒子模型)不脱离标准文档流,可以对它设定top、left、right、bottom值,实现对元素(盒子模型)相对于原来位置的微调,top即元素相对于原来的位置下移(可以设定负值,作用相当于设置正值bottom),left是元素相对于原来的位置右移。相同的,right为左移,bottom是上移。

  absolute定位:应用了absolute定位的元素会脱离文档流,好像它从来没有存在过,这时它的定位是相对于他的应用了relative定位的祖先元素而言的。而且它还有一个很重要的特性:就是会根据设定的位移值实现“跨越”,什么意思呢?就是说,对其设定top、left、right、bottom是相对于他的祖先元素(盒子)的边界而言的。如果对其设定哪个位移方向,此元素(盒子)会先移动到那个方向的边界,然后相对于边界去移动。

  fixed定位:fixed定位同样是脱离了标准文档流,不过他是相对于浏览器的窗口而言的,不会随着滚动条或者是界面的移动而改变,同样可以设定top、left、right、bottom值。

  至于分列布局,我个人常用的方法有以下几种:

  1、如果是分两列布局,可以同时对两个盒子应用浮动来进行布局,可以设定左右两个盒子自己的宽度或者是宽度百分比。

  2、同样是分两列布局,也可以对左边的盒子应用左浮动布局,对右边的盒子应用定位或者设置它的margin值来定位。

  3、对于三列布局,最好采用浮动加定位的方法,对于左右两侧的盒子进行浮动处理,对于中间元素(盒子)进行设置其左右margin来实现定位。

  必须明白的是,浮动这一伟大的创举,可能会导致父容器塌陷,也就是说,当容器内的全部元素浮动(会导致父容器高度为零)或者内部不浮动的元素不足以撑起父容器时,父容器高度会为0或者不足以满足我们对页面布局的要求,那么,我们必须想一些办法来解决这儿问题,我这有几个办法:

  1、给父容器设置一个高度

  2、设置父容器overflow:hidden或者overflow:auto;

overflow:hidden;
overflow:auto;

  3、设置父元素浮动(不推荐)

  4、设置空元素对其(clearfix:both)

  5、给父元素应用以下样式:

1 .clearfix:before,
2 .clearfix:after
3 {
4 content:"";
5 display:table;
6 }
7 .clearfix:after
8 {
9 clear:both;
10 }
  总结来说,对于给网页中元素的布局,经常需要浮动和定位一起来用,综合起来,方能达到我们需要的效果。

  以上就是我这段时间来对于CSS定位、浮动的一些小小体会,可能会有错误在里面,希望大家可以给我提出来,方便我们大家一同进步,总结这些东西,看了许多大佬的文档,所以很多东西借鉴了大佬的意见,说出来自己的一些理解,同时加深自己对其间知识体悟理解。希望大家在前端之路上一同努力,每天都有进步!

                                                                                                                                                                                                                                                                                                                                                                --小金鱼

                                                                                                                                                                                                                                                                                                                                                                2017.2.26
13条评论