<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">< ...
随机推荐
- JAVA调用Oracle存储过程和函数
连接数据库的工具类: import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; imp ...
- 【bzoj1018】[SHOI2008]堵塞的交通traffic 线段树区间合并+STL-set
题目描述 给出一张2*n的网格图,初始每条边都是不连通的.多次改变一条边的连通性或询问两个点是否连通. 输入 第一行只有一个整数C,表示网格的列数.接下来若干行,每行为一条交通信息,以单独的一行“Ex ...
- poj 2155 Matrix (树状数组)
Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 16797 Accepted: 6312 Descripti ...
- [洛谷P4782]【模板】2-SAT 问题
题目大意:有$n$个布尔变量 $x_1 \sim x_n$,另有$m$个需要满足的条件,每个条件的形式都是"$x_i$ 为$true/false$或$x_j$为$true/false$&qu ...
- BZOJ5340 [Ctsc2018]假面 【概率dp】
题目链接 BZOJ5340 题解 我们能很容易维护每个人当前各种血量的概率 设\(p[u][i]\)表示\(u\)号人血量为\(i\)的概率 每次攻击的时候,讨论一下击中不击中即可转移 是\(O(Qm ...
- Unable to start activity ComponentInfo{com.example.administrator.myapplication/com.example.administrator.myapplication.MainActivity}: android.view.InflateException: Binary XML file line #0: Binary XM
本来就是把fragment写死在activity的xml模板里面,结果报了这个错误, Unable to start activity ComponentInfo{com.example.admini ...
- session超时设置+超时页面跳转
session超时设置,方法有三种: (1)在主页面或者公共页面中加入:session.setMaxInactiveInterval(600);参数600单位是秒,即在没有10分钟活动后,sessio ...
- 报错!!!!!!!!!!!org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'springSessionRepositoryFilter' is defined
报错!!!!!!!!!!! 因用maven项目不是很熟练,经常在Maven转Web项目(为什么要转web项目?因为要在tomcat中跑起来.maven项目好像是可以直接部署到tomcat的,或集成to ...
- 【bzoj3926- [Zjoi2015]诸神眷顾的幻想乡】广义sam
题意:给定一棵树,每个节点有一个颜色,问树上有多少种子串(定义子串为某两个点上的路径),保证叶子节点数<=20.n<=10^5 题解: 叶子节点小于等于20,考虑将每个叶子节点作为根把树给 ...
- 河南省第十届省赛 Plumbing the depth of lake (模拟)
title: Plumbing the depth of lake 河南省第十届省赛 题目描述: There is a mysterious lake in the north of Tibet. A ...