前端实践选题之 CSS布局技巧

-选题要求： [ 汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。 ]

浮动（float）

普通流

简单理解就是传统div盒子，行内元素啊，块级元素啊，行内块元素的，就是普通流，也叫标准流。

###浮动元素浮动是指设置了浮动属性的元素会脱离标准流控制，也就是飘起来。

选择器 { float：属性值；}

属性值-- 描述
left-- 元素向左浮动
right-- 元素向右浮动
none-- 元素不浮动（默认）

浮动特性

浮动脱标（脱离标准流），不占位置，会影响标准流。浮动只会左右浮动
浮动的盒子不再保留原先的位置
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
浮动元素会具有行内块元素特性

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

清除浮动

清除浮动本质：解决父级元素因为子元素浮动引起的内部高度为0的问题。【本来子盒子是可以把父亲撑开的，但是浮动相当于飘起来，没法撑开了，父亲如果不设置高度，高度就会变成0】

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

清除浮动语法

选择器{clear:属性值;}

其他方法

父级添加 overflow 属性

给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

父级添加after伪元素

:after 方式是额外标签法的升级版。也是给父元素添加

 .clearfix:after {
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
 .clearfix { /* IE6、7 专有 */
 *zoom: 1;
 }

父级添加双伪元素

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}

关于浮动实践案例--常见的网页布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }
    .top {
        height: 50px;
        background-color: gray;
    }
    .banner {
        width: 980px;
        height: 150px;
        background-color: gray;
        margin: 10px auto;
    }

    .box {
        width: 980px;
        margin: 0 auto;
        height: 300px;
        background-color: pink;
    }

    .box li {
        float: left;
        width: 237px;
        height: 300px;
        background-color: gray;
        margin-right: 10px;
    }

    .box .last {
        margin-right: 0;
    }
    /*只要是通栏的盒子(和浏览器一样宽)，不需要指定宽度*/
    .footer {
        height: 200px;
        background-color: gray;
        margin-top: 10px;
    }
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</div>
<div class="footer">footer</div>

效果图展示：

布局.png

定位

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。
语法：
```
选择器 { 
    position: static; 
}
```
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的

相对定位(relative)

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。
语法：

选择器 { 
	position: relative; 
}

绝对定位(absolute)

i介绍

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

 选择器 { 
 	position: absolute; 
 }

完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位
- 元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

####子绝父相

意思是：子级是绝对定位的话，父级要用相对定位。

固定定位(fixed)

固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

  选择器 { 
  	position: fixed; 
  }

固定定位的特点：
1. 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
1. 固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

粘性定位(sticky)

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

语法：

  选择器 { 
      position: sticky; 
      top: 10px; 
  }

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。

实践案例--淘宝轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝轮播图做法</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .tb-promo {
        position: relative;
        width: 630px;
        height: 315px;
        background-color: pink;
        margin: 100px auto;
    }
    .tb-promo img {
        width: 630px;
        height: 315px;
    }
    /* 并集选择器可以集体声明相同的样式 */
    .prev,
    .next {
        position: absolute;
        top: 50%;
        /* 绝对定位的盒子垂直居中 */
        margin-top: -15;
        /* 加了绝对定位的盒子可以直接设置高度和宽度 */
        width: 20px;
        height: 30px;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        line-height: 30px;
        color: #fff;
        text-decoration: none;
    }
    .prev {
        left: 0;
        /* border-radius: 15px; */
        /* 右上角和右下角改成圆角 */
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .next {
        /* 如果一个盒子既有left属性也有right属性，则会默认执行left属性..同理，top bottom会执行top */
        right: 0;
        /* border-radius: 15px; */
        /* 右上角和右下角改成圆角 */
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }
    .promo-nav {
        position: absolute;
        bottom: 15px;
        left: 50%;
        margin-left: -35px;
        width: 70px;
        height: 13px;
        background:rgba(255, 255, 255, 0.3);
        border-radius: 7px;
    } 
    .promo-nav li {
        float: left;
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
        margin: 3px;
    }
    /* 不要忘记选择器权重的问题 */
    .promo-nav .selected {
        background-color: #ff5000; 
    }
</style>
</head>
<body>
<div class="tb-promo">
    <img src="tb.jpg" alt="">
    <!-- 左侧按钮 -->
    <a href="#" class="prev"> &lt;</a>
    <!-- 右侧按钮 -->
    <a href="#" class="next"> &gt;</a>
    <!-- 小圆点 -->
    <ul class="promo-nav">
        <li class="selected"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

效果图展示：

屏幕截图 2023-08-24 230838.png

网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

前端实践选题之 CSS布局技巧 | 青训营