Web前端学习笔记5（布局）

最新推荐文章于 2024-07-23 14:07:14 发布

MYH永恒

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量172

点赞数

分类专栏： Web前端文章标签： css html html5 css3 web

本文链接：https://blog.csdn.net/mu_yongheng/article/details/113664921

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学习完基本的一些设置之后，接下来需要了解的就是网页的布局。我们所看到的网页的布局都是这一部分需要学习的知识。

知识点学习

我们平时见到的网页，都是分为一块一块的，非常有层次感。这里我们要学习的就是网页是怎么完成布局的。

1、文档流

当见到这个名词的时候我是有点懵的。其实说白了就是网页的最下面的一层。网页我们可以把它看成一个多层结构，我们通过CSS来给每一层设置样式。

<!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>
        .box1{
            background-color: indianred;
        }

        .box2{
            width: 100px;
            background-color: khaki;
        }

        span{
            background-color: lawngreen;
        }
    </style>
</head>

<body>
    <!-- 
        文档流（normal flow）
            - 网页是一个多层结构，一层摞着一层
            - 通过CSS可以给每一层设置样式
            - 作为用户我们只能看到最上面的一层
            - 这些层中，最底下的一层成为 文档流
                我们所创建的元素默认都是在文档流中进行排列
            - 对于我们来说，元素有两个状态：
                 在文档流中
                 不在文档流中

            - 元素在文档流中有什么特点：
                - 块元素
                    - 块元素会在页面中独占一行
                    - 默认宽度是父元素的全部（会把父元素撑满）
                    - 默认高度是被内容撑开（子元素）
                
                - 行内元素\
                    - 行内元素不会独占页面的一行，只会占用本身的大小
                    - 从左向右排列，一行写不完则换行
                    - 默认的宽度和高度会被内容撑开
     -->

     <div class="box1">我是div1</div>
     <div class="box2">我是div2</div>

     <span>我是span1</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
    
</body>
</html>

2、盒模型

网页中的内容其实是由一个个“盒子”组成的，网页中的盒子分为4个部分，从内到外依次为：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。如下图所示：
在这里插入图片描述

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

        .box1{
            /* 
                内容区（content），元素中的所有子元素和文本内容都在内容区中排列
                    内容区的大小由 width 和 height 两个属性来设置
             */
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 
                边框（border），边框属于盒子边缘，边框里边属于盒子内部，外边属于盒子外部
                    边框的大小会影响到盒子的大小
                设置边框需要设置3个属性：
                    边框的宽度：border-width
                    边框的颜色: border-color
                    边框的样式: border-style
             */

             border-width: 10px;
             border-color: brown;
             border-style: solid;
        }
    </style>
</head>
<body>
    
    <!-- 
        盒模型、盒子模型、框模型（box model）
            - CSS将页面中所有元素都设置了一个矩形的盒子
            - 将元素设置为矩形的盒子后，对页面布局就是将不同的盒子摆放在不同的位置
            - 每个盒子都由以下几个部分组成：
                内容区（content）
                内边距（padding）
                边框（border）
                外边距（margin）
     -->
     <div class="box1"></div>

</body>
</html>

下面将要对盒子模型的各个部分进行学习。

3、盒子模型_边框

当给一个盒子设置边框的样式的时候，总共需要设置3个属性：包括边框的宽度、颜色、样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: chartreuse;

            /* 边框 
                边框的宽度border-width可以省略不写，默认值为3个像素

                可以用来指定
                    四个值：四个边的宽度，（上 右 下 左）
                    三个值：（上 左右 下）
                    两个值：（上下 左右）
                    一个值：（上下左右）

                除了 border-width 还有 border-xxx-width
                    xxx 可以是 top right bottom left
                */

            border-width: 10px 20px 30px 40px;
            /* 可以分别指定边框的颜色 */
            border-color: coral red green blue;
            /* 指定边框的样式
                solid 表示实线
                dotted 表示虚线
                dashed 虚线
                double 双线
                 */
            border-style: solid dotted dashed double;

            /* 
                border 简写属性，通过该属性可以同时设置所有相关样式，并且没有顺序的要求
                    border-top
                    border-right
                    border-bottom
                    border-left
             */
             border:gold 10px solid;
             border-right: none;
        }



    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>

4、盒子模型_内边距

可以设置内边距的各个方向的宽度。

<!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>
        
        .box1{
            width: 200px;
            height: 200px;
            background-color: goldenrod;

            border:green solid 10px;

            /* 
                内边距（padding）：
                    内容区和边框之间的距离就是内边距
                    - 一共有四个内边距：
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left

                    - 内边距的设置会影响到盒子的大小
                    - 背景颜色会延伸到内边距上

                一个盒子的 可见框 的大小，由内容区 内边距 和 边框的大小共同决定
                    在计算盒子大小的时候需要将这些加起来

             */
             padding-top: 100px;
             padding-right: 100px;
             padding-bottom: 100px;
             padding-left: 100px;
             /* 简写 padding:()同时指定 */
             padding: 10px 20px 30px 40px;
        }

        .inner{
            width: 100%;
            height: 100%;
            background-color: greenyellow;
        }

        
         
    </style>
</head>
<body>
    
    <div class="box1">
        44
        <div class="inner">55</div>
    </div>
</body>
</html>

5、盒子模型_外边距

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: lightskyblue;
            border: 10px chartreuse solid;

            /* 
                外边距（margin）
                    - 外边距不会影响盒子可见框的大小
                    - 但是会影响到盒子的位置
                    - 一共有四个方向的外边距：
                        margin-top
                            - 上外边距，设置一个正值，元素会向下移动
                        margin-right
                            - 右外边距，不会产生任何效果
                        margin-bottom
                        margin-left

                    - 元素在页面中是按照自左向右的顺序排列的，
                        所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                        而设置下和右外边距会移动其他元素

                    - margin 也可以简写
                    - margin 会影响到盒子实际占用空间
             */

             margin-top: 100px;
             margin-left: 100px;
             /* 挤其他元素 */
             margin-bottom: 100px; 
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(0, 0, 0);
            border: 10px rgb(35, 226, 194) solid;

        }


    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

6、盒子的水平布局

要满足这个等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度
当不满足时，需要调整相应的宽度。具体见注释：

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

        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }

        .inner{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin-left: 100px;
            margin-right: 200px;
            /* 
                元素水平方向的布局：
                    元素在其父元素中水平方向的位置由以下几个属性共同决定：
                        margin-left
                        border-left
                        padding-left
                        width
                        padding-right
                        border-right
                        margin-right

                    一个元素在其父元素中，水平布局必须满足以下等式：
                        margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 父元素内容区的宽度
                        0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

                    以上等式必须满足，如果结果不成立，则称为过度约束，浏览器会自动调整：
                        - 调整的情况：
                            - 如果七个值中没有 auto 的情况，则会自动调整 margin-right (浏览器自动调整)

                            - 如果某个值为 auto,则会自动调整那个 auto 使等式成立（margin-left width margin-left）
                            0 + 0 + 0 + auto + 0 + 0 + 600 = 800  auto=200

                            - 如果将一个宽度和一个外边距设置为 auto, 则宽度调整到最大，设置为 auto 的外边距会自动为0
                            - 如果将三个值都设置为 auto, 则外边距都是0，宽度最大
                            - 如果将两个外边距设置为auto, 宽度固定值，则会将外边距设置为相同的值
                                经常利用这个特点，使内容水平居中
                                实例：
                                    wdith: xxxpx;
                                    margin: 0 auto;
                                


             */
        }

        
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">11</div>
44

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

7、垂直方向的布局

垂直方向的布局相对来讲没有这么麻烦，不过可能会出现覆盖的情况，这个时候就要使用 overflow 属性来设置可见、不可见和滚动条等等。

<!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>
        .outer{
            background-color: aqua;
            height: 600px;
            /* 
                默认情况下父元素的高度被内容撑开
             */
        }

        .inner{
            width: 100px;
            height: 200px;
            background-color: yellow;
            margin-bottom: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /* 
                子元素是在父元素内容区排列的：
                    如果子元素的大小超过了父元素，则子元素会从父元素溢出

                    使用 overflow 属性来设置父元素如何处理溢出的子元素

                    可选值：
                        visible， 默认值 子元素会从父元素中溢出，在父元素外面的位置显示
                        hidden， 溢出的内容会被裁剪（文字可能会被裁剪）
                        scroll， 生成滚动条，通过滚动条来查看完整内容
                        auto, 根据需要生成滚动条

                    overflow-x:
                    overflow-y:
             */
             overflow: auto;
        }

        .box2{
            width: 100px;
            height: 400px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div> -->

    <div class="box1">
        子元素是在父元素内容区排列的：
                    如果子元素的大小超过了父元素，则子元素会从父元素溢出

                    使用 overflow 属性来设置父元素如何处理溢出的子元素

                    可选值：
                        visible， 默认值 子元素会从父元素中溢出，在父元素外面的位置显示
                        hidden， 溢出的内容会被裁剪（文字可能会被裁剪）
                        scroll， 生成滚动条，通过滚动条来查看完整内容
    </div>
</body>
</html>

8、外边距的折叠（重叠）

相邻的垂直方向的外边距会发生重叠的现象，分为兄弟元素和父子元素的重叠。

<!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>
        .box1, .box2{
            width: 200px;
            height: 200px;
            font-size: 100px;
        }

        /* 
            外边距的重叠：
                - 相邻的垂直方向的外边距会发生重叠的现象
                - 兄弟元素
                    - 兄弟元素之间相邻垂直外边距会取两者之间的较大值（两者都是正值）
                    - 特殊情况：
                        如果相邻的外边距一正一负，则取两者之和
                        如果都是负值，取绝对值最大的

                    - 兄弟元素之间的外边距重叠，对开发是有利的，不需要进行处理

                - 父子元素
                    - 子元素间相邻外边距，子元素会传递给父元素（上外边距）
                    - 父子外边距的折叠会影响到页面的布局，必须进行处理
         */

        .box1{
            background-color: aqua;

            /* 设置一个下外边距 */
            margin-bottom: 100px;

        }

        .box2{
            background-color: brown;

            /* 设置一个上外边距 */
            margin-top: 100px;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: burlywood;
            /* padding-top: 100px; */
            /* border-top: 1px red solid; */
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->

    <div class="box3">
        <div class="box4"></div>
    </div>



</body>
</html>

9、行内元素的盒模型

行内元素不支持设置宽度和高度，可以设置内边距、外边距和边框，但是垂直方向上不会影响布局！
其中还要注意两个特殊的属性 display 和 visibility。

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

        .s1{
            background-color: yellow;
            /* 
                行内元素的盒模型：
                    - 行内元素不支持设置宽度和高度
                    - 行内元素可以设置padding，但是垂直方向padding不会影响布局
                    - 行内元素可以设置border，垂直方向的border不会影响页面的布局
                    - 行内元素可以设置margin，垂直方向的margin不会影响布局

             */
             /* width: 100px;
             height: 100px; */
             margin: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        a{
            /* 
                dispaly 用来设置元素显示的类型
                    可选值：
                        inline 将元素设置为行内元素
                        block 将元素设置为块元素
                        inline-bock 将元素设置为行内块元素
                        table 将元素设置为一个表格
                        none 将元素进行隐藏（不占用位置）

            visibility 用来设置元素的显示状态
                可选值：
                    visible 默认值，元素在页面中正常显示
                    hidden 元素在页面中隐藏 不显示，但是依然占用位置
                
            */

            visibility: visible;

            display: block;
            width: 100px;
            height: 100px;
            
            background-color: orange;
        }

    </style>
</head>
<body>

    <a href="javascript:;">超链接</a>
    <a href="javascript:;">超链接</a>

    <span class="s1">我是span</span>

    <div class="box1"></div>
</body>
</html>

10、默认样式

通常情况，浏览器都会给元素设置一些默认样式。在写网页之前我们应该将这些默认的样式消除掉。

<!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>
        /* 
            默认样式：
                - 通常情况下，浏览器都会为元素设置一些默认样式
                - 默认样式的存在会影响页面布局，通常情况下编写网页的时候会去除默认样式（PC端的页面）
         */
        body{
            margin: 0;
        }

        p{
            margin: 0;
        }

        ul{
            margin: 0;
            padding: 0;
            /* 去除项目符号 */
            list-style: none;
            margin-left: 20px;
        }

        /* 临时做个小的练习可以使用 */

        *{
            margin: 0;
            padding: 0;
        }

        /* 
            做项目的时候可以引用 .css 文件
                reset.css
                normalize.css
         */

        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    
    <div class="box1"></div>

    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
</html>

11、盒子的尺寸

box-sizing 用来设置盒子尺寸的计算方式（设置width 和 heigth 的作用）

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            padding: 10px;
            border: red 10px solid;
            /* 
                默认情况下，盒子的可见框大小由内容区、内边距和边框共同决定

                    box-sizing 用来设置盒子尺寸的计算方式（设置width 和 heigth 的作用）
                        可选值：
                            content-box 默认值，宽度和高度用来设置内容区的大小
                            border-box 宽度和高度用来设置边框的大小
             */
             box-sizing: border-box;
        }
    </style>
</head>
<body>
    
    <div class="box1">00</div>
</body>
</html>

12、轮廓和圆角

outline 用来设置元素的轮廓线，用法和border一样（常用于鼠标移动效果）
box-shadow 用来设置元素的阴影效果，不会影响页面的布局
border-radius: 用来设置圆角设置圆的半径大小

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 10px red solid;

            /* 
                box-shadow 用来设置元素的阴影效果，不会影响页面的布局 
                    第一个值：水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
                    第二个值：垂直偏移量 设置阴影的垂直位置 正值向下移动 赋值向上移动
                    第三个值：阴影的模糊半径
                    第四个值：阴影的颜色
            */
            box-shadow: -10px 10px 10px rgba(0, 0, 0, .3) ;

            /* 
                outline 用来设置元素的轮廓线，用法和border一样
                    不同之处是：轮廓不会影响到可见框的大小
             */            
        }

        /* 鼠标移入之后显示 */
        .box1:hover{
            outline: 10px yellow solid;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: royalblue;

            /* border-radius: 用来设置圆角 设置圆的半径大小*/
            /* border-top-left-radius: ; */
            /* border-top-right-radius: ; */
            /* border-bottom-left-radius: ; */
            /* border-bottom-right-radius:  */
            border-top-left-radius: 50px 100px;
            border-top-right-radius: 50px 100px;

            /* 
                border-radius: 可以用来分别指定四个角的圆角 
                    四个值 左上 右上 右下 左下
                    三个值 
                    两个值
                    一个值
            */
            border-radius: 50%;
            
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <span>hello</span>
    <div class="box2"></div>
</body>
</html>

总结

以上就是页面的布局以及盒子模型的一些知识点总结，后面将会学习浮动等等知识。

MYH永恒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端学习笔记5（布局）

学习完基本的一些设置之后，接下来需要了解的就是网页的布局。我们所看到的网页的布局都是这一部分需要学习的知识。目录知识点学习1、文档流2、盒模型3、盒子模型_边框4、盒子模型_内边距5、盒子模型_外边距6、盒子的水平布局7、垂直方向的布局8、外边距的折叠（重叠）9、行内元素的盒模型10、默认样式11、盒子的尺寸12、轮廓和圆角总结知识点学习我们平时见到的网页，都是分为一块一块的，非常有层次感。这里我们要学习的就是网页是怎么完成布局的。1、文档流当见到这个名词的时候我是有点懵的。其实说白了就是网页的最
复制链接

扫一扫