css布局模型

最新推荐文章于 2024-09-23 00:52:29 发布

hamity

最新推荐文章于 2024-09-23 00:52:29 发布

阅读量335

点赞数 1

本文链接：https://blog.csdn.net/hamity/article/details/53176912

版权

css有三种布局模型流动模型（flow）浮动模型(float) 层模型(layer)

流动模型

flow是html的默认模型，特点是块状元素会在包含元素内至上而下分布，内联元素会从在包含元素内从左至右依次分布。

浮动模型

在设置块状元素的样式时，可以定义float使元素变成浮动模型。

div{width:2px;
      height:2px;
      border:2px;
      float:left;
      }

即可将该块状模型变为浮动模型并左对齐。

层模型

层模型可以精确地对元素进行定位操作，通过position来定义层模型

有三种层模型形式，分别是

绝对定位(position:absolute) 相对定位(position:relative) 固定定位(position:fixed)

绝对定位

在定义中写入(postion:absoulte),然后便可以用left,right,top,bottom来进行定位，

绝对定位会对具有定位属性的第一个父容器进行定位

相对定位

相对定位是相对于原来的位置进行定位，偏移前的位置保持不动。如

div{ width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:2px;
    top:3px;
    }

之前在这的其它元素不变，显示在以前div元素位置的后面

固定定位

fixed固定定位能够让元素固定在浏览器窗口固定位置，不随滚动条滚动而变化。

div{width:20px
      height:20px
      border:2px red solid;
      position:fixed:
      bottom:0;
      right:0;
      }

可以使div元素内容在页面右下脚随着滚动条滚动而滚动

relative和absolute

在前辈元素（父元素）中使用relative,在子元素中使用absolute即可以父元素为参照进行定位

关注