首页 > 软件开发 > HTML >

html中的盒子模型深层次的讲解

来源:互联网 2023-03-16 19:08:20 版权归原作者所有,如有侵权,请联系我们

盒子模型型往往对于刚开始学习html的人来说弄清楚是非常的重要的对于刚开始学习网站的人来说tCD办公区 - 实用经验教程分享!

工具/原料

  • 文本编辑或者一些编辑网页的专门工具
  • 文件类型保存为html

方法/步骤

  • 1

    对合子模型有一个初步的观察tCD办公区 - 实用经验教程分享!

    html中的盒子模型深层次的讲解tCD办公区 - 实用经验教程分享!

  • 1
  • 2

    从最初的一个div及css样式讲起tCD办公区 - 实用经验教程分享!

    div style="width:200px; height:200px; border:5px red solid; margin:0 auto;">tCD办公区 - 实用经验教程分享!

    我爱你百度经验tCD办公区 - 实用经验教程分享!

    /div>tCD办公区 - 实用经验教程分享!

    效果如下所示tCD办公区 - 实用经验教程分享!

    html中的盒子模型深层次的讲解tCD办公区 - 实用经验教程分享!

  • 3

    padding的值类型为一个的效果(上下左右分别为10px)和对元素的一个影响(margin的值也是这样影响的)tCD办公区 - 实用经验教程分享!

    div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px">tCD办公区 - 实用经验教程分享!

    我爱你百度经验tCD办公区 - 实用经验教程分享!

    /div>tCD办公区 - 实用经验教程分享!

    html中的盒子模型深层次的讲解tCD办公区 - 实用经验教程分享!

  • 4

    padding的值类型为二个的效果(上下分别为10px,左右分别为10px)和对元素的一个影响(margin的值也是这样影响的)tCD办公区 - 实用经验教程分享!

    div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px 20px;">tCD办公区 - 实用经验教程分享!

    我爱你百度经验tCD办公区 - 实用经验教程分享!

    /div>tCD办公区 - 实用经验教程分享!

    html中的盒子模型深层次的讲解tCD办公区 - 实用经验教程分享!

  • 5

    padding的值类型为二个的效果(上为10px,左右分别为20px,下为30px)和对元素的一个影响(margin的值也是这样影响的)tCD办公区 - 实用经验教程分享!

    div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px 20px 30px;">tCD办公区 - 实用经验教程分享!

    我爱你百度经验tCD办公区 - 实用经验教程分享!

    /div>tCD办公区 - 实用经验教程分享!

    html中的盒子模型深层次的讲解tCD办公区 - 实用经验教程分享!

  • 6

    padding的值类型为二个的效果(从上、右、下、左顺时针方向分别为10px,20px,30px,40px)和对元素的一个影响(margin的值也是这样影响的)tCD办公区 - 实用经验教程分享!

    div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px 20px 30px 40px;">tCD办公区 - 实用经验教程分享!

    我爱你百度经验tCD办公区 - 实用经验教程分享!

    /div>tCD办公区 - 实用经验教程分享!

    html中的盒子模型深层次的讲解tCD办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!tCD办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号