CSS基础-4 定位
CSS定位和浮动
css定位：改变页面的位置
定位机制有以下三种
普通流
浮动
绝对布局
定位的属性：
position：把元素放在一个静态的、相对的、绝对的、或固定的位置中
top 元素向上偏移
left 元素向左偏移
right 元素向右偏移
bottom 元素向下偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素的显示的形状
vertical-align 设置元素的垂直对齐方式
z-index 设置元素的堆叠顺序 （和图片的至于顶层和顶层效果 相同，数字越大， 就越处于顶层）
position属性
static （静态的）偏移量对static无效
absolute （绝对定位）
脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点
relative（相对定位）
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。具体案例如下：
fixed （固定定位）
例子:
absolute 绝对定位例子
定义好样式
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.juedui {
width:100px;
height:100px;
background:blue;
}
</style>
<body >
<div class="juedui">
</div>
</body>
效果如下: 左上都处于浏览器的最边缘
然后我们在css样式中加入绝对定位。
.juedui {
width:100px;
height:100px;
background:blue;
position:absolute;
top:100px;
left:100px;
}
这种绝对定位是单个盒子的时候，没有div嵌套。那么盒子的绝对位置是跟据浏览器为基准定位的。
例子2：
在div嵌套中，如果一个元素的父元素设置了定位，那么子元素设置定位以父元素左上角为基准设置定位。
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.waibu {
width:400px;
height:400px;
background:aqua;
position:absolute;
top:100px;
left:100px;
}
.juedui {
width:100px;
height:100px;
background:blue;
position:absolute;
top:100px;
left:100px;
}
</style>
<body>
<div class="waibu">
<div class="juedui">
</div>
</div>
</body>
效果如下图。
relative相对位置例子：
.xiangdui {
height:50px;
background:aqua;
}
.xiangdui2 {
height:100px;
width:100px;
background:blue;
position:relative;
top:100px;
left:100px;
}
<div class="xiangdui"></div>
<div class="xiangdui2"></div>
没有加相对位置标签以前的效果如下 添加完相对位置后效果如下：
div元素出现的位置是相对于自己应该出现位置移动的。
CSS基础-4 定位的更多相关文章
- CSS 基础：定位元素(3)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- css基础回顾-定位：position
w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- css基础不扎实
写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...
- （转）CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
随机推荐
- Android,iOS系统有什么区别
两者运行机制不同:IOS采用的是沙盒运行机制,安卓采用的是虚拟机运行机制.Android是一种基于Linux的自由及开源的操作系统,iOS是由苹果公司开发的移动操作系统IOS中用于UI指令权限最高,安 ...
- 【Linux】【Commands】文本查看类
分屏查看命令:more和less more命令: more FILE 特点:翻屏至文件尾部后自动退出: less命令: less FILE head命令: 查看文件的前n行: head [option ...
- excel数据导入mySql数据库
1.将excel数据保存好 2.打开数据库,在表上点击右键,选择导入向导 3.点击下图中红色部门,点击下一步 4.选择excel文件的位置,下方的表空间内,会出现excel中的sheet页,选择要导入 ...
- 使用matplotlib中的bar函数绘制柱状图
使用柱状图显示三日电影的票房信息 要显示的数据为2018年12月7日-9日四场电影的票房信息 四场电影分别为:无名之辈,狗十三,毒液:知名守卫者,憨豆特工3 2018年12月7日四场电影票房分别为:[ ...
- Java动态脚本Groovy，高级啊！
前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 简介: Groovy是用于Java虚拟机的一种敏捷的动态语言,它是一种成熟的面向对象编程语言,既可以用于面向对象编程,又可以用作纯粹的脚 ...
- C++STL标准库学习笔记（二）二分查找
二.STL中的二分查找算法 1.binary_search 2.lower_bound 3.upper_bound 记得#include<algorithm>! 前言: 在这个笔记中,我把 ...
- 解放双手，自动生成“x.set(y.get)”，搞定vo2dto转换
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 给你机会,你也不中用啊 这些年从事编程开发以来,我好像发现了大部分研发那些不愿意干的 ...
- java多线程7：ReentrantReadWriteLock
真实的多线程业务开发中,最常用到的逻辑就是数据的读写,ReentrantLock虽然具有完全互斥排他的效果(即同一时间只有一个线程正在执行lock后面的任务), 这样做虽然保证了实例变量的线程安全性, ...
- ANTLR 语法设计
下面学习如何编写语法. 如何定义语法规则 一种语言模式就是一种递归的语法结构. 我们需要从一系列有代表性的输入文件中归纳出一门语言的结构.在完成这样的归纳工作后,我们就可以正式使用ANTLR语法来表达 ...
- LuoguP5690 [CSP-S2019 江西] 日期 题解
Content Alice 在纸上写下了一个日期,形式为 \(\text{MM-DD}\),其中 \(\text{MM}\) 与 \(\text{DD}\) 都是两位数字,分别表示月和天,然而这个日期 ...