CSS布局技巧｜青训营CSS布局是网页设计十分重要的部分，一个好的布局有利于网页的美观、阅读交互。本文简要概述CSS

CSS布局技巧

CSS布局是网页设计十分重要的部分，一个好的布局有利于网页的美观、阅读交互。本文简要概述CSS布局技巧，如浮动、定位、弹性盒子布局等，结合应用场景和实操实践进行汇总。

1、浮动布局

浮动布局是使用 float 属性，使元素脱离文档流。

float属性

作用：页面中元素的水平排列
可选值：

none 默认值,元素不浮动

left 向左浮动

right 向右浮动
特点：
1.浮动元素完全脱离文档流,不占据文档流
2.默认不从父元素(body)中脱离
3.不超过前边的其他浮动元素
4.若之前有没有浮动的块元素,则浮动元素不会上移
5.浮动元素不会超过其上边浮动的兄弟元素,最多和兄弟元素一样高

具体实操

以三个块元素作为参考，

    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>

若只有red 元素不设置浮动，有

.red{
    width:200px;
    height:250px;
    background-color:red;
    /* float: left; */
    /* float: right; */
}
.blue{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: left;
}
.yellow{
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: right;
}

其结果为：

当red 元素设置为float: right; ，则结果有

2、定位布局

定位布局通过 position 属性来开启定位。

开启定位后，设置偏移量offset可以设置元素的位置：

表示：top bottom left right

top正下负上（bottom则相反），left正右负左（right则相反），如top:10px，表示元素向参考点的向下偏移10px。

position属性

可选值：

static:默认值,未开启状态

relative：开启元素的相对定位

1.以元素在文档流中的位置为参照定位

即，相对定位是以原位置为参考原点

2.不脱离文档流

3.不改变元素的性质(块元素与行内元素)

具体操作可为：

.box1{
    width: 200px;
    height: 200px;
    background-color: teal;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position: relative;
    left: 100px;
    top: -200px;
}

absolute：开启元素的绝对定位
1.以包含块(最近的非static祖先)为参照定位
包含块(containing block)
- 距离元素最近的开启定位的祖先元素
- 若所有祖先元素皆没有开启定位,则选择html为其包含块
2.使元素脱离文档流

3.改变元素的性质(行内元素变为块元素)
实例的具体效果为：
```
.box1{
    width: 200px;
    height: 200px;
    background-color: teal;
    position: relative;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    position: absolute;
    left: 100px;
    top: 100px;
}
```

这里box2相对box1偏移，其中存在8px的margin

fixed：开启元素的固定定位
特点同absolute，唯一不同的是以浏览器的视口为参考定位

随着滚动的页面，固定在指定位置。
sticky：开启元素的粘滞定位

特点同relative，唯一不同的是可以在指定位置固定

与fixed 相比，它一开始可能不在指定位置固定。当页面滚动时，再根据最近的滚动的祖先的视口定位。
sticky 与 fixed 由于其以视口为参考定位，常用于实际网站的导航条或广告等。

比如下图的目录，即可用sticky 定位来实现：

3、弹性盒子布局

Flexible Box Layout ，是CSS3新增的一种布局方式

作用于父元素（flex container）

建立一个弹性盒子：display:flex | inline-flex;

规定盒子的主轴方向：flex-direction:row | column | …
作用于子元素（flex items）

具体操作

<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

.box{
    display: flex;
}
.box1{……}
.box2{……}
.box3{……}

4、响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

媒体查询 Media Query

媒体查询是 CSS 样式表最重要的功能之一

媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。

具体操作

.container{
    width:1200px;
    margin: 0 auto;
    height:1200px;
    background-color: red;
}

/*iphone: w < 768px*/
@media screen and (max-width: 768px){
    .container{
        width:100%;
        background-color: green;
    }
}
/*pad: w >= 768  && w< 992*/
@media screen and (max-width: 992px) and (min-width: 768px) {
    .container{
        width:750px;
        background-color: blue;
    }
}
/*中等屏幕   w >= 992  && w<1200*/
@media screen and (max-width: 1200px) and (min-width: 992px) {
    .container{
        width:970px;
        background-color: pink;
    }
}

不同屏幕大小（页面大小）会出现不同样式效果。

综合实操实践

这个程序是对图片做出一个动画效果，即当鼠标定在有效位置上，图片会产生变化——鼠标所在的图片放大，其他两个图片缩小。

        <nav>
            <a href="#">发现</a>
            <a href="#">探索</a>
            <a href="#">结果</a>
        </nav>
        <div id="show">
            <div id="box">
                <img src="./图1.jpg" alt="">
                <span>The First</span>            
            </div>
            <div id="box">
                <img src="./图2.jpeg" alt="">
                <span>The Second</span>
            </div>
            <div id="box">        
                <img src="./图3.jpeg" alt="">
                <span>The Third</span>
            </div>
        </div>

            *{
                padding: 0;
                margin: 0;
                font-family: Segoe Print ,Arial, Helvetica, sans-serif;
            }
            body{
                height: 100vh;
                background-color: grey;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            nav{
                width: 100px;
                height: 200px;
                background-color: teal;
                float: right;
                position: fixed;
                top: 50px;
                right: 10px;
    
                margin: 0 20px;
                box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
                border-radius: 20px;
                border: 3px solid white;
    
            }
            a{
                display: block;
                font-size: 30px;
                color: aliceblue;
                float: right;
            }
            #show{
                width: 55%;
                height: 500px;
                display: flex;
                justify-content: center;
            }
            #show #box{
                /* flex:1;//不可加,无法弹性变大小 */
                border: 5px solid white  ;
                border-radius: 25px;
                margin: 0 20px;
                background-color: white;
                overflow: hidden;
                transition: .5s;
                box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
            }
            
            img{
                width: 100%;
                /*保留span文字空间*/
                height:  85%;
                object-fit: cover;
                transition: .5s;
            }
    
            span{
                height: 10%;
                display: flex;
                font: 200 45px;
                /* 文字居中 */
                text-align: center;
                align-items: center;
                justify-content: center;
            }
            
    
            #box:hover{
                flex-basis:40%;
            }
            
            #box:hover img{
                width: 100%;
                height: 100%;
            }

本程序的主要依靠弹性布局、object-fit (图片等比剪切的属性)、hover选择器 实现效果，这里添加了页面右端存在的导航部分是为了展现fixed定位和向右浮动实现效果。

若考虑响应式布局，可参考前文中媒体查询所给出的具体操作，对程序进行优化。

结尾

实例大多出自本人过去在学习中做出的练习，尽管如今再看仍感觉有新的收获，想来这便是温故而知新。适当去做笔记，既是对当下知识的总结，也有利于未来再去复习，同时更快回忆起这些知识点。

实际上CSS布局远不止这些，本文仅仅汇总了部分常见的布局，希望各位读者有所收获吧。

CSS布局技巧 ｜ 青训营