CSS盒子模型（08-34课）

最新推荐文章于 2023-07-06 06:56:50 发布

皮匠大大

最新推荐文章于 2023-07-06 06:56:50 发布

阅读量371

点赞数 1

分类专栏： CSS初学文章标签： html css

本文链接：https://blog.csdn.net/weixin_45727991/article/details/109905526

版权

CSS初学专栏收录该内容

18 篇文章 2 订阅

订阅专栏

08课、盒子模型导读

09、看透网页布局本质

1、页面布局的三大核心：盒子模型、浮动、定位

2、网页布局过程
①先准备好相关的网页元素，网页元素基本都是盒子box
②利用CSS设置好盒子样式，然后摆到相应位置
③往盒子里面装内容

3、网页布局的核心本质：就是利用CSS摆盒子

10、盒子模型的组成部分（box model）

1、所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个承装内容的容器
2、CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括
边框（border）、外边距（margin）、内边距（padding）和实际内容（content）

11、盒子模型边框border

1、边框有三部分组成：边框宽度（width）、边框样式（style）、边框颜色（color）

在这里插入图片描述

边框样式的可能值：主要记住solid、dashed、dotted这三个
在这里插入图片描述
eg：给一个div标签添加一个border

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* 边框粗细，用px为单位 */
            border-width: 5px;
            /* 边框样式，具体见插图 */
            border-style: dotted;
            border-color: greenyellow;
        }
    </style>
</head>

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

</html>

12、边框的符合写法

1、语法：
（没有先后顺序）

border: 1px solid red;

2、边框的分开写法：（可以只定义上border-top、下border-bottom、左border-left、右边框border-tight）
eg：

 border-top: 13px solid pink;

13、表格细线边框

1、为了防止两个表格单元的边缘重复部分变粗，
用border-collapse: collapse;将边框合并
eg：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        td,
        th {
            border: 1px solid pink;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th colspan="2">排名</th>
                <!--合并左右单元格，删去多余的单元格-->
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="domn.jpg"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>333</td>
                <td>111</td>
                <td><a href="#">贴吧</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

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

比如原来的盒子大小为100100，加了10px的边框后，盒子的大小为120120

15、盒子模型内边距padding

1、padding属性用于设置内边距，即边框与内容之间的j距离。（默认是上、左、右为0）
可以设置上下左右的边距：
在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
            font-size: 15px;
            /* 下面设置边距 */
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
        }
    </style>
</head>

<body>
    <div>老人跪哈皮如何高日国家毫日就挨个日高人品好高日光和更加容为机构日号人工湖阿婆人哈破乳好尬爱狗日竣工IG奥俄日奥为热警告而交若干</div>
</body>

</html>

16、padding边距的简写方法

在这里插入图片描述

eg：

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

可以改为：padding: 10px;

17、padding会影响盒子的实际大小

效果和外边距一样，盒子会变大，变大的距离就是边距的距离

18、19、padding应用-新浪导航栏

1、给盒子宽度 or 不给盒子宽度（更好）在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: rgb(236, 232, 232);
            /*保证文字居中对齐*/
            line-height: 41px;
        }

        .nav a {
            /* 转为行内块元素 */
            display: inline-block;
            height: 41px;
            /* 上下不必再设置内边距，因为已经垂直对齐了，左右要设置20px的内边距 */
            padding: 0 20px;
            font-size: 12px;
            color: black;
            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>

20、小米侧边栏修改

            /* 文字向右缩进 */
            /* text-indent: 2em; */

            /* 要通过padding内边距来修饰 */
            padding-left: 30px;

21、padding不会撑开盒子的情况（即盒子宽度不会变大）

1、当盒子的宽度未设置，且默认为浏览器的宽度时，padding不会撑开盒子
2、在子标签内部，且该子标签未设置宽度，则给子标签padding时，不会撑开盒子

22、盒子模型外边距 margin

1、盒子与盒子之间的空隙称为外边距（margin）（默认为0，盒子之间是紧紧挨在一起的）
2、属性同样有上下左右四个：
在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 80px;
            background-color: greenyellow;
            /* 设置下边距 */
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>

</html>

简写方式：与padding的完全一致
1个：上下左右
2个：上下、左右
3个：上，左右、下
4个：顺时针

23、外边距典型应用-块级盒子水平居中对齐

1、外边距可以让盒子水平居中，但有两个条件：（盒子一般是默认贴在左侧的）
①盒子必须指定宽度
②盒子左右的边距都设置为auto
常见auto的三种写法：

margin-left: auto;margin-right: auto;
margin: auto;（不推荐）
margin: 0 auto;

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

1、给父亲元素添加text-align: center;即可（无论是文字/图片都可以）

25、外边距合并-相邻元素垂直外边距的合并

1、当上下相邻的两个块元素（兄弟关系）相遇时，如果上边的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是二者之和，，而是取两个值中的较大者。
2、解决方法，尽量只给一个盒子添加margin值
在这里插入图片描述

26、外边距合并-嵌套块元素塌陷

1、对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
在这里插入图片描述
解决方案：
①为父元素定义一个上边框
②为父元素定义一个上内边距（0px即可）
③为父元素添加overflow:hidden

27、清除内外边距

1、不同的浏览器，不同的网页元素，可能默认就有一定的内外边距，因此在布局之前，首先要清除网页元素的内外边距。

        * {
            padding: 0;
            margin: 0;
        }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不会设置上下内外边距，但是转换为块级和行内块元素就可以了

28、PS的基本操作

1、打开标尺：视图-标尺（或者Ctrl+R）右击标尺，改单位为像素
2、用矩形选框工具可以精确测量图片的像素大小
3、吸管工具用于取色，再点击右下角拾色器即可看到类似#ff6700的颜色编码

29、综合按例-1、产品模块布局分析

1、div-box
2、img
3、p-review
4、div-appraise
5、div-info 在这里插入图片描述

30、31、32、综合按例-box布局、图片和段落

1、用ps量出宽高
2、修改页面背景
3、给一个大盒子设置宽高、背景色、边距
4、插入图片（为了不让图片大小超出盒子大小，CSS给img设置宽为100%）
eg：

        .box img {
            width: 100%;
        }

5、加入段落（段落必须给出具体高度，这是为了保证在段落文字过多或过少的情况下，段落下面的内容都能够正常显示）

            height: 70px;
            font-size: 14px;
            /* 由于p没有width属性，所有padding不会撑开盒子的宽度 */
            padding: 0 28px;
            /* ，但是用padding设置上下空隙会撑开盒子，所以用margin设置上下间隙 */
            margin-top: 30px;

6、加入评价模块、简介模块、价格模块

7、竖线细节制作

最终的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合按例-产品模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

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

        .box {
            width: 300px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;
        }

        /* 为了不让图片大小超出盒子大小，CSS给img设置宽为100% */
        .box img {
            width: 100%;
        }

        .review {
            height: 70px;
            font-size: 14px;
            /* 由于p没有width属性，所有padding不会撑开盒子的宽度 */
            padding: 0 28px;
            /* ，但是用padding设置上下空隙会撑开盒子，所以用margin设置上下间隙 */
            margin-top: 30px;
        }

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

        .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="../image/makeup.jpg" alt="">
        <!-- 简介 -->
        <p class="review">昂六二和该如何改UR嘎哈如何噶 挨个朴仁焕该UR好个屁爱人固化日挂号日和阿偶如果哈UR好尬UR鹅湖奥瑞格哈UR哈尔魏噶</p>
        <!-- 评论 -->
        <div class="appraise">来自于1173842的评价</div>
        <!-- 产品名称+价格 -->
        <div class="info">
            <h4><a href="#">华为无线耳机...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>

</html>