<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">< ...
随机推荐
- Action中使用Json
1.前台页面中的ajax: //根据部门查询该部门下的用户列表 function doSelectDept(){ //1.获取部门 var dept = $("#toCompDept opt ...
- BZOJ4424/CF19E Fairy(dfs树+树上差分)
即删除一条边使图中不存在奇环.如果本身就是个二分图当然任意一条边都可以,先check一下.否则肯定要删除在所有奇环的交上的边. 考虑怎么找这些边.跑一遍dfs造出dfs树,找出返祖边构成的奇环.可以通 ...
- AGC018C Coins (set)
题目大意: 给出n个人,每个人手里都有xi个金牌,yi个银牌,ci个铜牌. 你需要选出X个人,拿走他们手里的金牌,选出Y个人,拿走他们手里的银牌,选出Z个人,拿走他们手里的铜牌 X+Y+Z = n.并 ...
- hihocoder 1457(后缀自动机+拓扑排序)
题意 给定若干组由数字构成的字符串,求所有不重复子串的和(把他们看成十进制),答案mod(1e9+7) 题解: 类似后缀数组的做法,把字符串之间用':'连接,这里用':'是因为':'的ascii码恰好 ...
- Boosting&Bagging
Boosting&Bagging 集成学习方法不是单独的一个机器学习算法,而是通过构建多个机器学习算法来达到一个强学习器.集成学习可以用来进行分类,回归,特征选取和异常点检测等.随机森林算法就 ...
- Cannot resolve symbol ‘Component’ & Cannot resolve symbol ‘PropTypes’
import React, { Component, PropTypes } from 'react' 报错:Cannot resolve symbol 'Component' Cannot reso ...
- 使用adobe pdf去除PDF文档中的批量雷同文本
一.问题的提出 MgoSoft tiff to pdf软件没有提供中国地区的非VISA用户的购买渠道,中国通常都是银联标识走天下,卡不是VISA买不了这样的软件, 那么, MgoSoft tiff t ...
- Pycharm 创建 Django admin 用户名和密码
1. 问题 使用PyCharm 创建完Django 项目 想登录admin 页面 却不知道用户名和密码. 用的默认sqlit 2.解决办法 2.1 打开manage.py 控制界面 ...
- visio2013安装提示找不到Office.zh_cn\officeMUI.mis officemui.xml(转)
windoes10 已经安装office2013后,想安装Visio2013,报错如题所示.解决方法我采用的是方法二:解压缩office2013的ISO包,解压缩Visio2013的ISO包,安装Vi ...
- 数据仓库3级范式(3NF)基础
一.引言 最近在整理理大数据模式下的数据仓库数据模型,资料来自互联网和读过的数据仓库理论和实践相关. 二.3NF (1)1NF-无重复的列 数据库表的每一列都是不可分割的基本数据项,同一列中不能有多个 ...