CSS学习第三天

励志做一名码农_

已于 2023-04-23 23:37:31 修改

阅读量630

点赞数

文章标签： css 学习前端

于 2023-04-23 23:36:22 首次发布

本文链接：https://blog.csdn.net/qq_58791266/article/details/130321022

版权

本文深入探讨CSS布局，涵盖盒子模型、边框、内边距、外边距、浮动、清除浮动等核心概念。通过实例解析，帮助理解网页布局的原理与实践，特别强调了外边距合并的解决策略。

摘要由CSDN通过智能技术生成

1.7案例：新浪导航栏-padding影响盒子的好处

10.3.2 父级添加 overflow 属性

10.3.3. 父级添加after伪元素

10.3.4. 父级添加双伪元素

10.4清除浮动总结

1.盒子模型

1.1盒子模型本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。

2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。

3. 往盒子里面装内容.

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

1.2盒子模型组成

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，

它包括：border边框、margin外边距、padding内边距、和 content实际内容

1.3边框（border）

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式边框颜色

border : border-width || border-style || border-color

<style>
        div {
            width: 300px;
            height: 200px;

            /* border-width  边框的粗细  一般情况下都用 px */
            border-width: 5px;
            /* border-style  边框的样式  soild 实线边框   */
            border-style: solid;

            /* border-style  边框的样式   dashed 虚线边框 */
            /* border-style: dashed; */

            /* border-style  边框的样式   dotted点线边框 */
            /* border-style: dotted; */

            /* border-color  边框的颜色 */
            border-color: red;
        }
    </style>

1.4表格的细线边框

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

border-collapse:collapse;  //表示相邻边框合并在一起

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

边框会额外增加盒子的实际大小。

因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框.

2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

1.6内边距（padding）

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

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 30px;
        }
    </style>

当我们给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。

2. padding影响了盒子实际大小。

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

解决方案：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

1.7案例：新浪导航栏-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 {
            /* a 属于行内元素  此时必须要转换 转换为行内块元素*/
            display: inline-block;
            height: 41px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0 20px;
        }

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

1.8外边距（margin）

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

1.9外边距典型应用

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

① 盒子必须指定了宽度（width）。

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

<style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
        }
    </style>

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

1.10外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

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

2. 嵌套块元素垂直外边距的塌陷

1.10.1 外边距合并——相邻块元素

<style>
        .damao,
        .ermao {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .damao {
            margin-bottom: 100px;
        }

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