博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html进阶css(5)
阅读量:6593 次
发布时间:2019-06-24

本文共 943 字,大约阅读时间需要 3 分钟。

css定位机制

css有三种基本的定位机制:普通流,浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在html中的位置决定。

块级框从上到下一个接一个的排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使水平内边距,边框和外边距调整它们的间距。但是,垂直内边距。边框和外边框不影响行内框的高度。由一行形成的水平框称为行框。行框的高度总是足以容纳它包含的所有行内框。不过设置行高可以增加这个框的高度。

css绝对定位

绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对  定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

绝对定位的元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,(祖元素必须包裹在绝对定位元素的外部,不一定需要最近的也可以是远处的。)那么它的位置相对于最初的包含块(html)。

对于定位的主要问题是要记住每种定位的意义。

           
绝对定位

带有决对定位的标题

通过绝对定位,元素可以放置到页面上的任何位置。下面标题距离页面左侧100px,距离页面顶部150px。


css相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素相对于它的起点进行移动。

如果top设置为20px,那么框将在原位置顶部下面20像素的地方。如果left设置为30像素,那么会在元素左边创建30像素的空间,也就是将元素向右移动。但它原来所处的地方也将被保留对于配合绝对定位来讲这是一对好的搭档。

css固定定位

固定定位也属于绝对对定位的一种,使用起来非常简单。但测量需要花时间练习的。

           
固定定位

一个段落

两个段落

 

转载于:https://www.cnblogs.com/liang1/p/4915134.html

你可能感兴趣的文章
form的一个问题
查看>>
数据库操作
查看>>
samba介绍和安装
查看>>
利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
查看>>
函数的原型对象和原型链?
查看>>
js中的面向对象
查看>>
050:navie时间和aware时间详解
查看>>
如何正确地在Spring Data JPA和Jackson中用上Java 8的时间相关API(即JSR 310也即java.time包下的众神器)...
查看>>
【python】-- 函数、无参/有参参数、全局变量/局部变量
查看>>
KMP算法(AC自动机前奏)(转)
查看>>
基于WinSvr2016(TP)构建的“超融合技术架构”进阶篇
查看>>
2013喜获MVP殊荣,这个国庆不一样
查看>>
CocoStudio 1.4.0.1数据编辑器使用
查看>>
关于使用Android NDK编译ffmpeg
查看>>
跟我一起考PMP--项目人力资源管理
查看>>
【虚拟化实战】存储设计之七Block Size
查看>>
烂泥:记一次诡异的网络中断
查看>>
在 SELECT 查询中使用集运算符
查看>>
UITableView 延迟加载图片的例子
查看>>
控制IMG图片的大小缩放
查看>>