CSS布局模型

liangzai_cool 发布于2019-04-23 13:09 / 3244人阅读

摘要：实现相对于父元素定位参照定位的元素相对参照元素进行定位相对定位元素

css三种基本网页布局模型：流动模型（Flow）、浮动模型（Float）、层模型（Layer）

流动模型（默认状态下的模型）特点：

块状元素在所包含元素内自上而下按顺序垂直延伸分布，内联元素在所处的包含元素内从左到右水平分布

浮动模型

可以让两个块状元素并排显示 float:left float:right

层模型

让元素在网页中精确定位，像Photoshop中的图层一样对每个图层精确定位，定义position 属性

层模型三种形式：1、绝对定位（position：absolute）

2、相对定位（position：relative）

3、固定定位（position：fixed）

绝对定位：position：absolute ---将元素从文档流中拖出，使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在包含块，则相对于body元素，也就是浏览器窗口绝对定位

相对定位：position：relative --- 通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，相对于以前的位置偏离，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

固定定位：position：fixed ,不会随浏览器滚动条滚动而滚动，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

relative和absolute组合使用实现相对于其它元素进行定位

参照定位的元素必须是相对定位元素的前辈元素，参照定位的元素必须加入position:relative;定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

实现box2相对于父元素box1定位：

<div id="box1">
    <div id="box2">相对参照元素进行定位div>
div>

#box1{
    width:200px;
    height:200px;
    position:relative;        
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

GPU云服务器云服务器 css布局 css布局教程学习css布局对象模型与数据模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1497.html

浏览器内核之 CSS 解释器和样式布局

摘要：书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中，然后设置标记表明该元素需要重新计算样式，并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决...

_Dreams 2019-08-29 16:40 评论0 收藏0
浏览器内核之 CSS 解释器和样式布局

摘要：书接上文浏览器内核之解释器和模型本文剖析的解释器和样式布局。根据生成解释器类。而后将解释后的信息设置到元素的属性的样式中，然后设置标记表明该元素需要重新计算样式，并触发重新计算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号：爱写bugger的阿拉斯加如有问题或建议，请后台留言，我会尽力解决...

xiangchaobin 2019-08-23 11:50 评论0 收藏0
前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
从布局看css基础

摘要：布局学习的主要目的是为了记住各种属性么，最重要的是理解的定位机制与盒子模型。它是一个独立的渲染区域，只有参与，它规定了内部的如何布局，并且与这个区域外部毫不相干。 css布局学习css的主要目的是为了记住各种属性么？NO，最重要的是理解css的定位机制与盒子模型。接下来，从布局的角度来学习css的定位机制和盒子模型，学习之前还是先来提几个问题 1.进行css布局前为什么要学习定位...

thekingisalwaysluc 2019-08-30 10:51 评论0 收藏0