zoukankan      html  css  js  c++  java
  • 精通CSS高级Web标准解决方案(2-2 可视化格式模型之定位概述)

    视觉格式化模型

    块级元素(块框)、行内元素(行内框),可以使用display改变生成的框的类型,display:block让行内元素(比如<a>)表现的跟块级元素一样,display:none让生成的元素没有框,框及其里面的内容不再显示,不占用文档中的空间。

    CSS的三种基本定位机制:普通流、浮动、绝对定位。除非指定,默认使用普通流,元素框的位置由元素在(X)html中的位置决定。

    块级元素从上往下一个接一个排列,框的垂直距离由框的垂直空白边计算得出。

    行内框在一行中水平布置。

    相对定位

      通过设置水平或垂直位置,让元素相对于它的起点进行移动。在进行相对定位时无论是否移动,元素仍然占据原来的位置,因此移动元素会覆盖其他框。

      相对定位被认为是普通流定位模型的一部分,因为元素的位置是相对于它在普通流中的位置。

    绝对定位

    绝对定位使元素位置普通流无关,因此不占空间,普通流中其他元素的位置就像绝对定位元素不存在一样。

    固定定位是绝对定位的一种。

    浮动

      浮动框可以左右移动,直到它的外边缘碰到包含框或者另一个浮动框的边缘。浮动框不在普通流中,所以普通流中的块框表现的就像浮动框不存在一样。

      行框与清理

  • 相关阅读:
    Ubuntu 装JDK
    U盘文件夹被病毒隐藏,且不能取消解决办法
    wireshark: there are no interfaces on which a capture can be done
    [转]Ubuntu 常用快捷键10个
    恢复被win7覆盖的Ubuntu Grub
    U盘安装Win7 64位
    荣耀3X畅玩版狙击红米note!
    Secret and Whisper
    360 chrome不能登录Google账户
    周鸿祎仍想做手机
  • 原文地址:https://www.cnblogs.com/wangxuchun/p/3776473.html
Copyright © 2011-2022 走看看