HTML 4—盒子

CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

边框

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        .box1 {
            /* 
                使用width来设置盒子内容区的宽度
                使用height来设置盒子内容区的高度
                
                width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
                盒子可见框的大小由内容区，内边距和边框共同决定
             */
            width: 100px;
            height: 100px;
            /* 设置背景颜色 */
            background-color: #bfa;
            /* 
                要为一个元素设置边框必须指定三个样式
                border-width：边框的宽度
                border-color：边框颜色
                border-style：边框的样式
                设置边框时，由于大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
                    所以只写border-style在这些浏览器中也可以
             */
            /*设置边框的宽度*/
            /* border-width: 100px; */
            /*
                使用border-width可以分别指定四个边框的宽度
                如果在border-width指定了四个值，
                    则四个值会分别设置给上右下左，按照顺时针的方向设置的
                如果指定三个值，
                    则三个值会分别设置给上 左右 下
                如果指定两个值，
                    则三个值会分别设置给上下 左右 

                除了border-width, CSS中还提供了四个border-xxx-width
                    xxx的值可能是top right bottom left
                专门用来设置指定边的宽度
            */
            /* border-width: 10px 20px 30px 40px; */
            /* border-width: 10px 20px 30px ; */
            border-width: 10px 20px;
            /*
                设置边框的颜色
                和宽度一样，color也提供四个方向的样式，可以分别指定颜色
                    border-xxx-color
            */
            /* border-color: red; */
            /* border-color: red yellow orange blue; */
            /* border-color: red yellow orange; */
            border-color: red yellow;
            /*
                设置边框的样式
                可选值:
                    none 默认值没有边框
                    solid 实线
                    dotted 点状边框
                    dashed 虚线
                    double 双线
                style也可以分别指定四个边的边框样式，规则和width一致，
                同时它也提供border-xxx-style四个样式，来分别设置四个边
            */
            border-style: dotted double;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /* 
                border
                    边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
                    而且没有任何的顺序要求
                border一指定就是同时指定四个边不能分别指定

                border-xxx
            */
            /* border: red solid 10px; */
            /* border-left: red solid 10px; */
            /*border-top: red solid 10px;
            border-bottom: red solid 10px;
            border-left: red solid 10px;*/
            border: red solid 10px;
            border-right: none;
        }
    </style>
</head>

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

</html>

内边距

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>盒子模型内边距</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*设置边框*/
            border: 10px red solid;
            /*
                内边距(padding)，指的是盒子的内容区与盒子边框之间的距离
                    一共有四个方向的内边距，可以通过:
                        padding-top
                        padding-right
                        padding- bottom
                        padding-left
                            来设置四个方向的内边距
                内边距会影响盒子的可见框的大小
                内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
                盒子的大小由内容区、内边距和边框共同决定
                盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
                可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border- bottom-width
            */
            /* padding-top: 100px; */
            /*设置右内边距*/
            /* padding-right: 100px;
            padding-bottom: 100px;
            padding-left: 100px; */
            /* 使用padding可以同时设置四个边框的样式，规则和border-width一致 */
            /* padding: 100px; */
            /* padding: 100px 200px; */
            padding: 100px 200px 300px;
        }

        .box2 {
            width: 100%;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>

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

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

</html>

 外边距

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>盒子模型外边距</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /*设置边框*/
            border: 10px red solid;
            /*
                外边距指的是当前盒子与其他盒子之间的距离，
                他不会影响可见框的大小，而是会影响到盒子的位置。
                盒子有四个方向的外边距：
                    margin-top
                    margin-right
                    margin-bottom
                    margin-left

                由于页面中的元素都是靠左靠上摆放的，
                所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变
                设置box1的上外边距，盒子上边框和其他的盒子的距离
            */
            /* margin-top: 100px; */
            /*左外边距*/
            /* margin-left: 100px; */
            /* 右下外边距 */
            /* margin-right: 100px;
            margin-bottom: 100px; */
            /*
                外边距也可以指定为一个负值
                如果外边距设置的是负值，则元素会向反方向移动
            */
            /* margin-left: -150px;
            margin-top: -100px;
            margin-bottom: -100px; */
            /*
                margin还可以设置为auto, auto一般只设置给水平方向的margin
                如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
                垂直方向外边距如果设置为auto,则外边距默认就是0

                如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值
                    就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
                    以使子元素在父元素中水平居中
            */
            /* margin-left: auto;
            margin-right: auto; */
            /* 外边距同样可以使用简写属性margin,可以同时设置四个方向的外边距 */
            margin: 0 auto;
        }

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

        /* 
            垂直外边距的重叠
                在网页中垂直方向的相邻外边距会发生外边距的重叠
                所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和 
                如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
        */
        .box3 {
            width: 100px;
            height: 100px;
            background-color: red;
            /*为上边的元素设置-一个下外边距*/
            margin-bottom: 100px;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: green;
            /*为下边的元素设置一个上外边距*/
            /* margin-top: 100px; */
            margin-top: 200px;
        }

        .box5 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*为box5设置一个上边框*/
            /* border-top: 1px red solid; */
            /* padding-top: 1px; */
            padding-top: 100px;
        }

        .box6 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <!--a-->
    <div class="box4"></div>
    <div class="box5">
        <!-- a -->
        <div class="box6"></div>
    </div>
</body>

</html>

 默认样式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*
            浏览器为在页面中没有样式时， 也可以让页面有一个比较好的显示效果
            所以为很多的元素都设置了一些默认的margin和padding，
            而它的这些默认样式，正常情况下我们是不需要使用的

            所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
        */
        /* body {
            margin: 0;
        }

        p {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
        } */

        * {
            margin: 0;
            padding: 0;
        }

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

        p {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

</body>

</html>

 内联元素的盒子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span {
            background-color: #bfa;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .s1 {
            /*内容区、内边距、边框、外边距*/
            /*
                内容区
                    内联元素不能设置width和height
                    内联元素可以设置水平方向的内边距
                    内联元素可以设置垂直方向内边距，但是不会影响页面的布局

            */
            /* width: 100px;
            height: 100px; */
            /* 设置水平方向内边距 */
            /* padding-left: 100px;
            padding-right: 100px; */
            /*垂直方向内边距*/
            /* padding-top: 50px;
            padding-bottom: 50px; */
            /*为元素设置边框*/
            /* border:50px blue solid; */
            /*水平外边距*/
            margin-left: 100px;
            margin-right: 100px;
            /*内联元素不支持垂直外边距*/
            margin-top: 200px;
            margin-bottom: 200px;
        }

        .s2 {
            /*
                为右边的元素设置一个左外边距
                水平方向相邻的外边距不会重叠，而是求和

            */
            margin-left: 100px;

        }
    </style>
</head>

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

</html>

 display和visibility

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a {
            background-color: #bfa;

            /* 
                将一个内联元素变成块元素 
                通过display样式可以修改元素的类型
                可选值:
                    inline:可以将一个元素作为内联元素显示
                    block:可以将一个元素设置块元素显示
                    inline-block:将一个元素转换为行内块元素
                        可以使一个元素既有行内元素的特点又有块元素的特点
                            既可以设置宽高，又不会独占一行
                    none: 不显示元素，并且元素不会在页面中继续占有位置

            */
            display: none;
            /*为其设置一个宽和高*/
            width: 500px;
            height: 500px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: orange;
            /*
                display: none;
                使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
            */
            /* display: none; */
            /*
                visibility
                    可以用来设置元素 的隐藏和显示的状态
                可选值:
                    visible 默认值，元素默认会在页面显示
                    hidden 元素会隐藏不显示
                使用visibility: hidden;隐藏的元素虽然不会在页面中显示，
                    但是它的位置会依然保持
            */
            visibility: hidden;
        }
    </style>
</head>

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

    <a href="#">我是一个大大的超链接</a>

    <span>hello</span>
</body>

</html>

 overflow

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 
                子元素默认是存在于父元素的内容区中，
                理论上讲子元素的最大可以等于父元素内容区大小
                如果子元素的大小超过了父元素的内容区，则超过的大小会在父无素以外的位置显示 
                    超出父元素的内容，我们称为溢出的内容
                父元素默认是将溢出内容，在父元素外边显示，
                通过overflow可以设置父元素如何处理溢出内容:
                    可选值:
                        visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
                        hidden，溢出的内容， 会被修剪，不会显示
                        scroll，会为父元素添加滚动条，通过拖动滚动条来查看完整内容
                            该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
                        auto，会根据需求自动添加滚动条，
                            需要水平就添加水平
                            需要垂直就添加垂直
                            都不需要就都不加

            */
            overflow: auto;
        }

        .box2 {
            width: 100px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>

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

</body>

</html>

 文档流

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>
</head>

<body>
    <!--     
        文档流
            文档流处在网页的最底层，它表示的是一个页面中的位置，
            我们所创建的元素默认都处在文档流中
        元素在文档流中的特点
            块元素
                1.块元素在文档流中会独占一行，块元素会自上向下排列
                2.块元素在文档流中默认宽度是父元素的100%
                3.块元素在文档流中的高度默认被内容撑开

            内联元素
                1.内联元素在文档流中只占自身的大小，会默认从左向右排列
                    如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右
                2.在文档流中，内联元素的宽度和高度默认都被内容撑开
     -->
    <!--
        当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，
        　　而是会自动修改宽度，以适应内边距
    -->

    <div style="width: 100px; height: 100px; background-color: #bfa;"></div>
    <div style="width: 100px; height: 100px; background-color: #ff0;"></div>
    <div style="background-color: #bfa;">a</div>
    <div style="background-color: orange;; padding-left: 200px;">a</div>
    <div style="background-color: red;">
        <div style="height: 100px;"></div>
    </div>



    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>


</body>

</html>

 浮动

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            /* display: inline-block; */
            width: 200px;
            height: 200px;
            background-color: red;
            /*
                块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开
                    如果希望块元素在页面中水平排列，可以使块元素脱离文档流
                使用float来使元素浮动，从而脱离文档流
                    可选值:
                        none，默认值，元素默认在文档流中排列
                        left，元素会立即脱离文档流，向页面的左侧浮动
                        right，元素会立即脱离文档流，向页面的右侧浮动
                当为一个元素设置浮动以后(float属性是一个非none的值)，
                    元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
                    元素浮动以后，会尽量向页面的左上或这是右上漂浮
                    直到遇到父元素的边框或者其他的浮动元素
                    如果浮动元素上边是一个没有浮动的块元素，则合动元素不会超过块元素
                    浮动的元素不会超过他上边的兄弟元素最多边

            */
            float: right;
        }

        .box2 {
            /* display: inline-block; */
            width: 250px;
            height: 250px;
            background-color: yellow;
            float: right;
        }

        .box3 {
            /* display: inline-block; */
            width: 200px;
            height: 200px;
            background-color: green;

        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float: left;
            /* 
                浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周困，
                    所以我们可以通过浮动来设置文字环烧图片的效果 
            */

        }

        .p1 {
            height: 200px;
            background-color: yellow;
        }


        .box4 {
            /*
                在文档流中，子元素的宽度默认占父元素的金部
            */
            background-color: #bfa;
            /*
                当元素设置浮动以后，会完全脱离文档流。 
                块元素脱离文档流以后，高度和宽度都被内容撑开
            */
            float: left;
        }

        .s1 {
            /*开启span的浮动*/
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!--     
        <div class="box1"></div><div class="box2"></div><div class="box3"></div> 
    -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <div class="box"></div>
    <p class="p1">
        爱如手中沙，抓太紧反而会从指缝间流失；情如是水中月，试图捞起反而愈觉虚幻；红尘如镜里花，几场花开花谢就是一片水云。想一个人，就是把水变成泪；爱一个人，就是把泪变成血；恨一个人，就是把血泪凝固成的玫瑰。忘记一个人，是撕开胸膛，打开血管，把玫瑰一朵一朵地从里面掏出来，碾碎，踩烂，还原成血，成泪，成水。随着时光的流逝，有的伤口愈合了，有的永远也无法痊愈，春风秋雨走过，依然会开出大片大片的繁花，长出无边的青草苍苔。
        风懂得云的，云懂得月的，月懂得水的爱恋，水懂得花的心事，花懂得蝶的呢喃，蝶懂得风的温柔。一个人可以爱很多次，才可以做到无伤？心可以伤多少次，才能够做到无痕？年少时不懂爱，却那样地追逐与被追。年长时懂得了爱，却了爱与被爱的。失去了，才懂得；了，才懂得一次擦肩，往往就是一生。但错过的，都不是懂你的那个人，懂你的，永远都会默默地为你祝福，为你守候，一辈子。
        　　 懂得可遇而不可求，也许你苦苦寻了一辈子也找不到，也许你不经意的一个回眸，便发现了那么一个人。他是那么的懂你，而你也是那么懂他，水乳交融，没有一点罅隙，仿佛就为你单个儿打造的一般。
        这世间所有最深的，都源自懂得。有缘相知，真心相伴，便有了交集。懂得，是的交汇，是一种心语；相知的两个人，在彼此默默无语间，因懂得让心有了贴近，那份柔情有了所系，心有灵犀。懂得，是一种牵念，让相遇的两个人心中彼此珍惜。世间的，也需要一种懂得，互相依存。不能相守的人们，心里懂得，有一种爱是看不见的容颜，却深深在脑海里；触不到的爱意，却浓情在两心之中。懂得，默默陪伴，无需海誓山盟，却也能相伴永远；有一种懂得，即使不言不语，却总会暖到落泪。懂得，是一种。默默相伴，寂然不语，静静，悄悄落泪。人的一生，都在寻找一个知音，一个与自己着一模一样灵魂的人。高山流水，一曲相知。魂交集，心贴近，情相系，爱皈依。看不见，摸不着，却浓浓。不言不语，即已心灵相通。没有，不要承诺，却日日相伴，静静相守。
    </p>

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

    <span class="s1">hello</span>
</body>

</html>

 

posted @ 2020-07-13 09:32  我等着你  阅读(523)  评论(0)    收藏  举报