CSS基础四

# CSS基础-四

## 结构伪类选择器

根据元素的结构关系查找元素。

| 选择器        | 说明                             |
| ------------- | -------------------------------- |
| E:first-child | 查找第一个E元素                  |
| E:last-child  | 查找最后一个E元素                |
| E:nth-chid    | 查找第N个E元素，第一个元素N值为1 |

```html
        <style>
        li:first-child {
            color: red;
        }
        li:last-child {
            color: green;
        }
        li:nth-child(4) {
            color: orange;
        }
    </style>

<ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
        <li>li 5</li>
        <li>li 6</li>
        <li>li 7</li>
        <li>li 8</li>
    </ul>
```

nth-child(公式)

查找多个有规律的元素。

| 功能            | 公式      |
| --------------- | --------- |
| 偶数标签        | 2n        |
| 奇数            | 2n+1\2n-1 |
| 倍数            | 5n        |
| 第n个以后的标签 | n+5       |
| 第n个以前的标签 | -n+5      |

```html
        /* 默认n为0 */
		li:nth-child(2n+1) {
            background-color:red;
        }
```

## 伪元素选择器

创建虚拟元素，用来放置装饰性内容。

| 选择器    | 说明                            |
| --------- | ------------------------------- |
| E::before | 在E元素里面最前面添加一个伪元素 |
| E::after  | 在E元素里面最后面添加一个伪元素 |

tips:

- 必须设置content:""属性，用来设置伪元素的内容，如果没有内容留空
- 伪元素默认行内显示模式
- 权重和标签选择器相同

```html
    <style>
        li:first-child::after {
            content: " >";
            font-weight: 700;
        }
        li:first-child::before {
            content: "< ";
            font-weight: 700;
        }
    </style>
```

## 盒子模型

用于布局网页，摆放盒子和内容。

组成：

- 内容区域-width/height
- 内边距-padding,内容与盒子边缘之间
- 边框线-border
- 外边距-margin,盒子外面

```html
        div {
            height: 400px;
            width: 400px;
            background-color: red;
            padding: 10px;
            border: 1px solid black;
            margin: 10px;
        }
```

**边框线**：boder(bd)

属性名：boder

属性值：边框线粗细 线条样式 颜色（不区分顺序）

边框线粗细,数字+px

线条样式：

| 属性值 | 线条样式 |
| ------ | -------- |
| solid  | 实线     |
| dashed | 虚线     |
| dotted | 点线     |

颜色：与color属性值一致

```html
        div {
            height: 400px;
            width: 400px;
            background-color: #FFE4E1;
            padding: 10px;
            margin: 10px;
            border: 1px dashed #000;
        }
```

可以设置单个方向的边框线。

border-方位名词

```html
            border-top: 1px solid #000;
            border-bottom: 1px dashed #000;
            border-right: 2px solid yellow;
            border-left: 3px dotted red;
```

**内边距**：padding(pd)/padding-方位名词

表示内容距离外层标签的距离。

```html
            padding: 10px;
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 30px;
            padding-bottom: 15px;
```

多值写法：

| 取值个数 | 示例                          | 含义                   |
| -------- | ----------------------------- | ---------------------- |
| 一个值   | `padding:10px`                | 四个方向内边距都为10px |
| 两个值   | `padding:10px 80px`           | 上下10px,左右80px      |
| 三个值   | `padding:10px 40px 80px`      | 上10px,左右40px 下80px |
| 四个值   | `padding:10px 20px 40px 80px` | 上右下左的顺序         |

盒子尺寸计算：

`盒子尺寸=内容尺寸+boder尺寸+内边距尺寸`

结论：给盒子加boder/padding会撑大盒子尺寸

解决：

手动减少/boder/padding尺寸

设置盒子的属性：box-sizing:border-box

```html
        div {
            height: 200px;
            width: 200px;
            background-color: #FFE4E1;
            /* 多值写法 */
            padding: 20px;
			/*内减模式，加padding和boder不会撑大尺寸，自动计算减少*/
            box-sizing: border-box;

}
```

**外边距**：margin

拉开两个盒子的距离，用法与padding一致。

添加margin不会撑大盒子的尺寸。

```html
            margin: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;
```

版心居中：

设置margin 0 auto;

必须设置盒子的宽.

```html
    <style>
        div {
            height: 200px;
            width: 1000px;
            background-color: rgb(212, 106, 106);
            margin: 0 auto;
        }
    </style>
```

## 清除默认样式

清除标签的默认样式，内外边距等。

```html
{
	margin:0;
	padding:0;
}

h1,h2,h3,br,input,button,dd,dl {
	margin:0;
	padding:0;
}
```

去除列表的项目符号：

属性：list-style

属性值：none

```html
        li {
            list-style: none;
        }
```

## 元素溢出

控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

| 属性值 | 效果                                   |
| ------ | -------------------------------------- |
| hidden | 溢出隐藏                               |
| scroll | 溢出滚动(无论是否溢出都显示滚动条位置) |
| auto   | 溢出滚动(溢出才显示滚动条位置)         |

## 外边距合并与塌陷

合并现象：

垂直排列的兄弟元素，上下margin会合并

取较大值生效。

塌陷现象：

父子级标签，子级的添加上外边距会产生塌陷问题

导致父级一起向下移动

解决：

- 取消子级margin,父级设置padding(建议)
- 父级设置overflow:hidden
- 父级设置boder-top

## 行内元素-内外边距问题

行内元素添加margin,padding,无法改变元素垂直位置

解决：给行内元素添加line-height属性。

## 圆角

设置元素的外边框为圆角

属性名：border-radius

属性值：数字+px/百分比

```html
        div {
            height: 100px;
            width: 100px;
            background-color:yellow ;
            border-radius: 20px;
            margin: 50px auto;
        }
```

border-radius 多值写法：

从左上角顺时针赋值

没有取值的角与对角相等

```html
border-radius: 10px 20px 40px 80px;
border-radius: 10px 40px 80px;
border-radius: 10px 80px;

```

示例：

正圆形状，给正方形盒子设置圆角属性的宽高的一半/50%

胶囊形状：给长方形设置圆角属性为盒子高度的一半。

```html
        .div1 {
			/*正圆*/
            height: 100px;
            width: 100px;
            background-color:#FFA500 ;
            /* border-radius: 20px; */
            border-radius: 50px;
            margin: 50px auto;
        }
        .div2 {
			/*胶囊*/
            width: 200px;
            height: 80px;
            background-color:#CDC5BF;
            margin: 50px auto;
            border-radius: 40px;;
        }
```

## 阴影

给元素设置阴影效果

属性名：box-shadow

属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

x和y必须书写

默认是外阴影，内阴影需要添加inset

```html
box-shadow: 0px 3px 1px 3px #EEE5DE;
```

综合案例一：

```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;
        }
        body {
            background-color: #f1f1f1;
        }
        .douyin {
            width: 270px;
            height: 253px;
            background-color: #fff;
            margin:  50px auto;
            text-align: center;
            padding-top: 40px;
            border-radius: 5px;
            box-shadow: 1px 2px 1px 2px #DCDCDC;
        }
        h4 {
            margin-top: 20px;
            margin-bottom: 12px;
            font-weight: 400;
            font-size: 18px;
        }
        p {
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="douyin">
        <img src="./liveSDK.svg" alt="douyin" title="douyin">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </div>
</body>
</html>
```

案例二：

背景图片使用 background-image

内容使用 padding-left

```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;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .news {
            margin: 100px auto;
            width: 360px;
            height: 200px;
        }
        .hd {
            width: 360px;
            height: 34px;
            background-color: #eee;
            border: 1px solid #dbdee1;
            border-left: 0;
        }
        .hd a {
            margin-top: -1px;
            display: block;
            width: 48px;
            height: 34px;
            border-top: 2px solid orange;
            border-right: 1px solid #dbdee1;
            background-color: #fff;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
        }
        .news .bd {
            padding: 5px;
        }
        .news .bd li {
            background-image: url(./square.png);
            background-repeat: no-repeat;
            background-position: 0 center;
            padding-left: 15px;
        }
        .news .bd li a {
            background: url(./img.gif) no-repeat 0 center;
            padding-left: 20px;
            font-size: 12px;
            color: #666;
            line-height: 24px;
        }
        .news .bd li a:hover {
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="news" >
        <div class="hd">
            <a href="#">新闻</a>
        </div>
        <div class="bd">
            <ul>
                <li><a href="#">功勋不朽</a></li>
                <li><a href="#">情侣遇洪水被困 男生要求先救女友</a></li>
                <li><a href="#">王楚钦世界排名第一</a></li>
                <li><a href="#">东京大楼爆炸瞬间 有人高喊快逃</a></li>
                <li><a href="#">媒体：部分地区中小学学位预警</a></li>
                <li><a href="#">iPhone15及Plus新增青绿色</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
```