CSS定位机制总结
1,CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。
2,普通流定位:块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间 距。
3,CSS position 属性
(1),static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
(2),relative:元素框相对于它原来位置偏移某个距离。它原本所占的空间仍保留。
(3),absolute:元素框从文档流完全删除,并相对于其包含块定位(离他最近的relative)。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占 的空间会关闭,就好像元素原来不存在一样。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
(4),fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
4,css浮动:动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS定位机制总结的更多相关文章
- CSS定位机制
CSS中,存在3种定位机制:标准文档流(Normal flow) * 特点:从上到下,从左导游,输出文档内容 * 由块级元素和行级元素组成 浮动(Floats) * 能够实现横向多列布局 * 设置了浮 ...
- CSS定位机制:浮动 float及清除浮动的常用方法
CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- CSS 定位机制 position
position属性W3School有详细介绍 1.(position:relative;)相对定位会按照元素的原始位置对该元素进行移动.relative 2.(position:absolute;) ...
- CSS中的三种基本的定位机制
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- CSS学习总结3:CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
随机推荐
- 动态顺序表(C++实现)
顺序表是在计算机内存中以数组的形式保存的线性表,是指用一组地址连续的存储单元依次存储数据元素的线性结构. 这样的存储方式使得线性表逻辑上相邻的元素,其在物理存储单元中也是相邻的.只要知道了第一个元素的 ...
- Nginx Rewrite语法详解
重写中用到的指令 if (条件) {} 设定条件,再进行重写 set #设置变量 return #返回状态码 return 403; break #跳出rewrite rewrite #重写 I ...
- java深入探究06
Tomcat中获取资源文件: ServletContext().getRealPath(/WEB-INF/classes/db.properties);//获取资源文件的在服务器中的绝对路径 Serv ...
- 图解Skip List——本质是空间换时间的数据结构,在lucene的倒排列表,bigtable,hbase,cassandra的memtable,redis中sorted set中均用到
Skip List的提出已有二十多年[Pugh, W. (1990)],却依旧应用广泛(Redis.LevelDB等).作为平衡树(AVL.红黑树.伸展树.树堆)的替代方案,虽然它性能不如平衡树稳定, ...
- Java丨jsoup网络爬虫模拟登录思路解析
直奔主题: 本篇文章是给有jsoup抓包基础的人看的...... 今天小编给大家写一篇对于jsoup抓包时需要输入验证码的解决方法之一.大神就绕道,嘿嘿~ 任何抓包的基础都是基于Http协议来进行这个 ...
- BZOJ2286 [Sdoi2011]消耗战 和 BZOJ3611 [Heoi2014]大工程
2286: [Sdoi2011]消耗战 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 6371 Solved: 2496[Submit][Statu ...
- nvidia-docker 安装
1.安装docker 官方网址安装说明 https://docs.docker.com/install/linux/docker-ce/ubuntu/ 2.ubuntu 14.04/16.04/18. ...
- oracle 12c 多租户 pdb 恢复(单个pdb数据文件、非系统pdb表空间、整个pdb数据库)
环境:数据库版本 Oracle Database 12c Enterprise Edition Release 12.2.0.1.0 - 64bit Production 实验准备:1.-- 数据库归 ...
- [转]angularjs的provider~ (Provider, Value, Constant, Service, Factory, Decorator)
用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄 ...
- POJ 1042 Gone Fishing( DP )
题意:小明打算做一个h((1 <= h <= 16))个小时钓鱼旅行.发现这里有n(2 <= n <= 25)个湖,而且所有的湖都在一条路的旁边.小明打算从第1个湖开始钓起,每 ...