CSS样式基础内容3

托比-马奎尔

已于 2023-01-29 19:46:08 修改

阅读量355

点赞数

分类专栏： CSS 文章标签： css 前端 html

于 2023-01-27 22:03:33 首次发布

本文链接：https://blog.csdn.net/qq_47896523/article/details/128754238

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS三大特性

层叠性

相同的选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

继承性

行高的继承性

<!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>
        body {
            color: pink;
            /* font: 12px/24px '微软雅黑'; */
            /* 文字大小/行高 */

            font: 12px/1.5 '微软雅黑';
        }

        div {
            /* 子元素继承了父元素body的行高1.5 */
            /* 这个1.5就是当前元素文字大小的1.5倍，所以当前div的行高就是21像素*/
            font-size: 14px;
        }

        p {
            font-size: 16px;
        }

        /* li没有手动指定文字大小,则会继承父亲的文字大小    body的字体大小为12px，
        li的所有文字大小为12px*1.5 */
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

</html>

优先级

权重是有4组数组组成，但是不会有进位

类选择器永远大于元素选择器，id选择器永远大于类选择器，行内样式大于id选择器

!important是最高的优先级

等级判断从左向右，如果某一位数值相同，则判断下一位数值

<!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>CSS优先级</title>
    <style>
        /* 元素选择器 */
        div {
            color: pink;
        }

        .test {
            color: red !important;
        }

        #demo {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="test" id="demo" style="color: purple">世界这么大，我想去看看</div>
</body>

</html>

通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，!important为无穷大

如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

<!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>CSS权重注意点</title>
    <style>
        /* 父亲的权重为100 */
        #father {
            color: red;
        }

        /* p继承的权重为0 */
        p {
            color: pink;
        }

        body {
            color: black;
        }
        /* a链接浏览器默认了一个样式，蓝色的，有下划线 */
    </style>
</head>

<body>
    <div id="father">
        <p>世界这么大，我想去看看</p>
        <!-- 自己写的是元素选择器权重为1，所以为粉色 -->
    </div>
    <a href="#">我是单独的样式</a>
</body>

</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>权重的叠加</title>
    <style>
        /* li的权重是0，0，0，1 */
        li {
            color: red;
        }

        /* 复合选择器会有权重叠加的问题 */
        /* ul里面的权重是0，0，0，1+0，0，0，1 */
        ul li {
            color: green;
        }

        /* 权重为0,0,1,0+0,0,0,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <!-- pink色 -->
        <li>123</li>
        <li>456</li>
        <li>897</li>
    </ul>
</body>

</html>

CSS盒子模型

主要内容：border边框；content内容；padding内边距；外边距margin

border边框

属性	作用
border-width	定义边框粗细
border-style	边框的样式
border-color	边框颜色

边框的复合写法

<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>
        div {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
            border-style: solid;
            border-color: pink; */

            border: 5px solid red;
            /* 没有先后顺序 */

            border-top: 5px solid pink;
            /* 只设定上边框，其余同理；下边框为bottom */

            border-bottom: 5px dashed pink;
        }
    </style>
</head>

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框合并

border-collapse:collapse单词是合并的意思

边框会影响盒子的实际大小

边框是加在盒子外边的，而并不占用盒子本身的大小

内边距

padding属性用于设置内边距，即边框与内容之间的距离

<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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-top: 30px;

            /* 内边距复合写法 */
            padding: 5px;
            /* 上下左右都有5像素内边距 */
            padding: 5px 10px;
            /* 上下内边距是5像素，左右内边距是10像素 */
            padding: 5px 10px 20px;
            /* 上内边距5像素，左右内边距10像素，下内边距20像素 */
            padding: 5px 10px 20px 30px;
            /* 上是5像素，右10像素，下20像素，左30像素 */
        }
    </style>
</head>

padding会影响盒子实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

但是盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

网页导航案例

<!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>
        .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;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;

        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>

</html>

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

<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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .one {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div>2</div>
</body>

外边距可以让块级盒子水平居中，但是盒子必须指定宽度；盒子左右的外边距都设置为auto

<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>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;

            margin: auto;

            margin: 0 auto;
            /* 上下为0，左右为auto */
        }
    </style>
</head>

行内元素和行内块元素水平居中

如果想让行内元素或者行内块元素居中给其父元素添加text-align:center即可

<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>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
        }

        /* 行内元素或者行内块元素水平居中给其父元素添加text-align:center即可 */
    </style>
</head>

<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="down.jpg" alt="">
    </div>
</body>

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top，则它们之间的垂直间距不是二者之和，而是取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并

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

三种解决方案

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

<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>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 第一种方案 */
            /* border: 1px solid transparent; */
            /* 第二种方案 */
            /* padding: 1px; */
            /* 第三种方案 */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

清除内外边距

综合案例

产品模块布局分析

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

        a {
            color: #333;
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: white;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }

        .box img {
            /* 图片的宽度和父亲一样宽 */
            width: 100%;
            height: 249px;
        }

        .review {
            height: 70px;
            font: 20px '楷体';
            /* 因为这个段落没有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;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: #ff6700;
        }

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

<body>
    <div class="box">
        <img src="img.jpg" alt="">
        <p class="review">图片好，整体看是雪景</p>
        <div class="appraise">来自于159846753的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝……</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>

</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>快报模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 去掉li前面的项目符号 */
        li {
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
            /* padding-top: 3px; */
        }

        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">爆款耳机</a></li>
            <li><a href="#">母亲节，健康好礼</a></li>
            <li><a href="#">爆款耳机五折秒</a></li>
            <li><a href="#">9.9元洗一百张照片</a></li>
            <li><a href="#">长虹智能空调立减1000</a></li>
        </ul>
    </div>
</body>

</html>