CSS基础五

# CSS基础五

## 标准流

标准流也指文档流，标签在页面中默认的排布规则：

- 块元素独占一行
- 行内元素一行多个
- ......

## 浮动

让块级标签在水平排列。

属性名：`float`

属性值：

- `left`
- `right`

浮动元素脱离标准流。

浮动后的元素顶对齐。

浮动后的元素具备行内块特点，不占用标准流空间。

测试：

```html
<!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;
            box-sizing: border-box;
        }
        .product {
            margin: 100px auto;
            width: 1226px;
            height: 628px;
            background-color: #DCDCDC;
        }
        .bd-left {
            width: 234px;
            height: 628px;
            background-color: #FAEBD7;
            float: left;
        }
        .bd-right {
            width: 978px;
            height: 628px;
            background-color: 	#CDCDB4;
            float: right;
            margin-left: 14px;
        }

.bd-right li {
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: #FFC1C1;
            float: left;
            list-style: none;
        }
        .bd-right li:nth-child(4n){
            margin-right: 0px;
        }
    </style>
</head>
<body>
    <div class="product">
        <div class="bd-left">爆款</div>
        <div class="bd-right">
            <ul>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
                <li>手机</li>
            </ul>
        </div>
    </div>
</body>
</html>
```

### 清除浮动

浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度导致页面错乱。

需要清除浮动。

一、额外标签法

在**父元素**内容的**最后**添加一个块级元素，设置CSS属性`clear:both`

一般用于清除浮动的类名：clearfix

```html
html:
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="buttom"></div>
CSS:
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .top {
            margin: 10px auto;
            width: 800px;
            /* height: 200px; */
            background-color: pink;
        }
        .left {
            width: 200px;
            height: 200px;
            float: left;
            background-color: skyblue;
            
        }
        .right {
            width: 550px;
            height: 200px;
            float: right;
            background-color: orange;
        }
        .clearfix {
            clear: both;
        }
        .buttom{
            height: 80px;
            background-color: 	#A52A2A;
        }
    </style>
```

二、单伪元素法

在父级元素的最后添加伪元素,原理与额外标签法相同,不需要额外添加标签

```html
        CSS:
		/*单伪元素法*/
		.clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
		HTML:
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="buttom"></div>
```

三、双伪元素法

```html
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
```

四、overflow清除浮动

在父元素添加CSS属性`overflow:hidden`

## Flex布局

弹性布局，适合结构化布局，提供空间分布和对齐。不会产生脱标现象。

### Flex布局组成

弹性容器：给父元素设置了`display:flex`成为弹性容器

弹性盒子：子级元素，可以自动排列

主轴：默认在水平方向

侧轴/交叉轴：默认在垂直方向

相关属性设置：

| 属性            | 描述                     |
| --------------- | ------------------------ |
| display:flex    | 创建flex容器             |
| justify-content | 主轴方向对齐             |
| align-items     | 侧轴对齐方式             |
| align-self      | 某个弹性盒子侧轴对齐方式 |
| flex-direction  | 修改主轴方向             |
| flex            | 弹性伸缩比               |
| flex-wrap       | 弹性盒子换行             |
| align-content   | 行对齐方式               |

主轴对齐方式：

属性名：justify-content

属性值：

| 属性值        | 效果                                   |
| ------------- | -------------------------------------- |
| flex-start    | 默认值，弹性盒子从起点开始依次排列     |
| flex-end      | 弹性盒子从终点开始依次排列             |
| center        | 弹性盒子沿主轴居中排列                 |
| space-between | 沿主轴均匀排列，空白间距均分在盒子之间 |
| space-around  | 沿主轴均匀排列，空白间距均分在盒子两侧 |
| space-evenly  | 沿主轴均匀排列，盒子与容器之间间距相等 |

侧轴对齐方式：

属性名：align-items:当前弹性容器内索引盒子的侧轴对齐方式(在弹性容器设置)

属性名：align-self:单独控制某个弹性盒子的侧轴对齐方式(在弹性盒子设置)

| 属性值     | 效果                                                         |
| ---------- | ------------------------------------------------------------ |
| stretch    | 盒子沿着侧轴线被拉伸至铺满容器,盒子没有但是设置侧轴反向默认拉伸 |
| center     | 盒子沿侧轴居中排列，整行居中                                 |
| flex-start | 盒子从起点开始依次排列                                       |
| flex-end   | 盒子从终点依次排列                                           |

主轴方向修改：

属性名：flex-direction

属性值：

| 属性值         | 效果                     |
| -------------- | ------------------------ |
| row            | 默认，水平方向，从左到右 |
| column         | 垂直方向，从上到下       |
| row-reverse    | 水平方向，从右到左       |
| column-reverse | 垂直方向，从下到上       |

修改后侧轴自动变换。

弹性伸缩比：控制盒子主轴方向的尺寸。

属性名：flex

属性值：整数，表示占用父级剩余尺寸的份数

除去手动设置的宽度，占用的份数，设置在盒子上。

```html
        .box {
            height: 300px;
            border: 1px solid #000;
            display: flex;
        }
        .box div {
            height: 100px;
            background-color: pink;
        }
        .box div:nth-child(1){
            width: 200px;
        }
        .box div:nth-child(2){
            flex: 1;
        }
        .box div:nth-child(3){
            flex: 2;
        }
```

弹性盒子换行：

属性名：flex-wrap

属性值：wrap(换行) nowrap(不换行)

默认情况下不换行，自动在一行挤压。

```html
            flex-wrap: wrap;
            justify-content: space-around;
```

行对齐方式：

属性名：align-content

属性值：

| 属性值        | 效果                                   |
| ------------- | -------------------------------------- |
| flex-start    | 默认值，弹性盒子从起点开始依次排列     |
| flex-end      | 弹性盒子从终点开始依次排列             |
| center        | 弹性盒子沿主轴居中排列                 |
| space-between | 沿主轴均匀排列，空白间距均分在盒子之间 |
| space-around  | 沿主轴均匀排列，空白间距均分在盒子两侧 |
| space-evenly  | 沿主轴均匀排列，盒子与容器之间间距相等 |

盒子不换行，对齐方式不生效。

案例一：

```html
<!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;
            box-sizing: border-box;
        }
        .box {
            margin: 50px auto;
            width: 1200px;
            height: 418px;
            border: 1px solid #ddd;
            border-radius: 10px;
        }
        .box ul li {
            list-style: none;
            /* background-color: red; */
            width: 500px;
            height: 88px;
            display: flex;
        }
        .box .pic {
            margin-right: 15px;
        }
        .box ul{
            height: 418px;
            padding: 90px 40px 90px 60px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        .box .text h4{
            font-size: 20px;
            line-height: 40px;
            font-weight: normal;
            color: #333;
        }
        .box .text p{
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./1.svg" alt="">
                </div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布视频到抖音短视频、西瓜视频及今日头条</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="./2.svg" alt="">
                </div>
                <div class="text">
                    <h4>管理视频内容</h4>
                    <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="./3.svg" alt="">
                </div>
                <div class="text">
                    <h4>发布携带组件</h4>
                    <p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p>
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="./4.svg" alt="">
                </div>
                <div class="text">
                    <h4>数据评估分析</h4>
                    <p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
```

取消表单控件的外边框

`outline: none;`

设置颜色为透明

`background-color: transparent;`

隐藏字体，设置字号为0

`font-size:0`

特殊选择器控制搜索框提示文本样式

```html
.search input::placeholder {
    font-size: 14px;
    color: #999;
}
```

设置行内块和行内元素对齐属性：vertical-align

```html
.user img {
    vertical-align: middle;
    border-radius: 15px;
}
```