css浮动和定位

作者: 种谔 | 来源:发表于2016-03-10 20:46 被阅读0次

    CSS定位机制:
    position属性拿来定位用,有四个属性。
    1.static
    正常默认值,不脱离文档流。
    2.relative
    原标签不脱离文档流,占据原有位置,偏离后的标签,会覆盖其他标签,偏离位置以标签原文档流的位置为参考坐标。
    3.absolute
    标签脱离文档流,偏离位置以存在position值的父元素为参考坐标,如果不存在,则以body标签为参考坐标。
    4.fixed
    生成绝对定位的元素,相对于浏览器窗口进行定位。
    注:对于使用了position属性中非static标签的元素,使用top,right,bottom,left和z-index来设置上,右,下,左和重叠优先级。非position属性的标签会忽略这5个属性。

    z-index详解:
    元素可拥有负的 z-index 属性值。
    该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

    float
    浮动的问题:
    1.父元素的高度无法被撑开,影响与父元素同级的元素
    2.与浮动元素同级的非浮动元素会跟随其后
    3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
    float存在四个值,left,right,none,inherit默认是none.
    浮动元素会生成一个块级框。(不会换行,除非空间不够。)
    如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
    设置float会使得标签脱离普通文档流,直到它的右边缘碰到包含框的右边缘,使得块级元素会无视标签的位置,而产生重叠的现象,然而文字却不会无视浮动,会围绕在浮动周围,具体浮动的位置要看浏览器的渲染情况,如第一个元素为块级元素,第二位右浮动元素,则右浮动元素会存在第二行。
    clear
    clear存在属性值为none,left,right,both.
    clear存在是为了清除浮动,注:清除浮动时,添加clear属性只能对自己有效。
    到底是清除左边还是右边,则需要查看下,浏览器渲染的顺序。

    overflow
    取值一般为hidden和scroll。
    scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    hidden:内容会被修剪,并且其余内容是不可见的。
    visible:默认值。内容不会被修剪,会呈现在元素框之外。

    placeholder
    在文本框中存在一个默认值,获得焦点的时候消失。

    相关文章

      网友评论

        本文标题:css浮动和定位

        本文链接:https://www.haomeiwen.com/subject/uxttlttx.html