zoukankan      html  css  js  c++  java
  • <div>之定位

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

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

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

    二、浮动元素的定位

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

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

  • 相关阅读:
    PHP学习笔记11——文件处理
    PHP学习笔记10——GD图片处理
    PHP学习笔记09——GD生成验证码实例
    PHP学习笔记08——GD绘图基础
    PHP学习笔记07——字符串和正则
    poj 3254 Corn Fields
    线程
    字符串是否包含问题
    左旋转字符串
    凸包问题
  • 原文地址:https://www.cnblogs.com/wdcwy/p/4855412.html
Copyright © 2011-2022 走看看