<div>之定位
在使用盒子模型的过程中,如何放置各种类型的“盒子”,就存在定位、浮动等问题。下面就日常运用过程中出现过的情况总结如下(陆续加入中....)
在<div>配合使用<img>的过程中,如果在<div>中直接使用<img>,就不存在指定<div>的高度及宽度的问题,因为<img>作为行级元素,根据其自身的情况(高度及宽度)能够占有一部分空间,这样就能够正常显示。如果图片不做为一个单独的元素,而是做为<div>的一个属性——背景图片来进行处理,就必须指定高度及宽度(此时的高度及宽度均为0px)。
元素通过float后,虽然脱离了文档流(也就是不受html的从上到下、从左至右的一个文档顺序),但是它还是存在一个显示、定位的问题。特征一:浮动元素的定位与普通元素的定位一样,还是基于正常的文档流,从文档流抽出后尽可能的移动至左边或者右边;特征二:文字内容会围绕在它周围(其它块级元素会处在它的下面,行级元素围绕在它的周围);特征三:在文档流中的其它元素会填补它的位置。
基于以上特征,在进行float后,再进行positoin定位,根据需要,选择absolute、fix、relative中的一种方式。
<div>之定位的更多相关文章
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- (转)CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
- 实现 DIV 固定定位在网页主体部分最右侧
position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...
- div+css 定位浅析
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果. 先看下各个属性值的定义 ...
- div的定位
父DIV设置为相对定位,子DIV设置为绝对定位.<div style="height:158px; width:158px; position:relative;"> ...
- Div+CSS 定位 Position
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). position: static;HTML 元素默认情况下的定 ...
- 将一个div始终定位在屏幕中心
//div的id为box #box{ width:200px; heighti:200px; border:1px solid #f00; //重点是以下规则 position:absolute; t ...
- div 滚动定位代码
var thisheith; $(function () { var divid = '#14681-121320-197209'; $(di ...
- 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位
HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...
随机推荐
- setcookie函数
在任何请求的服务器响应都会有个头部,默认情况下,头部发送动作会在第一个输出发生时触发,如echo,<html>.(注:php有个header方法手动发送原生header) 由于setcoo ...
- 使用锚点在HTML页面中快速移动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SRM707 div1 MultiplyAddPuzzle
题目大意:给定4个数,s,t,a,b 每次可以将s加a或者乘b,问最少多少次可以得到t 做法:考虑最后的形式,肯定是s*b^n + a*f(b),f(b)是关于b的多项式 那么b乘多少次实际上是可以知 ...
- Codeforces Round #392 (div.2) E:Broken Tree
orz一开始想不画图做这个题(然后脑袋就炸了,思维能力有待提高) 我的做法是动态规划+贪心+构造 首先把题目给的树变成一个可行的情况,同时weight最小 这个可以通过动态规划解决 dp[x]表示以x ...
- 【电影影评】梦之安魂曲-败给了BGM和豆瓣影评
首先,这部电影豆瓣8.7分,一般来说,豆瓣的打分是比较准确的.能反映一个片子的质量,而较少受到环境的影响.但是这种关系当然也不全对,比如某些片子可能特别让某一种人喜欢(如退役军人和军旅题材),而在某些 ...
- CF858F Wizard's Tour 解题报告
题目描述 给定一张 \(n\) 个点 \(m\) 条边的无向图,每条边连接两个顶点,保证无重边自环,不保证连通. 你想在这张图上进行若干次旅游,每次旅游可以任选一个点 \(x\) 作为起点,再走到一个 ...
- oracle数据库导入导出方法
Oracle Database 10g以后引入了最新的数据泵(Data Dump)技术,使DBA或开发人员可以将数据库元数据(对象定义)和数据快速移动到另一个oracle数据库中. 数据泵导出导入(E ...
- POJ1417:True Liars(DP+带权并查集)
True Liars Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- windows远程桌面访问ubuntu12.04
转载自 : http://blog.csdn.net/shuzui1985/article/details/7592569 1.dashboard----桌面共享 我们共享所使用的协议是rdp,所以我 ...
- eclipse调试java技巧
详细内容请看: http://www.oschina.net/question/82993_69439