zoukankan      html  css  js  c++  java
  • CSS定位机制总结

    1,CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。
    2,普通流定位:块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间       距。
    3,CSS position 属性
    (1),static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
    (2),relative:元素框相对于它原来位置偏移某个距离。它原本所占的空间仍保留。
    (3),absolute:元素框从文档流完全删除,并相对于其包含块定位(离他最近的relative)。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占             的空间会关闭,就好像元素原来不存在一样。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
    (4),fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

    4,css浮动:动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

  • 相关阅读:
    (二)Vue + Element 案例
    npm使用快速的安装源(nrm)
    windows下安装pm2
    windows下Mongodb和Memcached安装笔记
    利用UnblockNeteaseMusic实现网易云破版权,并实现shell可快速访问
    mac下相关操作命令
    apache下设置域名多站点访问及禁止apache访问80端口
    判断密码是否含有字母数字
    隐藏手机号
    开发相关工具
  • 原文地址:https://www.cnblogs.com/zhangyabin---acm/p/5111608.html
Copyright © 2011-2022 走看看