css的基本定位机制
分为三种:普通流、浮动、绝对定位
普通流:默认,html文档的排列顺序块级从上到下(垂直距离由margin-top、margin-bottom决定);行内元素在一行中从左到右(由margin-left/right、padding-left/right调整水平距离) PS:相对定位属于其一部分
浮动:float元素存在占位,并未完全脱离文档流(普通流),脱离了父元素
绝对定位:彻底脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。
float和absolute的区别:
1.absolute元素是可以通过top/bottom/left/right调整自己的位置,而float元素受其他元素的影响,通过其他元素确定自身的位置
2.float元素之间在占位上是相互影响的,而absolute元素即使处于同一层,在占位上是互不影响的(absolute同级会覆盖;float会平行排列)
css的基本定位机制的更多相关文章
- CSS中的定位机制
CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...
- CSS三种定位机制
标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...
- 1.CSS中的定位机制
标准文档流(Normal flow) 特点: 从上到下,从左到右,输出文档内容 由块级元素和行级元素组成 块级元素: 从左到右撑满页面,独占一行 触碰到页面边缘时,会自动换行 块级标签: div.ul ...
- CSS中定位机制的想法
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...
- CSS有三种基本的定位机制
CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 ...
- CSS中的三种基本的定位机制
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- CSS定位机制
CSS中,存在3种定位机制:标准文档流(Normal flow) * 特点:从上到下,从左导游,输出文档内容 * 由块级元素和行级元素组成 浮动(Floats) * 能够实现横向多列布局 * 设置了浮 ...
- css的定位机制
牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
随机推荐
- Mysql 5.7 密码策略 ERROR 1819 (HY000)
Mysql 5.7 默认对用户密码有密码强度要求,如果指定弱密码,会提示如下: ERROR (HY000): Your password does not satisfy the current po ...
- Oracle索引(Index)介绍使用
1.什么是引 索引是建立在表的一列或多个列上的辅助对象,目的是加快访问表中的数据:Oracle存储索引的数据结构是B*树,位图索引也是如此,只不过是叶子节点不同B*数索引:索引由根节点.分支节点和叶子 ...
- B: Ocean的游戏(前缀和)
B: Ocean的游戏 Time Limit: 1 s Memory Limit: 128 MB Submit My Status Problem Description 给定一个字符串s, ...
- urls.py路由系统分发的本质
路由系统分发的本质 反向生成redirect跳转url 1.在urls.py中指定url的name from django.conf.urls import url from django.contr ...
- github协作开发遇到的问题
1.十一来了,帝都不好买票,30号就调休一天回去了,项目还没搞完,紧张的不行,就自己和同事搞了一个github协作开发,由于是功能和公司项目不是很沾边,但是是自己的主要工作,就和同事协调了一下,搭建了 ...
- Vs2017获取Git空仓库后创建解决方案及项目无法推送,推送失败的问题.
与Git无关,因为远程是空文件夹,导致没有远程版本做对应提示更改或怎样,必须在创建人创建仓库的时候上传文件代码. https://developercommunity.visualstudio.c ...
- [BZOJ3011][Usaco2012 Dec]Running Away From the Barn
题意 给出一棵以1为根节点树,求每个节点的子树中到该节点距离<=l的节点的个数 题解 方法1:倍增+差分数组 首先可以很容易的转化问题,考虑每个节点对哪些节点有贡献 即每次对于一个节点,找到其第 ...
- [转]Centos7 fastdfs/nginx 安装与配置
https://blog.csdn.net/alex_bean/article/details/78625131 参考文章 分布式文件系统-FastDFS 使用FastDFS搭建图片服务器单实例篇 C ...
- 3. 深入研究 UCenter API 之 加密与解密(转载)
1. 深入研究 UCenter API 之 开篇 (转载) 2. 深入研究 UCenter API 之 通讯原理(转载) 3. 深入研究 UCenter API 之 加密与解密(转载) 4. ...
- Linux基础学习(一)__后台运行Python文件
Linux 后台运行Python脚本 1.安装Python:(python 3.5.4) 2.安装Python依赖包: 2.1 处理Python更新后yum无法正常使用的问题 (错误信息: -bash ...