CSS布局定位

最新推荐文章于 2023-12-07 20:28:44 发布

原创最新推荐文章于 2023-12-07 20:28:44 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #文档 #html #float #div

css 专栏收录该内容

3 篇文章

订阅专栏

前面讲了如何通过CSS来选取元素，现在来说说CSS如何实现布局定位。
从布局的角度来说，html元素可以分为两类：行级元素和块级元素。
行级元素，就是不会单独占一行的元素，在一行内可以有多个行级元素，但是块级元素单独占一行。行级元素的宽度和高度不能设定，只能由其内部的内容确定；块级元素默认宽度是其容器层的100%，当然其高度和宽度是可以自己设置的。
典型的块级元素如div、p、h1等等。行级元素如a、span等等。
需要说明的是，块级元素和行级元素之间是可以相互转行的:通过display属性进行修改。
对于一个块级元素，通过:display:inline;即可将其转换为行级元素。
对于一个行级元素，通过:display:block;即可将其转换为块级元素。

一般情况下，将行级元素和普通文本图片视为内容，而块级元素和内容之间的关系是这样的：块级元素之中放置内容，就是说块级元素用来构建一个容器，用来盛放内容。

因此，我们在研究布局定位的时候只需要关注块级元素即可。
对于一个块级元素，为了方便这里不妨称之为:层。
从以下几个方面来描述层的布局特性：

第一：层的盒状模型

这点需要重点理解:margin.border,padding,element的含义及其复杂的内部关系。

第二：html文档流

   一般地，html文档流布局的机制是这样的：从html文档<body>开始解析元素直至</body>结束。
       1.遇到行级元素，就将其放在一行靠左的位置，如果这一行宽度不够，另起一行，继续从左往右排布。
       2.遇到块级元素，就另起一行，在新行中放置块级元素。
       整个文档流是从左向右，从上向下来进行布局的。
       通过这种方式能完成大多数的页面布局需求，但是针对特殊的版面，需要其他的技术支持，于是就有了下面手段。
       层默认的显示方式是遵循文档流布局的，可以设置将其从文档流中拉出来，独立显示。

(1)相对定位,设置层的position属性为relative

           一旦设置一个层为相对定位层之后就能使这个层相对于其原来的位置(遵循文档流布局的位置)移动了。需要说明的是，尽管这个层不在原来的位置上了，但是其原来的位置仍然是它的预留地，就是说那个位置仍然为其保留着，其他层不能占用。只是这个层在此基础之上偏移了(偏移量由top,left,right,bottom指定)。还有一点，由于这个层偏移了，那就不可避免的会和其他层重叠，这就牵扯到显示覆盖的问题。实际上这个问题是这样处理的：比较重叠层的z-index值，值大地优先显示(注，普通层不能设置其z-index值，其值恒为0)。
           演示代码：
               #d2{
                   background-color:green;
                   width:100px;
                   height:100px;
                   position:relative;/*声明这是一个偏移层*/
                   top:10px;/*指定偏移量*/
                   left:10px;/*指定偏移量*/
                   z-index:1;/*指定纵向显示的优先级*/
               }

(2)绝对定位，将层的position属性设置为absolute

           绝对定位层将会被从文档布局流中删除，也就是说在文档流布局的时候不会考虑绝对定位层，它的位置依赖其设置的偏移量。前面提到，相对定位层偏移的基准是其原来的位置，但是绝对定位层呢？是这样的：其基准是距其最近的设置了piosition属性的父层，如果没有就是body窗体。其重叠覆盖问题的处理和相对定位层一样：比较z-index值。
           #mydiv{
               background-color:green;
               width:100px;
               height:100px;
               position:absolute;
               top:100px;
               left:10px;
               z-index:3;
           }

(3)绝对定位，将层的position属性设置为fixed.

           这个绝对定位层和前面讲到的绝对定位层的区别就是：这个绝对定位层的偏移基准始终是body窗体。其他相似。
                   #mydiv{
                       background-color:yellow;
                       width:100px;
                       height:100px;
                       position:fixed;
                       top:50px;
                       left:50px;
                       z-index:4;
                   }

(4)浮动层，设置层的float属性(取值left,right)

           浮动层也会从文档流中被删除，就是说其他普通层将会忽略浮动层的存在。浮动层的浮动规则是这样的：浮动层在其父层的范围内向指定的方向浮动，如果水平空间不够的话就向下摆放。
           由于普通层会忽略浮动层，因此默认普通层会被浮动层覆盖。解决这一问题的方法是在浮动层后面的层添加这样的属性设置
               clear:both.
           这样，这个普通层就会在浮动层的下方显示，而不会被覆盖。

           以上内容揭示了页面排版布局的核心秘密。