欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端之CSS布局模型

程序员文章站 2022-07-01 23:19:15
一、css布局模型: 流动模型(Flow) 浮动模型(Float) 层模型(Layer) 1、流动模型: 页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型; 2、浮动模型: ①.浮动属性 float:none(默认值,不浮动)|left(左浮动)|right ......

一、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也可以设置负值,设为负值时,在所有元素之下