<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">< ...
随机推荐
- javascript string对象方法replace
最简单的replace用法是: var str = 'aaaaa9876b0000'; str.replace(/a/g,'A'); 有时候我们希望只是在匹配的位置添加特定的字符: var str = ...
- 在delphi中如何解决空格的问题。。。。烦死 了。。。。
我每次从数据库里面取数据出来和Edit里面的进行比较的时候总是会受到空格的困扰...老是干扰我...如果我用trim 所有都做去掉所有的空格那么这样就非常麻烦又繁琐..有没有什么方法可以忽略空格的.. ...
- 【bzoj2152】聪聪可可 树的点分治
题目描述 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况下石头剪刀布就好了,可是他们已 ...
- Java —— Reflect反射机制
JAVA反射机制是在运行时,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为java的反射机制. ...
- [bzoj2893] 集合计数
Description 一个有N个元素的集合有2^N 个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得 它们的交集的元素个数为K,求取法的方案数,答案模100000000 ...
- AtCoder Code Festival 2017 Team Relay J - Indifferent
题目大意:共$2n$个价格$p_i$.两人轮流取.你每次取最大的,对方每次随机取.问你取的期望和是多少. 题解:从小到大排序,$\sum\limits_{i=0}^{2n-1} \frac{i*p_i ...
- vue父组件中修改子组件样式
1. 使用全局样式 <style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style> 2. ...
- bzoj3196 [TYVJ1730]二逼平衡树 树套树 线段树套替罪羊树
人傻自带大常数 二分的可行性证明: 贴近他的正确答案不会被当作次优解删掉,因为,若二分在他右边发生,那么二分一定会把左边作为优解,左边同理,所以他一定是被扣掉的所以最后一个小于等于一定是正确答案 #i ...
- 你是否彻底了解margin属性?
写css,你少不了与margin打交道.你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是m ...
- taotao单点登录的用户Controller、service(注册、登录、验证是否登录方法)
接口文档: 1.1. 注册接口 1.1.1. 检查数据是否可用 请求方法 GET URL http://sso.taotao.com/user/check/{param}/{type} 参数说明 格式 ...