你的位置:首页 > 软件开发 > 网页设计 > CSS学习总结:浮动、定位、父容器塌陷问题

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

发布时间:2017-02-27 00:00:35
怎么说呢,从接触前端起,到现在已经有三个月了,这么长时间的学习呢,我的水平依然一般,前几天参加了IFE2017,下面总结一下对CSS中浮动、定位、分列布局、父容器塌陷问题的一些心得。  首先,浮动和定位是CSS中布局的基础,通过浮动和定位,可以实现对每一个盒模型精确到像素级别的控 ...

  怎么说呢,从接触前端起,到现在已经有三个月了,这么长时间的学习呢,我的水平依然一般,前几天参加了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;

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

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。