• 技术文章 >web前端 >html教程

    html里面什么是盒子

    coldplay.xixicoldplay.xixi2021-02-26 15:26:54原创5590

    html里的盒子:1、【margin】合起来写的属性;2、【border】边框合写的属性;3、【padding】上右下左, 对边补齐。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、html5版,DELL G3电脑,该方法适用于所有品牌电脑。

    html里的盒子:

    1、margin 合起来写的属性

    4个

    当你写一个的时候,四个全部相同

    两个的时候,上右,对边补齐

    三个的时候,上右下,对边补齐

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

    这四个属性可以单独的拿出来写

    2、border 边框 合写的属性

    border-color 颜色

    border-top-color: ;

    border-left-color:

    border-style 样式

    也分上下左右

    border-width 宽度

    也分上下左右

    写的时候不需要区分顺序

    3、padding

    上右下左

    对边补齐

    定义的width和height只是content部分

    padding和border会把盒子撑大

    盒子的大小 content+padding+border

    699a8626edefe79479c16bc0267f287.png

    实例

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>框模型</title>
      <link rel="stylesheet" type="text/css" href="css/day03.css"/>
     </head>
     <body>
    <div class="d04_01">今天星期三</div>
      
      
      
     </body>
    </html>

    结果

    178413c684037457f3015b38634a3ba.png

    相关学习推荐:html视频教程

    以上就是html里面什么是盒子的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:html 盒子
    上一篇:html中空格有什么表示 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• HTML与CSS的盒子模型• 弹性盒子布局flex是什么• 什么是盒子模型• css盒子中的图如何居中
    1/1

    PHP中文网