• CSS三种定位机制


    标准文档流

    块级元素撑满整个页面div,ul,li,dl,dt,p

    行级元素可以一行显示多个span,strong,img,input大部分

    一般不设置盒子的高度,另其自动调整

    margin属性的auto值适用于盒子相对于浏览器的自动居中

    浮动

    当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容的变化而变化。

    设置浮动的盒子会覆盖在正常的标准文档布局盒子之上。

    元素设置浮动属性后,会对后面的元素产生影响(紧邻其后面的元素)。后面元素的文字不会被覆盖。文字总是想方设法地显示出来

    若设置float=left,则该元素会在其父元素中左移,若紧接着的元素还设置float:left,则其紧挨着左边的元素,不覆盖它。

    清除浮动元素对它后面元素的影响(设置对象是受到浮动影响的元素):

    若受影响的元素是后面的元素:clear:both,left,right选一个。或者设置width:100%+overflow(充满,溢出):hidden

    父级元素也会受到浮动元素的影响,也要清除浮动设置width:100%+overflow(充满,溢出):hidden  用这种方法清除浮动时不要再设置浮动元素的具体高度,因为如果内容超出,会被隐藏。

    清除浮动:

    绝对定位( absolute positioning) 

    实现横向多列布局及较为复杂的定位。

    position的属性值:static(静态定位,仍处在标准文档流),relative(相对定位),absolute(绝对定位),fixed(固定定位)

    relative:相对于自身原有位置进行偏移(用上下左右四个属性设置),仍处于标准文档流(如果空间不够,会撑开外面的盒子),随机拥有偏移属性和z-index属性

    absolute:已包含块为基准的定位,完全脱离标准文档流(对兄弟元素不产生影响),随机拥有偏移属性和z-index属性

    {

    如果没有设置偏移量:

    无论是否存在已定位祖先元素(设置了相对,绝对,固定定位的一种,一般设置为相对定位简单些),都保持在元素初始位置;脱离标准文档流;设置好的宽度失效,实际宽度随着内容的变化而变化

    如果设置了偏移量:

    如果没有已定位祖先元素:以<html>为偏移参照基准

    如果有已定位祖先元素:以离它最近的祖先元素为参照基准。

    }

    使用absolute实现横向两列布局(用于一列固定宽度,另一列宽度自适应)

    1.为其父元素设置relative相对定位,2.设置自适应宽度元素绝对定位。3.确保满足固定宽度元素的列高度>自适应元素宽度的列(设置absolute的元素脱离了标准文档流,无法撑开父元素)  此时再用margin属性设置间距指的是对父元素的间距。

    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 表示无用于隐藏元素。

  • 相关阅读:
    autoreleasepool
    #ifndef/#define/#endif
    类工厂创建单例
    第一篇献给你:Block的回调
    博客纪念日
    [系列教程] Discuz模板的制作方法
    使用Discuz!后台备份和恢复Discuz!站点数据库的方法教程
    discuz x2.5 还原教程
    80后公务员辞职自述:7年收入没涨 能力是听话
    公务员队伍开始动荡了吗?
  • 原文地址:https://www.cnblogs.com/cross-yan/p/5914960.html
Copyright © 2020-2023  润新知