CSS基础-四

结构伪类选择器

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

        <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(公式)

查找多个有规律的元素。

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

伪元素选择器

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

tips:

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

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

盒子模型

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

组成：

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

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

边框线：boder(bd)

属性名：boder

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

边框线粗细,数字+px

线条样式：

颜色：与color属性值一致

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

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

border-方位名词

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

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

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

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

多值写法：

盒子尺寸计算：

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

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

解决：

手动减少/boder/padding尺寸

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

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

        }

外边距：margin

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

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

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

版心居中：

设置margin 0 auto;

必须设置盒子的宽.

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

清除默认样式

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

{
    margin:0;
    padding:0;
}

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

去除列表的项目符号：

属性：list-style

属性值：none

        li {
            list-style: none;
        }

元素溢出

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

属性名：overflow

属性值：

外边距合并与塌陷

合并现象：

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

取较大值生效。

塌陷现象：

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

导致父级一起向下移动

解决：

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

行内元素-内外边距问题

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

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

圆角

设置元素的外边框为圆角

属性名：border-radius

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

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

border-radius 多值写法：

从左上角顺时针赋值

没有取值的角与对角相等

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

示例：

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

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

        .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

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

综合案例一：

<!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

<!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>