尚硅谷html5+css3（3）布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了尚硅谷html5+css3（3）布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

尚硅谷html5+css3（3）布局,html5,css3,前端

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>

尚硅谷html5+css3（3）布局,html5,css3,前端

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>

尚硅谷html5+css3（3）布局,html5,css3,前端

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>

尚硅谷html5+css3（3）布局,html5,css3,前端

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>

尚硅谷html5+css3（3）布局,html5,css3,前端

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>

尚硅谷html5+css3（3）布局,html5,css3,前端

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>

尚硅谷html5+css3（3）布局,html5,css3,前端