CSS简单学习（四）-盒子模型

最新推荐文章于 2022-07-24 22:18:42 发布

zhang___gang

最新推荐文章于 2022-07-24 22:18:42 发布

阅读量465

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/zhang___gang/article/details/84885735

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

盒子模型

可以把页面中的元素都可以看做一个盒子，占据着一定的页面空间，这些占据的空间往往比单纯的内容要大，换句话说，我们可以通过调整盒子的边框和距离的参数来调整盒子的位置。

形式如下：

Border

border有style，width和color属性

内边距

padding用于控制content于border之间的距离（元素的边框和内容的距离），如下所示：

padding-top,padding-right,padding-bottom,padding-left

padding的属性概念很简单，但在CSS中与margin配合能使得页面千变万化。

示例：

<!--内边距-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style type="text/css">
        body{
            padding: 20px;
            background-color: yellowgreen;
        }
        p{
            /*padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 5px;
            padding-left: 10px;*/
            /*等价形式，四个方向都写，顺时针方向，上右下左*/
            /*padding:5px 10px 5px 10px;*/
            /*等价形式，左右相同，上下相同时，上下5px，左右10px*/
            /*padding:5px 10px;*/

            /*若是上下左右都相同：*/
            padding: 10px;

            border: solid 1px pink;
        }
        span{
            border: 1px blue;
        }
    </style>
</head>
<body>
    <p><span>CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。
        CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。
        外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。<br/>
        样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。
        内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。<br/>
        名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。
        具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。
        样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。</span></p>
</body>
</html>

外边距

元素边框和周围元素的距离，可能是父级，可能是统计

margin-left, margin-right, margin-bottom, margin-top

元素类型：

块级元素，上下左右margin都可以
行级元素，左右margin可以设定，上下最好不要设定，否则会很混乱
元素可以通过CSS中的display属性去改变，块级（block），行级（inline），行内快（inline-block）
块级元素可以嵌套块级元素和行级元素
行级元素只能嵌套行级元素
对于两个元素的垂直方向外边距：取较大值，而不会叠加
水平方向外边距：取两个外边距之和（并非两个都要调整，能达到目的就行）
margin除了设置正数以为，也可以设置负数（往相反的方向移动，甚至覆盖在另外的块上）
margin可以针对当个方向设定，也可以整合，语法与padding一样（margin:1px,23px,34px,234px; .. ....）

调试：可以在浏览器中调试，Chrome浏览器按F12调试

示例：

<!--外边距-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style type="text/css">
        div{
            border: solid 1px blue;
            padding:3px;
        }
        /*.p1{
            border: solid 1px green;
            margin-top: 0px; !*默认左右是0*!
            margin-bottom: 5px;
        }
        .p2{
            border: solid 1px red;
            margin-top: 20px; !*垂直方向取最大值，5和20中20大，所以取20*!
        }*/

        /*使两个元素挨在一起,两个都设为0*/
        .p1{
            border: solid 1px green;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .p2 {
            border: solid 1px red;
            margin-top: 0px;
        }

        .s1{
            margin-right: 10px;
        }
        .s2{
            margin-left: 10px;
        }/*水平方向取和，所以10+10，所以取20（注：并非两个都要设置，能达到目的就行*/

    </style>
</head>
<body>
    <div>
        <p class="p1">这是一个段落</p>
        <p class="p2">这也是一个段落</p>

        <span class="p1 s1">span1</span>
        <span class="p2 s2">span2</span>
    </div>
</body>
</html>