资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

css布局模型是什么

小编给大家分享一下css布局模型是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

在蓬溪等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站建设、成都网站设计 网站设计制作按需网站开发,公司网站建设,企业网站建设,成都品牌网站建设,成都全网营销推广,外贸营销网站建设,蓬溪网站建设费用合理。

流动模型（flow）

默认的网页布局模式

*块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布

*内联元素都会在所处的包含元素内从左到右水平分布显示

浮动模型（float）

任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动

两个div元素一行

div{

width:200px;

height:200px;

border:2pxredsolid;

float:left;

}

效果图

设置两个元素右浮动实现一行

float:right;

div{

width:200px;

height:200px;

border:2pxredsolid;

float:right;

}

这里写图片描述

设置两个元素一左一右

div{

width:200px;

height:200px;

border:2pxredsolid;

}

#div1{float:left;}

#div2{float:right;}

效果图

层模型（layer）

层模型三种形式：

-绝对定位(position:absolute)

-相对定位(position:relative)

-固定定位(position:fixed)

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作

1.绝对定位

position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{

width:200px;

height:200px;

border:2pxredsolid;

position:absolute;

left:100px;

top:50px;

}

效果图

2.相对定位

position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

相对于以前位置向下移动50px，向右移动100px;

#div1{

width:200px;

height:200px;

border:2pxredsolid;

position:relative;

left:100px;

top:50px;

}

效果图

3.固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{

width:200px;

height:200px;

border:2pxredsolid;

position:fixed;

left:100px;

top:50px;

}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

....

4.Relative与Absolute组合使用

相对于其它元素进行定位

1、参照定位的元素必须是相对定位元素的前辈元素：

相对参照元素进行定位

box1是box2的父元素

2、参照定位的元素必须加入position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{

position:absolute;

top:20px;

left:30px;

}

以上是“css布局模型是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


文章题目：css布局模型是什么
标题网址：http://cdkjz.cn/article/psppcp.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
和正兴机械电信机房托管服务器温江做网站成都气球装饰公司logo设计seo关键词优化成都网站推广成都LED显示屏成都申请ssl证书微博营销

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图