在使用盒子模型的过程中,如何放置各种类型的“盒子”,就存在定位、浮动等问题。下面就日常运用过程中出现过的情况总结如下(陆续加入中....)

一、图片直接做<div>的背景

在<div>配合使用<img>的过程中,如果在<div>中直接使用<img>,就不存在指定<div>的高度及宽度的问题,因为<img>作为行级元素,根据其自身的情况(高度及宽度)能够占有一部分空间,这样就能够正常显示。如果图片不做为一个单独的元素,而是做为<div>的一个属性——背景图片来进行处理,就必须指定高度及宽度(此时的高度及宽度均为0px)。

二、浮动元素的定位

元素通过float后,虽然脱离了文档流(也就是不受html的从上到下、从左至右的一个文档顺序),但是它还是存在一个显示、定位的问题。特征一:浮动元素的定位与普通元素的定位一样,还是基于正常的文档流,从文档流抽出后尽可能的移动至左边或者右边;特征二:文字内容会围绕在它周围(其它块级元素会处在它的下面,行级元素围绕在它的周围);特征三:在文档流中的其它元素会填补它的位置。

基于以上特征,在进行float后,再进行positoin定位,根据需要,选择absolute、fix、relative中的一种方式。

<div>之定位的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. (转)CSS+DIV float 定位

    来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...

  3. 实现 DIV 固定定位在网页主体部分最右侧

    position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...

  4. div+css 定位浅析

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果. 先看下各个属性值的定义 ...

  5. div的定位

    父DIV设置为相对定位,子DIV设置为绝对定位.<div style="height:158px; width:158px; position:relative;"> ...

  6. Div+CSS 定位 Position

    position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). position: static;HTML 元素默认情况下的定 ...

  7. 将一个div始终定位在屏幕中心

    //div的id为box #box{ width:200px; heighti:200px; border:1px solid #f00; //重点是以下规则 position:absolute; t ...

  8. div 滚动定位代码

    var thisheith;        $(function () {            var divid = '#14681-121320-197209';            $(di ...

  9. 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

    HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...

随机推荐

  1. 【转】Java线程系列:Callable和Future

    一.前言 在研究JDK1.8的CompletableFuture时,顺道将Futrue一起扫了盲~这篇博文纯转载 二.正文 本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一 ...

  2. hdu 1249 三角形 (递推)

    三角形 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  3. LeetCode--Remove Linked List Element

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  4. Codeforce 721C DP+DAG拓扑序

    题意 在一个DAG上,从顶点1走到顶点n,路径上需要消费时间,求在限定时间内从1到n经过城市最多的一条路径 我的做法和题解差不多,不过最近可能看primer看多了,写得比较复杂和结构化 自己做了一些小 ...

  5. luogu P2764 最小路径覆盖问题

    题目描述 给定有向图G=(V,E).设P 是G 的一个简单路(顶点不相交)的集合.如果V 中每个顶点恰好在P 的一条路上,则称P是G 的一个路径覆盖.P 中路径可以从V 的任何一个顶点开始,长度也是任 ...

  6. AdjustTokenPrivileges启用权限

    原文链接地址:http://blog.csdn.net/xbgprogrammer/article/details/7276760    我们有很多操作需要用到OpenProcess函数,而为了使程序 ...

  7. Supermarket [堆]

    Supermarket 题目描述 有一个商店有许多批货,每一批货又有N(0<=N<=\(10^4\))个商品,同时每一样商品都有收益Pi​ ,和过期时间Di​ (1<=Pi,Di&l ...

  8. eclipse+jetty+web项目调试---不显示源码

    本人eclipse版本:JUNO 1.问题现象:显示源码时,不显示箭头(指示到哪行) 解决办法: debug configurations  --->Goals设置参数  clean -X je ...

  9. java实现ssm框架的crud

    上一篇博客写了通过表名获取数据库表结构的demo,现在我以此为基础实现了一个简单的通过数据库表结构生成对应的实体,通过读取mapper接口文件.mapping映射文件. service映射文件模板,替 ...

  10. POJ1182 食物链---(经典种类并查集)

    题目链接:http://poj.org/problem?id=1182   食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submission ...