前端之CSS布局模型

2019-05-13 07:12:30来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、css布局模型:

 

  流动模型(Flow

 

  浮动模型(Float

 

  层模型(Layer

 

1、流动模型:

 

页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型;

 

2、浮动模型:

 

①.浮动属性

 

 

 

float:none(默认值,不浮动)|left(左浮动)|right(右浮动);

 

 

 

②.清除浮动

 

 

 

clear:none|both|left|right;

 

 

 

  none:默认值,允许两边有浮动

 

 

 

  both:清除左浮动和右浮动

 

 

 

  left:清除左浮动

 

 

 

  right:清除右浮动

 

 

 

注:当本元素前面有元素浮动对本元素造成了影响,给本元素添加清除浮

 

 

在网页中使用float属性进行页面布局;

 

当元素设置了float属性后,就脱离了正常的文档流;

 

3、层模型:

 

position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);

 

①.绝对定位(absolute

 

绝对定位的参照物:

 

a)是绝对定位元素的父包含块(参照物与绝对定位元素是包含与被包含的关系);

 

b) 父包含块必须具有position定位属性:

 

如果找不到满足以上两个条件的父包含块,那么相对于html,即浏览器窗口进行绝对定位

 

注:以下两种情况,元素会脱离正常的文档流,左右marginauto将会失效

 

    1)当元素设置了float属性

 

    2)当元素设置了绝对定位

 

②.相对定位(relative)

 

相对定位的参照物:

 

相对于偏移前的位置进行定位

 

相对定位不会脱离正常的文档流

 

注:relativeabsolute结合使用

 

给父元素设置relative,给子元素设置absolute,在网页布局中常这样结合使用制作一些特殊效果

 

③.固定定位(fixed

 

固定定位的参照物:屏幕窗口

 

注:a)固定定位的元素也会脱离正常的文档流

 

     b)固定定位的元素不随滚动条滚动

 

 

 

 

④、定位层叠属性设置:

 

z-index:auto|数值(一般为整数);

 

注:a)当没有设置z-index属性时,后写的元素优先显示在上层,设置后,数值越大,越靠上

 

    b) z-index也可以设置负值,设为负值时,在所有元素之下

 


原文链接:https://www.cnblogs.com/21-forever/p/10849768.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端之CSS语法及选择器

下一篇:为什么那么多自学WEB前端的后来都放弃了,总结起来就这些原因