css学习第四天

已于 2022-07-19 20:46:40 修改
阅读量81 收藏 1
点赞数 1
分类专栏： css 文章标签： css 学习 css3
于 2022-07-19 20:43:52 首次发布
原文链接：https://www.bilibili.com/video/BV14J4114768?p=163&spm_id_from=333.880.my_history.page.click
版权

目录

css三大特性

层叠性

原则：

继承性

行高的继承：

优先级

权重

权重叠加

盒子模型

网页布局过程

盒子模型

边框border

边框粗细

边框样式：

边框颜色：

边框简写

边框分开写法

表格细线边框

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

内边距（padding）

盒子外边距

外边距典型应用

使盒子水平居中显示条件：

外边距合并

清除内外边距

ps基本操作

  • 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>Document</title>
    <style>
        div {
            color: blue;
            font-size: 18px;
        }

        div {
            color: brown;
        }
    </style>
</head>

<body>
    <div>长江后浪推前浪</div>
</body>

</html>

        • 结果

    • 继承性

      • 子标签会继承父标签的某些样式

      • 子元素可以继承父元素的样式 如text-，font-，line-及color属性

      • 代码

        <!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>
        div {
            color: blue;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>继承性</p>
    </div>
</body>

</html>

      • 结果

      • 行高的继承：

        • 行高可以跟单位也可以不跟单位

        • 例如： body {font:12px/1.5 Microsoft YaHei}

        • 如果子元素没有设置行高，则会继承父元素的行高1.5

        • 此时子元素的行高是当前文字大小*1.5

        • 代码

          <!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>
        body {
            color: pink;
            /* 12像素文字，24行高 */
            /* font: 12px/24px 'Microsoft YaHei'; */
            /* 父标签：12像素文字，12*1.5倍行高 */
            font: 12px/1.5 'Microsoft YaHei';
        }

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

        p {
            /* 16*1.5=24像素 */
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
</body>

</html>

        • 结果

    • 优先级

      • 权重

        • 0,0,0,0：继承或者*

        • 0,0,0,1：元素选择器

        • 0,0,1,0：类选择器，伪类选择器

        • 0,1,0,0：ID选择器

        • 1,0,0,0：行内选择器style=“”

        • 无穷大：!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>Document</title>
    <style>
        /* 元素选择器 */
        div {
            color: pink !important;
        }

        /* 类选择器 */
        .test {
            color: red;
        }

        /* id 选择器 */
        #demo {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 行内选择器style="" -->
    <div class="test" id="demo" style="color:purple">多云</div>
</body>

</html>

        • 结果

      • 权重叠加

        • 如果是复合选择器，则会有权重叠加

        • div ul li----0,0,0,3

        • .nav ul li---0,0,1,2

        • a:hover----0,0,1,1

        • .nav a---0,0,1,1

        • 代码

          <!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>
        /* 权重0,0,0,1 */
        li {
            color: green;
        }

        /* 权重0,0,0,1+0,0,0,1=0,0,0,2 */
        ul li {
            color: pink;
        }

        /* 权重叠加0,0,1,0,+0,0,0,1=0,0,1,1 */
        .nav li {
            color: red;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>火龙果</li>
    </ul>
</body>

</html>

        • 结果

  • 盒子模型

    • 网页布局过程

      • 准备好相关网页元素

      • 利用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>Document</title>
    <style>
        /* 继承的权重为0 */
        .nav {
            color: red;
        }

        li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>快下雨了</li>
        <li>快下雨了</li>
        <li>快下雨了</li>
        <li>快下雨了</li>
        <li>快下雨了</li>
    </ul>
</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>Document</title>
    <style>
        /* 权重是11 */
        .nav li {
            color: red;
        }

        /* .nav 权重是10  */
        .pink {
            color: pink;
            font-weight: 700;
        }

        /* .nav .pink权重是20 */
        .nav .pink {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="pink">多云</li>
        <li>快下雨了</li>
        <li>快下雨了</li>
        <li>快下雨了</li>
    </ul>


</body>

</html>

      • 结果

    • 盒子模型

      • 就是把HTML页面的布局元素看作是一个矩形的盒子，装内容的容器

      • 他包括：边框、外边框、内边框、实际内容

      • border边框

      • content内容

      • padding内边距

      • margin外边距

    • 边框border

        • border设置元素边框，边框粗细、边框样式、边框颜色

        • 边框粗细

          • 单位px：border:border-width

        • 边框样式：

          • border:border-style

            • solid实线边框，dashed虚线边框，dotted点线边框

        • 边框颜色：

          • border-color

          • 代码

            <!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>
        div {
            width: 300px;
            height: 200px;
            /* 边框的粗细，单位一般为px */
            border-width: 5px;
            /* solid实线边框 dashed虚线边框 dotted点线边框; */
            /* border-style: solid; */
            /* border-style: dotted; */
            border-style: dashed;
            border-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

          • 结果

      • 边框简写

        • 语法：border：1px solid red；没有顺序

        • 代码

          <!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>
        div {
            width: 300px;
            height: 300px;
            /* 边框的简写 */
            /* border: 3px solid pink; */
            /* 上边框 */
            border-top: 3px solid pink;
            /* 下边框 */
            border-bottom: 3px solid pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

        • 结果

      • 边框分开写法

        • 语法：border-top：3px solid red；（只设计上边框）

        • 语法：border-bottom：3px solid red；（只设计下边框）

        • 语法：border-left：3px solid red；（只设计左边框）

        • 代码

          <!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>
        div {
            width: 200px;
            height: 200px;
            /* border-top: 1px solid pink;
            border-bottom: 1px solid blue;
            border-left: 1px solid blue;
            border-right: 1px solid blue; */
            border: 1px solid blue;
            /* 利用层叠性 */
            border-top: 1px solid pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

        • 结果

      • 表格细线边框

        • 语法：border-collapse属性控制浏览器的绘制表格边框的方式，它用于控制相邻单元格的边框

        • border-collapse：collapse；（表示相邻边框合在一起）

        • 代码

          <!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>
        table {
            width: 300px;
            height: 100px;
        }

        table,
        td,
        th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
            height: 35px;
            width: 200px;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

        • 结果

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

        • 情况1：测量盒子的大小的时候，不测量边框

        • 情况2：如果测量时候包含了边框，则需要width、higth减去边框宽度

        • 代码

          <!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

        • 结果

    • 内边距（padding）

      • padding设置内边距，边框与内容之间的距离

      • 左内边距：padding-left

      • 右内边距：padding-right

      • 上内边距：padding-top

      • 下内边距：padding-bottom

      • 代码

        <!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>
        div {
            width: 200px;
            height: 200px;
            padding-left: 20px;
            background-color: pink;
            padding-top: 20px;
        }
    </style>
</head>

<body>
    <div>
        盒子内容是content
    </div>
</body>

</html>

      • 结果

      • 内边距复合写法：

      • padding也影响盒子大小，如果盒子已经有了宽度和高度，再指定内边框，会撑大盒子。

      • 使盒子不变化的解决方法：width、higth减去多出来的内边距*2的大小

      • 案例：盒子内的字数不一样多，利用padding设置内边距相同更加美观

      • 若没有指定padding的宽度，则此时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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 上下左右50px */
            /* padding: 50px; */
            /* 上下5像素 */
            /* padding: 5px 10px; */
            /* 上5，左右10，下20 */
            /* padding: 5px 10px 20px; */
            /* 上5，右10，下20，左30 */
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>

<body>
    <div>盒子内边距是padding</div>
</body>

</html>

      • 结果

    • 盒子外边距

      • margin控制盒子与盒子之间的距离

      • 左外边距：margin-left 

      • 右外边距：margin-right

      • 上外边距：margin-top

      • 下外边距:margin-bottom

      • 代码

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

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

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

</html>

      • 结果

    • 外边距典型应用

      • 使盒子水平居中显示条件：

        • 盒子必须指定了宽度width

        • 盒子左右的外边距都设置为auto

        • 语法：margin-left:auto;/margin-left;/margin:auto;/margin:0 auto;

        • 注意：但是如果是行内元素或者行内块元素，需要水平居中对齐则可以使用text-aline:center即可

        • 代码

          <!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>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            /* 盒子上边距0px，左右水平居中对齐 */
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="header"></div>
</body>

</html>

        • 结果

      • 外边距合并

        • margin定义块元素，垂直外边距时，出现外边距合并

        • 情况1：相邻块元素垂直外边距的合并

          • 相邻两个外边距都有值则取两个值中较大者为相邻块元素的垂直外边距

          • 解决方法：尽量给相邻两个盒子中的一个盒子设置一个margin外边距值就可以了

          • 代码

            <!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>
        .damao,
        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .damao {
            margin-bottom: 100px;
        }

        .ermao {
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</body>

</html>

          • 结果

        • 情况2：嵌套块元素的垂直外边距的塌陷

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

          • 解决方案

            • 为父元素定义 上边框

            • 为父元素定义上内边距

            • 为父元素添加overflow：hidden

            • 代码

              <!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>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* border: 1px solid black; */
            padding: 1px;
        }

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

<body>
    <div class="father">
        <div class="son"></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>Document</title>
    <style>
        /* 这句话通常是我们css第一行代码 */
        * {
            margin: 0;
            padding: 0;
        }

        span {
            background-color: pink;
            margin: 20px;
        }
    </style>
</head>

<body>
    123
    <ul>
        <li>abcd</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</body>

</html>

      • 结果

  • ps基本操作

    • 文件--打开：可以打开我们要测量的图片

    • ctrl+R打开标尺，或者视图--标尺

    • 右击标尺打开像素为单位

    • ctrl+加号可以放大视图，ctrl+减号为缩小

    • 按住空格键是抓手工具

    • 矩形选区工具，可以测量大小

    • ctrl+D取消选区，或者点击一下旁边空白区域

  • 案例-小米商城

    • 产品标题就用h标签，不使用div

    • 大量文字出现使用p标签

    • 类名多修改样式非常灵活，后期维护比较方便

    • margin和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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

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

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

        .box img {
            /* 图片的宽度和父元素一样 */
            width: 100%;

        }

        .review {
            height: 70px;
            /* 因为没有指定宽度，所以不会撑大盒子宽度 */
            padding: 0 28px;
            font-size: 14px;
            /* margin不会撑大盒子宽度 */
            margin-top: 30px;

        }

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

        .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="xm.jpg" alt="">
        <p class="review">快递牛，整体不错手机，红米给力</p>
        <div class="apprasise">来自于1177756的评价</div>
        <div class="info">
            <h4><a href="#">redmi 手机手机手机手机...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>

</body>

</html>

    • 结果

       

转载：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程

正在加载jjj
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值