RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
  

  •       

  •    

    • 在浏览器中显示的布局大致是：
    CSS的position属性的详细介绍

    代码中，使用了auto的属性有: #header bottom, #sidebar right, #footer top. 而对于#main呢，它的height和width都是auto，也就是说main的长宽是自适应的，自动填充可用空间，这也就好理解了，所谓的auto，也就是使元素的上右下左距离能够根据相关联的，或者说共同父元素的子元素之间的关系自动调整。

    四、Normal Flow

    前面提到了很多次“常规文档流”，实际上也就是W3C文档中的Normal Flow，也可称为常规流。常规流的理解，主要围绕着两个方面，分别是格式化上下文(Formatting Context)和相对定位(Relative Positioning)。

    格式化上下文，按照W3C文档的解释，分为Block Formatting Contexts(BFC)和Inline Farmatting Contexts(IFC)，这里我觉得没有什么翻译成中文的必要了，因为如果我说“块级格式化上下文”的话，诸位能理解是什么意思吗，所以，叫BFC和IFC就挺好。

    所谓BFC，文档上解释得挺啰嗦，简单来说，就是块级box顺次垂直排列。当然也不能这么简单，原因是块级box的内部还会产生BFC，也就是说可以嵌套。

    CSS Code复制内容到剪贴板

    1.   

    2.   

    3.        

    4.         BFC   

    5.            

    6.        

    7.        

    8.            

    9.             

      

  •             

    •   

  •         

    •   

  •        

  •   

    • CSS的position属性的详细介绍

    但是，当块级box内部都是行内box的时候，就不会产生BFC，而是产生IFC，但只要子元素中有一个块级box，就会产生BFC。Attention! 文档中指出，如果外层块级box的overflow: visible; 的话，不会产生BFC甚至IFC。

    下面来看看IFC，IFC中包括文字以及行内元素，对于文字来说，排版实际上有很多名堂，尤其是对于英文字符，或者说字母类文本，如果各位对文字排版有兴趣的话，推荐各位一部视频教程，由美国著名IT教学网站lynda.com出品的网页设计排版视频教程《Typography.for.Web.Designers》，至于下载方法，这里就不多说了，相信大家各显神通都有办法。

    如果在行内元素中同时包含文字的话，情况会比较复杂：

    CSS Code复制内容到剪贴板

    1.   

    2.   

    3.        

    4.         IFC   

    5.            

    6.        

    7.        

    8.            

    9.             Something   

    10.             

      

  •         

    •   

  •        

  •   

    • CSS的position属性的详细介绍

    注意观察span和div的底部对齐差异。

    行内框在行框垂直方向的对齐：

    行框高度总是足够包含其容纳的所有框，它可能会高于它包含的最高的框。在这里会跟vertical-align属性相关：

    vertical-align可能的取值：

    baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inherit

    举一个例子：

    CSS Code复制内容到剪贴板

    1.   

    2.   

    3.        

    4.         Vertical-align   

    5.            

    6.        

    7.        

    8.            

    9.             hello   

    10.             world   

    11.         

        

    12.        

    13.   

    CSS的position属性的详细介绍

    在水平方向上的对齐：

    行内框宽度总和小于包含框的宽时，水平方向的对齐取决于text-align属性。

    五、POSITION和OVERFLOW的关系
    父节点设置overflow:scroll,但是不管滚动条如果滚动，但是子节点一直都不动。
    当父节点不设置position情况下，子节点position的四种值的分析：
    示例1.1:

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {overflow: scroll;}   

    3. A-1 {}   

    4. }  

    效果：A-1会根据A滚动条的滚动而滚动
    分析：A-1的默认position设置为static，当position为static时，A-1元素还是遵循正常的文档流，因此A-1会受它父节点属性的影响
    示例1.2:

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {overflow: scroll;}   

    3. A-1 {position: relative;}   

    4. }  

    效果：A-1会根据A滚动条的滚动而滚动
    分析：当A-1的position设置为relative时，A-1元素还是遵循正常的文档流，因此A-1会受它父节点属性的影响
    示例1.3:(重点)

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {overflow: scroll;}   

    3. A-1 {position: absolute;}   

    4. }  

    效果：A-1不会根据A滚动条的滚动而滚动
    分析：当A-1的position设置为absolute时，A-1元素脱离了文档流，所以A-1不再受父节点属性的影响
    注意：这时在父节点没有设置position的时，只会受到body节点的影响
    示例1.4:

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {overflow: scroll;}   

    3. A-1 {position: fixed;}   

    4. }  

    效果：A-1不会根据A滚动条的滚动而滚动
    分析：当A-1的position设置为fixed时，A-1元素脱离了文档流，这时A-1只受body元素的影响

    当父节点设置position值为非static情况下，子节点position的四种值的分析：
    示例2.1:

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {position：relative; overflow: scroll;}   

    3. A-1 {}   

    4. }  

    效果：A-1会根据A滚动条的滚动而滚动
    分析：跟示例1.1一样，当父节点A设置了position之后，子节点A-1还是遵循正常的文档流，因此A-1会受它父节点属性的影响
    示例2.2:

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {position：relative; overflow: scroll;}   

    3. A-1 {position: relative;}   

    4. }  

    效果：A-1会根据A滚动条的滚动而滚动
    分析：跟示例1.2一样，当父节点A设置了position之后，子节点A-1还是遵循正常的文档流，因此A-1会受它父节点属性的影响
    示例2.3:(重点, 注意跟1.3示例对比)

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {position：relative; overflow: scroll;}   

    3. A-1 {position: absolute;}   

    4. }  

    效果：A-1会根据A滚动条的滚动而滚动
    分析：当父节点A设置了position之后，效果就跟示例1.3不一样了，这时A-1会受到离它自己最近的一个设置了position属性的父节点的影响，再看下面一个示例：

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {position：relative; overflow: hidden;}   

    3. A-1 {overflow: scroll;}   

    4. A-1-1 {position: absolute;}   

    5. }  

    注意：这时A-1-1不会收A-1的影响，但是会受到A的影响
    示例2.4:

    CSS Code复制内容到剪贴板

    1. body{   

    2. A {position:relative; overflow: scroll;}   

    3. A-1 {position: fixed;}   

    4. }  

    效果：A-1不会根据A滚动条的滚动而滚动
    分析：跟1.4示例一样，当子节点的position属性设置为fixed之后，不管的父节点是否设置了position值，都只会受到body节点的影响，其他任何节点都不会影响它

    到此，关于“CSS的position属性的详细介绍”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


    网站题目：CSS的position属性的详细介绍
    本文网址：http://jxjierui.cn/article/pgijpc.html

    其他资讯

    Top