首页 > 代码库 > Css格式与布局

Css格式与布局

2024-08-29 00:05:37   221人阅读

 

一、位置

1、绝对定位

position:absolute：绝对定位。

绝对位置的意思就是相对于浏览器边框的位置，回归到它应有的位置。也就是说，一个div使用绝对定位后是在浏览器边框的最左上角位置。而此时，可以利用上下左右的标签进行更改位置。

            #a1{
                width: 200px;
                height: 200px;
                background-color: burlywood;
                position:absolute;
                top: 10px;
                left: 10px;
            }
        </style

技术分享技术分享

 

 

2、固定位置

position:fixd：固定位置

同样的，固定位置也是相对有浏览器边框而定。但注意的是，值不可为负。

position:fixed;

技术分享

 

 

3、相对位置

position:relative:相对位置

相对于自身原来出现的位置，进行移动。

            #a1{
                width: 200px;
                height: 200px;
                background-color: burlywood;
                position: relative;
                top: 50px;        
            }

技术分享技术分享

 

 

二、流

1、float：流

往哪个方向流，那么元素就跟着全部往哪个方向去。

技术分享→技术分享

            #liu{
                width: 900px;
                height: 50px;
            }
            .lift{    
                float: left;                
            }

技术分享→技术分享

 

2、清流

不管是float还是position，都是浮在上面一层。当我们都使用float流的时候，下面的一层就会覆盖住上面一层。而这个时候避免出现问题，我们就需要清流。

Bug：

技术分享技术分享

 

这个时候就需要我们清除一个流：

clear:both：清除所有

技术分享→技术分享

 

 

三、文字样式居中

            .lift{    
                float: left;
                width: 100px;
                height: 50px;
                text-align: center;
                vertical-align: middle;
                line-height: 50px;
                margin-left: 7px;
                background-color: cornflowerblue;                
            }

技术分享技术分享

 

 

四、Z-index分层

相当于Z轴的一个序列号。

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

Z-index 只能在定位元素上有效果（例如 position:absolute;）

技术分享技术分享

 

 

            #no1{
                width: 200px;
                height: 100px;
                background-color:black;
                position: absolute;
                z-index: 2;
            }
            #no2{
                width: 300px;
                height: 50px;
                background-color: yellow;
                position: absolute;
                z-index: 1;
            }

 

 

 

Z-index的值越大越靠上

技术分享→技术分享

 

Css格式与布局


联系
我们