java学习笔记（26）java中的盒子模型的内边距，盒子模型的外边距

fiveym

于 2022-01-16 10:46:56 发布

阅读量360

点赞数 1

分类专栏： java 文章标签： java 前端开发语言

本文链接：https://blog.csdn.net/weixin_49750432/article/details/122520208

版权

java 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

盒子模型的基本用法：
其实就通过标签的内边距和外边距特点调整两个有包含关系标签的位置，
好比两个盒子，一大一小，大盒子装着小盒子，小盒子在大盒子内部位置如何调整
1.盒子模型：标签和标签存在包含关系时，位置的调整
2.浮动：多个标签处于同一行的位置处理问题
3.定位：块标签在页面指定未知的处理问题
块标签：独立占用银行的标签
行内标签：不会独立占用一行的标签
网页的标签都是用块标签来完成的
一般座布局使用的标签都是div帮助我们将网页划分为多个小块

一，盒子模型的内标签
内标签：padding

  <style>
                    #div{
                        border: 1px groove red;
                        width:400px;
                        height:400px;
                        padding:10px 20px 30px 40px;
                        /*内边距：内部元素距离当前块元素边界的距离，
                        向外拓展，按照顺时针拓展*/
                    }
                </style>
                <body>
                    <div id="div1">
                        龙卷风摧毁停车场
                    </div>    
                </body>

在这里插入图片描述

二，盒子模型外边距
外标签：margin当前块标签外部和父级标签之间的距离

<style>
                #div1{
                    border:1px solid red;
                    background-color:green;
                    width::300px;
                    height:300px;
                    margin:10px 20px 30px 40px;
                }
            </style>
            <body>
                <div id="div1"></div>
            </body>

在这里插入图片描述
ps：个人学习笔记，如有错误请大佬指正（doge）

fiveym

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java学习笔记（26）java中的盒子模型的内边距，盒子模型的外边距

盒子模型的基本用法：其实就通过标签的内边距和外边距特点调整两个有包含关系标签的位置，好比两个盒子，一大一小，大盒子装着小盒子，小盒子在大盒子内部位置如何调整1.盒子模型：标签和标签存在包含关系时，位置的调整2.浮动：多个标签处于同一行的位置处理问题3.定位：块标签在页面指定未知的处理问题块标签：独立占用银行的标签行内标签：不会独立占用一行的标签网页的标签都是用块标签来完成的一般座布局使用的标签都是div帮助我们将网页划分为多个小块一，盒子模型的内标签内标签：padding <
复制链接

扫一扫