• CSS关于盒子的定位和浮动的问题
  • 孺子牛 发表于 2016/3/2 13:35:00 | 分类标签: css设计 网站设计 css定位
  •  1、盒子的浮动

    CSS

     中有一个 float 属性,默认为 none,即标准流。通过设置 float 属性的值为 left 或 right,元素会向其父元素的左侧或右侧靠近,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定。

    * clear 属性:作用是为了消失由于使用 float 后,浮动的盒子对其他盒子的影响。clear 的值有 left、right 和 both,分别表示消除左边的影响、消除右边的影响和消除左右两边的影响。

    ps:

    * 通过使用 CSS 布局,可以实现在 HTML 不做任何改动的情况下,调换盒子的显示位置。实际应用中,确定内容的逻辑位置,可以把内容最重要的放在前面,次要的放在后面,再通过 CSS 来确定内容的显示位置。

    * 对 clear 属性的设置要放到设置 float 后面的盒子中,才能有效消除影响。

    2、盒子的定位

    * 广义的“定位”:泛指一个网页排版中的定位操作,使用任何 CSS 规则来实现。

    * 狭义的“定位”:通过设置 CSS 中的属性 position 来进行定位。

    * position 的取值包括:

    (1)static:默认的属性值,按照标准流(包括浮动方式)进行布局。

    (2)relative:称为相对定位,使用相对的盒子的位置常以标准量的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。

    相对定位仍在标准流中,它对父块和兄弟块盒子没有任何影响。

    (3)absolute:绝对定位,盒子的位置以它的包含框为基准进行偏移。

    绝对定位从标准流中脱离,并且以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。没有已经定位的祖先元素,则以浏览器窗口为基准进行定位。

    (4)fixed:固定定位,与绝对定位类似,以浏览器窗口为基准进行定位,拖动浏览器窗口的滚动条时,位置保持不变。

    ps:

    * 当 position 属性设置为 relative、absolute 和 fixed 时,通过设置 left、right、top 和 bottom 来指定偏移量。这 4 个属性除了可以设置绝对的像素数外还可以设置百分数。

    * “已经定位”元素的含义是:position 属性被设置,并且不是 static。

    * 绝对定位的特殊性质:如何设置了绝对定位,而没有设置偏移属性,那它将保持原来的位置。可用于需要使某个元素脱离标准流,而需要保持在原来位置的情况。

    3、z-index 空间位置

    * z-index 属性用于调整定位时重叠块的上下位置。默认值为 0,可以设置为正数或负数,当两个块的 z-index 值相同时,保持原来的高低覆盖关系。

    4、盒子的 display 属性

    * 可以通过设置 display 属性来确定盒子的类型。inline 表示行内元素,block 表示块级元素,none 表示无用于隐藏元素。

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:孺子牛
  • 加入时间:2013/6/4 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮