CSS中的定位机制
CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)
普通文档流
就是CSS中默认的文本文档
普通流中，元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，行内元素在一行中水平布置
浮动
- 所有主流浏览器都支持 float 属性，给元素设置 float 样式 ,元素会脱离文档流 ,浮动的元素可以左右移动，直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘。
- CSS 中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素,行内元素和行内块元素会围绕浮动框排列，块元素会被覆盖。
- 在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
- 他可取三个值:
| eft | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
案列：
div{
float: left; /* 左浮动 */
}
定位
- 所有主流浏览器都支持 position 属性，给元素设置position属性可以规定元素的定位类型。
- 任何元素都可以定位。除静态定位以外,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- 他可取四个值:
| absolute |
绝对定位，相对于 static 定位以外的第一个父元素进行定位。 (子绝父相 :绝对定位相对于父元素设置了除静态定位以外而定位,如果父级没有设置定位他会一层层向上寻找有定位的祖级 直到body元素) |
| fixed |
绝对定位，相对于浏览器窗口进行定位。 |
| relative |
相对定位，相对定位看作普通流的一部分，移动后的元素仍占据原来的位置，移动元素会导致他覆盖其他的框。 |
| static | 默认值。没有定位。 |
子绝父相 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
position: relative; /*相对定位*/
width: 400px;
height: 400px;
background: yellow;
margin: 200px auto;
}
.son {
position: absolute; /*绝对定位*/
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background: skyblue;
}
</style>
</head>
<body>
<div class="father"> 父盒子
<div class="son">子盒子</div>
</div>
</body>
</html>
CSS中的定位机制的更多相关文章
- 1.CSS中的定位机制
标准文档流(Normal flow) 特点: 从上到下,从左到右,输出文档内容 由块级元素和行级元素组成 块级元素: 从左到右撑满页面,独占一行 触碰到页面边缘时,会自动换行 块级标签: div.ul ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- 对css中的定位属性postion刨根解牛
定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS三种定位机制
标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- css中元素定位
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...
随机推荐
- 规划ASM DISK GROUP、查看asm 磁盘当前状态、mount or dismount 磁盘组、检查磁盘组 metadata 的内部一致性
规划ASM DISK GROUP: 1. 每个磁盘组里的磁盘应该大小.性能.新旧等一致,不能有太大差距 2. 对database files 和 fast recovery area 分别创建不同的d ...
- AtCoder Grand Contest 028 A：Two Abbreviations
题目传送门:https://agc028.contest.atcoder.jp/tasks/agc028_a 题目翻译 给你两个串\(s\)与\(t\),长度分别为\(n,m\).问你存不存在一个串长 ...
- Java面试知识点总结（1）
1.Java中的原始数据类型都有哪些,它们的大小及对应的封装类是什么? 原始数据类型 大小(byte) 对应封装类型 boolean 1或4 Boolean byte 1 Byte short 2 S ...
- java注解总结（1）
1.什么是注解 注解,主要提供一种机制,这种机制允许程序员在编写代码的同时可以直接编写元数据. 2.介绍 何为注解?--->元数据:描述数据自身的数据. 注解就是代码的元数据,他们包含了代码自身 ...
- 《SpringBoot揭秘 快速构建微服务体系》读后感（一）
SpringIOC IOC有两种方式:一种是DI,另一种是DL,即Dependency Lookup(依赖查找).前者是当前软件实体被动接受其依赖的其他组件被IoC容器注入,而后者则是当前软件实体主动 ...
- go开发环境搭建及开发工具简介
go语言包的下载地址:https://www.golangtc.com/download 这里以window10的操作系统环境为例 go的开发工具下载地址:https://www.golangtc.c ...
- MySQL数据库基础详解(非原创）
文章大纲 一.数据库简介二.Mysql数据库简介三.Mysql安装与服务启动(Windows版本)四.Mysql图形化工具五.Mysql存储引擎精讲六.Mysql数据类型介绍七.Mysql主要专业名称 ...
- php curl采集，服务器gzip压缩返回数据怎么办
一般服务器不会胡乱返回gzip压缩的数据,一般是客户端请求的头部里包含你浏览器能接受的压缩方式, Accept-Encoding:gzip,deflate,sdch 这里是gzip .deflat ...
- 纯CSS，多个半圆以中心点旋转
效果图: html代码: <div style=" background:#000; position: relative; width:300px; height:300px;&qu ...
- poj2241 The Tower of Babylon
The Tower of Babylon 题意:给你n种石头,长x,宽y,高z,每种石头数目无限,一块石头能放到另一块上的条件是:长和宽严格小于下面的石头.问叠起来的最大高度. /* 有些类似“叠箱子 ...