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

一、图片直接做<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. 【转】配置Tomcat使用https协议(配置SSL协议)

    转载地址:http://ln-ydc.iteye.com/blog/1330674 内容概览: 如果希望 Tomcat 支持 Https,主要的工作是配置 SSL 协议 1.生成安全证书 2.配置to ...

  2. 【bzoj1878】[SDOI2009]HH的项链 树状数组

    题目描述 HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此, 他的项链变得越来越长.有一 ...

  3. android 与 小米1S刷机学习

    本文内容为本博客作者原创,转载请注明出处或者发私信. [名词] 1.ROM包 :安卓手机系统,以.ZIP结尾,类似windows的 win7系统包,300M-700M不止 2.卡刷(Recovery模 ...

  4. 【题解】HAOI2007分割矩阵

    水题盛宴啦啦啦……做起来真的极其舒服,比某些毒瘤题好太多了…… 数据范围极小 --> 状压 / 搜索 / 高维度dp:观察要求的均方差,开始考虑是不是能够换一下式子.我们用\(a_{x}\)来表 ...

  5. Topcoder SRM579 1000pts

    石头剪刀布QAQ 一看是个很油的概率dp 首先一看你很快能得出状态的表示F[i][r][p][s] 然后只要考虑r,p,s出现的次数来进行概率dp就好了 具体实现的时候细节很多(少) 如果预处理一下组 ...

  6. COGS 930. [河南省队2012] 找第k小的数 主席树

    主席树裸板子 #include<cstdio> #include<iostream> #include<algorithm> #define MAXN 100005 ...

  7. babel-preset-es2015,babel-polyfill 与 babel-plugin-transform-runtime

    babel-preset-es2015 是一个babel的插件,用于将部分ES6 语法转换为ES5 语法.转换的语法包括: 箭头函数 var a1 = () => 1 编译为 var a1 = ...

  8. HDU 4334 Trouble (数组合并)

    Trouble Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  9. HDU 2105 The Center of Gravity (数学)

    题目链接 Problem Description Everyone know the story that how Newton discovered the Universal Gravitatio ...

  10. alt+ F8 设置无效(转)

    原文转自 https://blog.csdn.net/m372897500/article/details/7310251 具体修改方法如下: 工具-选项-环境-键盘-应用以下其他键盘映射方案,选择v ...