• CSS3------盒模型

    盒模型

    每个标签在浏览器上都被渲染成一个矩形个盒子，这个盒子有一个标准都组成结构，我们称为标准盒模型

    盒模型构成

     

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>盒模型基本构成title>
    8. <style>
    9. .box{
    10. /* 内容区域大小 */
    11. width: 100px;
    12. height: 100px;
    13. /* 盒子边界／边框 */
    14. border:1px solid red ;
    15. /* 内边距 :
    16. 内容到边界之间到距离
    17. 内容：width height(写在文档中标签中的部分)
    18. 边 : border设置的区域
    19. padding: 1值=>代表四个方向设置相同的内边距
    20. 2值=> 上下 左右
    21. 3值=> 上 左右 下
    22. 4值=> 上 右 下 左（顺时针）
    23. top right bottom left
    24. padding-top:单独设置上内边距
    25. padding-right:单独设置右内边距
    26. padding-bottom:单独设置下内边距
    27. padding-left:单独设置左内边距
    28. */
    29. padding: 10px 20px 30px 40px;
    30. /* padding-top: 10px; */
    31. margin:10px 20px 30px 40px; //居中显示0 auto
    32. /*
    33. 盒模型基本结构：
    34. 内容区域： （content） width height
    35. 所有的写在标签中的内容，只出现在这个区域
    36. 内边距区域： padding设置
    37. 设置的是一个盒子的边框到内容区域之间的距离可以扩大盒子
    38. 边界区域： border所设置都区域，边框
    39. 外边距区域： margin设置
    40. 设置的是两个盒子之间的距离。
    41. 盒子在界面上的渲染大小
    42. 宽度 = width + 左右的padding + 左右border
    43. 高度 = height + 上下的padding + 上下的border
    44. */
    45. }
    46. /* 内边距 */
    47. style>
    48. head>
    49. <body>
    50. <div class="box">内容div>
    51. body>
    52. html>
    内容： width height ，写在文档中标签中的部分所占的宽和高 content
    内边距 padding 内容到边界之间到距离
    (1)padding:
    • 1值=>代表四个方向设置相同的内边距 padding:5
    • 2值=> 上下 左右
    • 3值=> 上 左右 下
    • 4值=> 上 右 下 左（顺时针）
    (2)top right bottom left
    • padding-left: 5px;
    边 border 设置的区域
    外边距 margin 定义方式和 padding 一致
    盒子在界面上的渲染大小
    • 宽度 = width + 左右的padding +
  • 相关阅读:
    aijs 对象排序
    【SpringCloud微服务全家桶学习笔记-GateWay网关（微服务入口）】
    Find My背包|苹果Find My技术与背包相结合，智能防丢，全球定位
    vue中关于重置表单数据出现undefined的问题
    F - Sorting a Matrix(拓扑&缩点)
    Gitee的注册和代码提交
    Go语言map底层分析
    Docker-compose
    awk,gawk基本用法笔记221107
    JavaScript工具函数大全
  • 原文地址：https://blog.csdn.net/m0_59749255/article/details/128025846