CSS内间距、外间距、盒子模型、块元素、内联元素、内联块元素及之间的转换

最新推荐文章于 2023-08-26 12:48:27 发布

Chains-X ♔

最新推荐文章于 2023-08-26 12:48:27 发布

阅读量4.9k

点赞数 2

分类专栏： WEB前端文章标签： web前端 CSS 内间距外间距盒子模型

本文链接：https://blog.csdn.net/mk1843109092/article/details/100067234

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

内补白（内间距）

让内容和元素的边框有一定距离

padding： 		检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top： 	检索或设置对象顶边的内部边距
padding-right： 检索或设置对象右边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left： 	检索或设置对象左边的内部边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的内边距</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:red;
            /*设置元素的内间距 让内容和元素的边框有一定距离*/
            /*注意:在使用padding的时候,会改变我们元素的实际大小*/
            /*padding-top:30px;*/
            /*padding-left:30px;*/
            /*padding-bottom:30px;*/
            /*padding-right:30px;*/

            /*padding:设置四个值的时
                第一个值代表元素顶部的内间距
                第二个值代表的是元素右边的内间距
                第三个值代表的是元素底边的内间距
                第四个值代表元素左边的内间距
            */
            /*padding:10px 20px 10px 20px;*/

            /*padding:设置两个值时
                第一个值代表上下对边的间距
                第二个值代表左右对边的间距
            */
            /*padding:10px 30px;*/

            /*padding:设置一个值时
                代表四个边的间距
            */

            /*padding:30px;*/
        }
    </style>
</head>
<body>
    <!--内边距: 指的是元素距离元素内部元素的间距-->
    <div>你好</div>
</body>
</html>

外补白（外间距）

元素距离周围元素的距离

margin： 		检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top： 	检索或设置对象顶边的外延边距
margin-right：	检索或设置对象右边的外延边距
margin-bottom： 检索或设置对象下边的外延边距
margin-left： 	检索或设置对象左边的外延边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css外间距</title>
    <style>
        div{
            width:200px;
            height:200px;
            border:10px solid yellow;
        }
        .item1{
            background:green;

            /*设置item的底部的外间距,让他距离item20px*/
            /*margin 设置外间距*/
            /*margin-bottom:20px;*/
        }
        .item2{
            background:red;
            /*单独给每一个方向设置响应的间距*/
            /*margin-top:20px;*/
            /*margin-left:20px;*/
            /*margin-right:20px;*/

            /*当设置四个值的时候
                第一个值代表当前元素距离上边元素的间距
                第二个值代表当前元素距离右边元素的而间距
                第三个值代表当前元素距离下边元素的间距
                第四个值代表当前元素距离左边元素的间距
            */
            /*margin:20px 20px 50px 50px;*/

            /*当设置两个值的时候
                第一个只代表当前元素距离顶部元素和底部元素的间距
                第二高值代表当前因素距离左右两边元素的距离
            */
            /*margin:20px 50px;*/
            /*当设置一个值的时候
                代表当前元素上下左右四周距离元素的距离
            */
            /*margin:50px;*/

            /*margin的使用技巧 让元素水平居中*/
            margin:0 auto;

            /*margin:设置负值 让边框合并*/
            /*margin-top:-10px;*/
        }
        .item3{
            background:blue;
            margin-top:-10px;
        }
    </style>
</head>
<body>
    <!--外间距: 是元素距离周围元素的距离-->
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</body>
</html>

margin相关技巧

1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

盒子真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

在布局中，如果我想增大内容和边框的距离，又不想改变盒子显示的尺寸

box-sizing：content-box | border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box1{
            width:100px;
            height:100px;
            background:green;
            border:10px solid red;
            padding:20px;
            /*由此看出我们的盒子实际大小是
                盒子的宽度=内容宽度+左右边框+padding(左右内边距)
                盒子的高度=内容高度+上下边框+padding(上下内边距)
            */
        }
        .box2,.box3,.box4{
            width: 100px;
            height:100px;
            background:green;
        }
        .box3{
            padding:20px;
            /*想改变元素距离内容的间距,但是又不想改变盒子大小*/
            /*box-sizing: border-box;*/
        }
        .box4{
            padding:20px;
            border:20px solid red;

            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</body>
</html>

块元素,内联元素,内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

支持全部的样式
如果没有设置宽度，默认的宽度为父级宽度100%
盒子占据一行、即使设置了宽度

内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

支持部分样式（不支持宽、高、margin上下）
宽高由内容决定
盒子并在一行
代码换行，盒子之间会产生间距
子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，它们在布局中表现的行为：

支持全部样式
如果没有设置宽高，宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素特点</title>
    <style>
        .box1{
            /* 块级元素
                默认宽度是父级元素的100%
                独占一行,即使设置了宽度
                支持所有的样式
            */
            width:100px;
            height:100px;
            background:green;
            margin:20px;
            padding:20px;

            text-align: center;
            line-height:100px;
        }
        span{
            /*
               内联元素:
                    不独占一行,盒子并在一行,代码换行是会产生间距
                    只支持部分样式:
                        不支持高度和宽度属性
                            宽高是由内容撑开
                        只支持左右margin值
            */
            height:100px;
            width:100px;
            background:green;
            margin:20px;
            padding:20px;
        }
        input{
            /*行内快元素
                不独占一行,盒子并行在一行,代码换行是会产生间距
                支持所有的样式
                    如果不设置宽高属性,那么他的宽高就由内容决定
            */
            width:300px;
            height:100px;
            margin:30px;
            padding:30px;
        }
    </style>
</head>
<body>
    <div class="box1"><b>box1</b></div>
    <!--上面是一个块级元素,<span>他独占一行</span>,内联元素不独占一行-->
    代码换行，盒子之间会产生间距 <br>
    上面是一个块级元素,他独占一行,<input type="text" >内联元素不独占一行

</body>
</html>

块元素,内联元素,内联块元素之间的转换

display属性是用来设置元素的类型及隐藏的，常用的属性有：

1、none 元素隐藏且不占位置

2、block 元素以块元素显示

3、inline 元素以内联元素显示

4、inline-block 元素以内联块元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素类型切换</title>
    <style>
        div{
            width: 100px;
            height: 100px;

            /*将块元素转换成内联元素*/
            /*display:inline;*/

            /*将块元素转换成内联块元素*/
            /*display:inline-block;*/
        }
        .box1{
            background:green;
        }
        .box2{
            background:red;
        }
        .box3{
            background:blue;
        }

        span{
            width:100px;
            height:100px;
            background:pink;
            /*将内联元素转换成块元素*/
            /*display:block;*/
            /*将内联元素转换成内联块元素*/
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

    display属性是用来设置元素的类型及隐藏的，常用的属性有：
    <span>1、none 元素隐藏且不占位置</span>
    <span>2、block 元素以块元素显示</span>
    <span>3、inline 元素以内联元素显示</span>
    <span>4、inline-block 元素以内联块元素显示</span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的隐藏和显示</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: red;
            /* 让元素隐藏 ,并且隐藏元素不会再占据位置*/
            display:none;
        }
        .box2{
            /*block把元素转换成块元素
               还可以显示隐藏的元素
            */
            display:block;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: green;
        }
        .box3 span{
            display:none;
        }

        /*当我鼠标移入box3的时候让字体显示*/
        .box3:hover span{
            color:pink;
            text-align:center;
            line-height:200px;
            font-size:30px;
            display:block;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box1 box2">box2</div>

    <div class="box3">
        <span>我显示le</span>
    </div>
</body>
</html>

Chains-X ♔

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS内间距、外间距、盒子模型、块元素、内联元素、内联块元素及之间的转换

CSS间距内补白（内间距）让内容和元素的边框有一定距离padding：检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;padding-top：检索或设置对象顶边的内部边距padding-right：检索或设置对象右边的内部边距padding-bottom：检索或设置对象下边的内部边距padding-left：检索或设置对象左边...
复制链接

扫一扫

专栏目录