尚硅谷html5+css3（3）布局

葵花zi

已于 2024-04-09 17:33:26 修改

阅读量322

点赞数 1

文章标签： html5 css3 前端

于 2024-04-08 15:44:56 首次发布

本文链接：https://blog.csdn.net/l141930402/article/details/137477086

版权

本文详细介绍了CSS中的文档流、盒子模型及其各个组成部分，包括元素在文档流中的特点、块级和行内元素的区别，以及盒子模型下的内容区、内边距、边框和外边距的设置和作用。此外，还探讨了元素的布局方式、外边距折叠现象，以及行内元素的特殊性，如浏览器默认样式和圆角的实现。

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

1.文档流normal flow

-网页是一个多层结构

-通过CSS可以分别为每一层设置样式

-用户只能看到最顶层

-最底层：文档流（我们所创建的元素默认都是从文档流中进行排列）

<head>
    <style>
        .box1 {
            background-color: blue;
        }
        /*它的父元素为body*/
        .box2 {
            width: 100px;
            background-color: red;
        }
        span {
            background-color: aqua;
        }
    </style>
</head>
<!--
    元素有两个状态：在文档流中/不在文档流（现在只考虑前者）
    -元素在文档流（基岩）中有什么特点：（元素也可以脱离文档流，不再区分块和行内）
        -块元素 div
            --块元素会在页面中独占一行
            --默认宽度时父元素的全部（即浏览器设置宽度为多少，背景就宽多少）
            --默认高度是子元素的总和
        -行内元素 span
            --行内元素不会只占一行，只占自身大小
            --在页面中自左向右排列(若一行容纳不了，则会换行)
            --默认高度和宽度跟里面的元素有关
    -->

<body>
    <!--两个块元素-->
    <div class="box1">
        我是div1
    </div>
    <div class="box2">
        我是div2
    </div>
    <span>我是span1</span>
    <span>我是span2</span>
</body>

2.盒子模型

<!--盒子模型(对元素进行布局)
    -CSS将页面中的所有元素都设置了一个矩形的盒子
    -将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置
    -每一个盒子都有一下几个部分组成：
        --内容区（content）
        --内边距（padding）
        --边框（border）
        --外边距（margin），决定盒子位置
-->

<head>
    <style>
        .box1 {
            /*内容区content，元素中的所有子元素和文本都在内容去中
            大小由width和height来设置*/
            width: 100px;
            height: 100px;
            background-color: aqua;
            /*边框border，边框属于盒子边缘
            设置边框：
                宽度 border-width
                颜色 border-color
                样式 border-style
            边框的大小会影响到盒子大小（盒子内容一直不变）
            */
            border-width: 20px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>

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

</body>

1.盒子模型-边框

<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: rgb(6, 106, 139);
            /*边框，下面三个元素缺一不可（border-width有默认值，一般3px）*/
            /*border-xxx-width,xxx可以为top right bottom left来指定某一个边的宽度*/
            border-width: 10px 20px 30px 40px;
            /*边框上右下左（顺时针）宽度*/

            /*指定边框颜色，同样可以分别制定四个边框的颜色，也可以用border-xxx-color指定颜色*/
            border-color: orange red yellow green;

            /*指定边框样式，与上面类似。默认值为none（无边框）
                solid 实线
                dotted 点状虚线
                dashed 虚线
                double 双线*/
            border-style: solid dotted dashed double;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(6, 106, 139);
            /*border简写属性,没有顺序要求
            border-xxx xxx可以为top right bottom left单独设置一边的样式*/
            border: solid 10px orange;
            /*单独去掉一边*/
            border-bottom: none;
        }
    </style>
</head>

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

2.盒子模型-内边距

<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: rgb(6, 106, 139);
            border: solid 10px orange;
            /*内边距padding
                -内容区和边框之间的距离
                -四个方向：padding-top/right/bottom/left

                内边距的设置会影响到盒子大小，颜色默认为内容颜色
                盒子可见框的大小由内容区+内边距+边框共同决定*/
            padding-top: 50px;
            padding-bottom: 50px;
            padding-left: 50px;
            padding-right: 50px;
            /*padding的简写,上右下左，跟前面的border一样*/
            padding: 10px 20px 30px 40px;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="inner">

        </div>
    </div>

</body>

3.盒子模型-外边距

<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: aqua;
            border: 10px red solid;
            /*外边距margin
                不影响盒子可见框的大小
                影响盒子的位置
                共有四个方向的外边距：
                margin-top/right/bottom/left
          */
            margin-top: 100px; /*盒子向下移动*/
            margin-left: 100px; /*盒子向右移动*/
            /*margin简写，跟border一样*/
            margin: 100px,100px; 
        }
    </style>
</head>

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

4.盒子模型-水平方向的布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            /*width默认为auto*/
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }

        /*元素水平方向的布局：
        元素在其父元素中水平方向的位置有以下几个属性共同决定
            margin-left
            border-left
            padding-left
            width
            padding-right
            border-right
            margin-right(一般不用，浏览器会自动调整确保下面的等式成立)
        要满足以下等式：
            上面的加起来=父元素内容区的宽度
        若不成立，则称为过度约束，等式会自动调整（一般调整margin-right）

        水平居中：width:xxxpx;margin:0 auto;
        */
        .inner {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-left: 100px;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

5.盒子模型-垂直方向的布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*元素垂直方向的布局*/
        .outer {
            width: 250px;
            height: 400px;
            background-color: #bfa;
            /*默认情况下父元素的高度被子元素撑开
            若设置具体值，则按具体值来                                                                                      */
        }

        /*子元素实在父元素的内容区中排列的
        若子元素大于父元素，则溢出
         用overflow处理溢出的子元素
            overflow:visible:默认显示
                     hidden：隐藏溢出部分
                     scroll:生成两个滚动条，通过滚动条查看完整内容
                     auto 根据需要生成滚动条*/
        .inner {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner">111111111111111111111111111111111111111111111
            111111111111111111111111111111111111111111111111111111111
        </div>
    </div>
</body>

6.盒子模型-外边距的折叠

（1）兄弟元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*外边距的重叠
            "相邻"的"垂直方向"的外边距会出现重叠现象
            兄弟元素
                相邻垂直外边距取两者的较大值
                特殊情况：
                    如果外边距一正一负，则取两者的和
                    如果外边距都为负，则取绝对值大的*/
        .box1,
        .box2 {
            width: 50px;
            height: 50px;
            font-size: 50px;
        }

        /*box1的下外边距和box2的上外边距重叠了
        尽管两个加起来是200px，但实际上是100px*/
        .box1 {
            background-color: aqua;
            /*设置下外边距*/
            margin-bottom: 50px;
        }

        .box2 {
            background-color: orange;
            /*设置上外边距*/
            margin-top: 50px;
        }
    </style>
</head>

（2）父子元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*外边距的重叠
            "相邻"的"垂直方向"的外边距会出现重叠现象
            父子元素：
                相邻外边距，子元素会传递给父元素
                会影响页面的布局，因此必须要处理
                */
        /*将子元素box4下移，不移动父元素box3*/
        .box3 {
            width: 200px;
            height: 100px;
            background-color: aqua;
            padding-top: 100px;
        }
        .box4 {
            width: 100px;
            height: 100px;
            background-color: orange;

        }
    </style>
</head>
<body>
    <div class="box3">
        <div class="box4"></div>
    </div>
</body>

7.行内元素的盒子模型

<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和height无效*/
            width: 100px;
            height: 100px;
            padding: 100px;
            border: 50px solid red;
            margin: 20px;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
</head>

<body>
    <span class="s1">
        我是span
    </span>
    <div class="box1">我是box1</div>
</body>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1 {
            background-color: yellow;
            margin: 100px;
        }

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

        a {
            /*对于超链接的放大
                width和height没有用

                使用display设置元素显示的类型，这样可以使用width和height
                    可选值 （若隐藏，则不占位置）
                        inline：将元素设为行内元素
                        block：将元素设为块元素
                        inline-block:行内块元素，既可以设置宽高，又不会独占一行
                        table:将元素设为表格
                        none：隐藏（可以设置为鼠标点击而显示）*/

            /*visibility设置元素的显示状态
                可选值（若隐藏，则依然占位置）
                    visible:默认值，正常显示
                    hidden:隐藏，但是依然占据页面位置*/

            display: inline-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">我是box1</div>
</body>

8.浏览器的默认样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*浏览器的默认样式：浏览器为元素设置一些默认样式
        会影响页面布局，一般要去除浏览器的默认样式*/
        body {
            /*去除外边距*/
            margin: 0;
        }

        p {
            margin: 0;
        }

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

        /*所有元素去除默认样式：*/
        * {
            margin: 0;
            padding: 0;
        }

        /*一般不自己写，引用别人的文件来去除浏览器的默认样式
        下面这条放到<style>上面
        <link rel="stylesheet" href="./css/reset/css">*/

        .box1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;


        }
    </style>
</head>

<body>
    <!--标签之间自动有间隔（浏览器自动设置了外边距）-->
    <div class="box1">我是box1</div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>

9.盒子的尺寸

<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: #bfa;
            padding: 10px;
            border: 10px solid red;
            /*默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
            box-sizing，设置盒子尺寸的计算方式（即width和height）
                可选值
                    content-box:默认值，宽度和高度用来设置内容区的大小(140px*140px)
                    border-box:宽度和高度设置整个盒子的大小（100px*100px）
            */
            box-sizing: content-box;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px solid red;
            box-sizing: border-box;
        }
    </style>
</head>

10.轮廓和圆角

（1）轮廓

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*outline用来设置元素的轮廓线，用法和border一样
            但轮廓不会影响可见框的大小*/
            outline: 10px solid red;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <span>outline</span>
    <div class="box2"></div>
    <span>border</span>
</body>

（2）阴影

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*box-shadow:设置元素的阴影效果，不影响页面布局
            阴影默认在元素正下方，所以需要偏移量
                第1个值：水平偏移：正右负左
                第2个值：垂直偏移：正下负上
                第3个值：阴影模糊半径
                第4个值：阴影颜色
                */
            box-shadow: 10px 10px 20px rgb(0, 0, 0, .5);
        }
    </style>
</head>

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

(3)圆角

<head>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*圆角：border-radius同时设置四个角
            也可以分别设置：
                border-top-left-radius
                border-top-right-radius
                border-bottom-left-radius
                border-bottom-right-radius
            */
            /*设置圆的半径*/
            border-top-left-radius: 50px;/*正圆*/
            border-top-right-radius: 50px 100px;/*椭圆*/
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*设置为圆形*/
            border-radius: 50%;
        }
    </style>
</head>

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