relative布局html,CSS的四种布局方式static/relative/fixed/absolute

static

static布局是HTML元素默认的布局方式，并且static布局的元素不会受到top/left/bottom/right属性的影响。布局元素的位置即其在标准文档流中的位置。

relative

相对布局是相对其在标准文档流中的位置而言的。设置其top/left/bottom/right属性会使该元素脱离标准文档流，但是其在标准文档流中的位置依然被保留，不会被其他元素填补。

fixed

fixed布局是相对于屏幕视点进行定位的，意味着即使拖动页面滚动轴移动时，采用该布局的元素相对屏幕的位置不发生改变。

fixed布局可以使用top/left/bottom/right进行定位，采用fixed布局的元素完全脱离了标准文档流，其原来在标准文档流中的位置会被其他元素占据；

absolute

绝对定位元素是相对于其最邻近的已定位的祖先元素进行定位的。如果一个绝对定位的元素没有已定位的祖先元素，则使用document body作为已定位元素。这里所说的“已定位元素”指的是采用除了static以外的布局方式父元素，包括采用absolute定位的父元素。

relative布局html,CSS的四种布局方式static/relative/fixed/absolute相关推荐

CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
P21-前端基础-CSS颜色四种表示方式
P21-前端基础-CSS颜色四种表示方式 1.概述颜色单位: 在CSS中可以直接使用颜色名来设置各种颜色比如:red.orange.yellow.blue.green - - 但是在css中直接使 ...
html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令
在终端输入命令: $ sass --watch scss:css --style expanded 即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expa ...
CSS的四种引入方式
1.使用link标签引入css文件: <head><link rel="stylesheet" type="text/css" href=&q ...
html5引入外联样式的优先级,CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. ...
Android开发的之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
CSS+DIV三种布局方式
在学习了盒模型.块级元素和行内元素得到概念后,我们来说一下CSS的一个比较重要的用途:布局.以前我们学过表格可以起到布局页面的作用,比如布局表单,但实际工作表格的布局通常也仅仅是用来布局表单.绝大多数 ...
C#四种布局方式（网格、泊靠式面板、栈式面板、自动折行式）
C#四种布局面板利用网格将四种布局面板整合到一个窗口,讲解都在注释中,代码如下 <Grid><Grid.RowDefinitions><RowDefinition He ...
html中的分离式布局,DIV+CSS技术在网页布局中的应用
摘要信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...

relative布局html,CSS的四种布局方式static/relative/fixed/absolute

relative布局html,CSS的四种布局方式static/relative/fixed/absolute相关推荐

最新文章

热门文章