跟着pink老师学前端CSS-D3

2024-03-04 16:03:17

1. CSS三大特性

CSS三大特性：层叠性、继承性和优先级。

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖掉另一个样式。

样式冲突：遵循就近原则
样式不冲突：不会层叠

<style>
    div {
        /* color会被覆盖掉 */
        color: lawngreen;
        /* background-color不会被覆盖 */
        background-color: lawngreen;
    }

    div {
        color: hotpink;
    }
</style>

1.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。text-，font-，line-这些元素开头的可以继承，以及color属性。

<style>
    /* 虽然没有给p标签设置样式，但是给p标签的父标签div设置了样式，此时p标签中的内容就会继承父标签的样式 */
    div {
        color: lawngreen;
        font-size: 50px;
    }
</style>

<body>
    <div>
        <p>rikirikiriki</p>
    </div>
</body>

行高的继承性

body {
	font:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位。
如果子元素没有设置行高，则会继承父元素的行高。
此时子元素的行高是：当前子元素的文字的大小font-size*1.5。
body行高1.5这样的写法最大的优点是：子元素可以根据自己文字的大小自动调整行高。

1.3 优先级

优先级从左到右比较。比如：1，0，0，0>0，0，0，3。

选择器	选择器权重
继承或者✳	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important 重要的	无穷大

权重的叠加

权重虽然有叠加，但是永远不会有进位。

<style>
    /* li中的文字是绿色 */
    /* ul li的权重为0，0，0，1+0，0，0，1=0，0，0，2 */
    ul li {
        color: lawngreen;
    }
    /* li的权重为0，0，0，1 */
    li {
        color: lightcoral;
    }
</style>
<ul>
    <li>riki</li>
    <li>rikirikiriki</li>
    <li>riki</li>
</ul>

2. CSS盒子模型

2.1 盒子模型

1. border边框

border边框：border-width || border-style || border-color

<style>
    div {
        width: 300px;
        height: 300px;
        border-width: 5px;
        border-color: hotpink;
        /* solid实线边框 */
        /* border-style: solid; */
        /* dashed虚线边框 */
        /* border-style: dashed; */
        /* dotted点线边框 */
        border-style: dotted;
    }
</style>

边框的复合写法：没有顺序

border: 1px solid hotpink;

边框四边还可以分别设置：

/* 上边框为红色，其余边为蓝色 */
div {
    width: 200px;
    height: 200px;
    border: 5px solid blue;
    /* 层叠性 */
    border-top: 5px solid red;
}

表格的细线边框

table {
    width: 700px;
    height: 500px;
}

table,
td {
    border-color: hotpink;
    border-width: 1px;
    /* 合并相邻的边框 */
    border-collapse: collapse;
    text-align: center;
}

边框会影响盒子实际大小，有两种方案解决：

测量盒子大小时不量边框。
如果测量的时候算进了边框，则盒子实际大小用width/height减去边框的width。

2. content内容

3. padding内边距

边框与内容之间的距离。

可以padding-top, padding-right, padding-bottom, padding-left分开设置，也可以简写。

padding的复合写法：

值的个数	描述
padding: 5px;	1个值，代表上下左右都有5像素内边距。
padding: 5px 10px;	2个值，代表上下有5像素内边距，左右有10像素内边距。
padding: 5px 10px 20px;	3个值，代表上内边距为5像素，左右有10像素内边距，下内边距为20px。
padding: 5px 10px 20px 30px;	4个值，顺序为：上，右，下，左，顺时针。

padding影响了盒子实际大小，如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距即可。

小米侧边栏案例

<style>
    a {
        /* 由于设置了30像素的内边距，撑大了盒子，所以盒子的宽度要减去30 */
        width: 200px;
        /* 垂直居中 line-height=height */
        height: 40px;
        line-height: 40px;
        display: block;
        background-color: rgba(49, 48, 48, 0.747);
        color: white;
        text-decoration: none;
        text-align: left;
        font-size: 14;
        /* 内边距 */
        padding-left: 30px;
    }

    a:hover {
        background-color: rgb(255, 115, 1);
    }
</style>

如果盒子内的文字不一样多的话，可以不给盒子宽度，使用padding来撑开盒子。

新浪导航栏案例

<style>
    .nav {
        height: 41px;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
        background-color: #fcfcfc;
        line-height: 41px;
    }

    .nav a {
        display: inline-block;
        height: 41px;
        color: #4c4c4c;
        font-size: 12px;
        text-decoration: none;
        padding: 0 20px;
    }

    .nav a:hover {
        color: #ff8500;
        background-color: #eee;
    }
</style>
<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">联系我</a>
    </div>
</body>

如果盒子本身没有指定width/height属性，此时padding并不会撑大盒子。

4. margin外边距

简写规则和padding用法一样。

1. 盒子水平居中

外边距可以让块级盒子水平居中，必须满足两个条件：

.header {
	width:960px;
	margin:0 auto;
}

盒子必须指定了宽度。
盒子左右的外边距都设置了auto。

行内元素或者行内块元素水平居中：给其父元素添加text-align:center即可。

2. 外边距合并

嵌套块元素垂直外边距的塌陷：对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距。

解决方案：

可以为父元素定义上边框。
可以为父元素定义内边距。
可以为父元素添加：overflow:hidden。

3. 清除内外边距

/* 写在style里面的第一行 */
* {
    margin:0;
    padding:0;
}

3. 综合案例-产品模块

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

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: white;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
            height: 200px;
        }

        .box p {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width，所以设定padding不会撑大盒子 */
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        a {
            display: inline-block;
            text-decoration: none;
            font-weight: 400;
            color: black;
        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin-left: 20px;
            margin-right: 6px;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#">
            <img src="../images/kitty.jpg">
        </a>
        <p class="review">看了一个视频，鸭子会一家一家喊人，到一家喊一会儿出来一群，两群到第三家喊，又出来一群，三群鸭子一起散步，跟小学女生一样 </p>
        <div class="appraise">来自于Pessimistic的评价</div>
        <div class="info">
            <a href="#">HelloKitty可爱玩偶贩..</a>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>

</html>

效果：

码农公寓