CSS 盒模型

转x33g5p2x  于2022-02-07 转载在 CSS3  
字(2.6k)|赞(0)|评价(0)|浏览(719)

构成

每一个 HTML 元素就相当于是一个矩形的 "盒子
这个盒子由这几个部分构成

border —— 边框
content —— 内容
padding —— 内边距
margin —— 外边距

边框

基础属性

粗细: border-width
样式: border-style，默认没边框；solid-实线边框；dashed-虚线边框；dotted-点线边框
颜色: border-color

支持简写：
border: 1px solid red;

border: 1px solid blue;
border-top: red

上述代码只给上边框设为红色, 其余为蓝色 (层叠性，就近原则)

边框会撑大盒子

举例:

  1. <head>
  2.     <title>边框</title>
  3.     <style>
  4.         #d1 {
  5.             width: 300px;
  6.             height: 200px;
  7.             border: 1px solid blue;
  8.         }
  9.     </style>
  10. </head>
  12. <body>
  13.     <div id="d1"></div>
  14. </body>

通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子

  1. * {
  2.     box-sizing: border-box;
  3. }

刷新页面：

内边距

padding —— 设置内容和边框之间的距离

基础写法

四个方向内边距:

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

举例:

  1. <head>
  2.     <title>内边距</title>
  3.     <style>
  4.         #d1 {
  5.             width: 300px;
  6.             height: 200px;
  7.             border: 2px solid blue;
  8.             padding-top: 10px;
  9.             padding-left: 5px;
  10.         }
  11.     </style>
  12. </head>
  14. <body>
  15.     <div id="d1"></div>
  16. </body>

复合写法

可以把多个方向的 padding 合并到一起

  • padding: 5px；表示四个方向都是 5px
  • padding: 5px 10px；表示上下内边距 5px，左右内边距为 10px
  • padding: 5px 10px 20px；表示上边距 5px，左右内边距为 10px, 下内边距为 20px
  • padding: 5px 10px 20px 30px；表示 上5px，右10px，下20px，左30px (顺时针)

举例：

  1. <head>
  2.     <title>内边距</title>
  3.     <style>
  4.         #d1 {
  5.             width: 300px;
  6.             height: 200px;
  7.             border: 2px solid blue;
  8.             padding: 5px 10px 20px 30px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="d1"></div>
  15. </body>

外边距

margin —— 控制盒子和盒子之间的距离

基础写法

四个方向外边距：

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

举例:

  1. <head>
  2.     <title>外边距</title>
  3.     <style>
  4.         #d1 {
  5.             width: 200px;
  6.             height: 100px;
  7.             border: 2px solid blue;
  8.             margin-bottom: 10px;
  9.         }
  10.         #d2 {
  11.             width: 200px;
  12.             height: 100px;
  13.             border: 2px solid red;
  14.             margin-top: 20px;
  15.         }
  16.     </style>
  17. </head>
  19. <body>
  20.     <div id="d1">牛奶</div>
  21.     <div id="d2">鸡蛋</div>
  22. </body>

复合写法

类似于 padding 的复合写法

  • margin: 10px： 四个方向都设置
  • margin: 10px 20px： 上下为10，左右20
  • margin: 10px 20px 30px：上10，左右20，下 30
  • margin: 10px 20px 30px 40px： 上10，右20，下 30，左40

举例：

  1. <head>
  2.     <title>外边距</title>
  3.     <style>
  4.         #d3 {
  5.             width: 200px;
  6.             height: 100px;
  7.             border: 2px solid red;
  8.             margin: 5px 10px 20px 30px;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div id="d3">复合写法</div>
  15. </body>

块级元素水平居中

前提:

  • 指定宽度(如果不指定宽度，默认和父元素一致)
  • 把水平 margin 设为 auto

举例：

  • 未水平居中:
  1. <head>
  2.     <title>块级元素水平居中</title>
  3.     <style>
  4.         div {
  5.             width: 300px;
  6.             height: 200px;
  7.             background-color: thistle;
  8.         }
  9.     </style>
  10. </head>
  12. <body>
  13.     <div></div>
  14. </body>

  • 水平居中:
  1. <head>
  2.     <title>块级元素水平居中</title>
  3.     <style>
  4.         div {
  5.             width: 300px;
  6.             height: 200px;
  7.             background-color: thistle;
  8.             margin: 0 auto;
  9.         }
  10.     </style>
  11. </head>
  13. <body>
  14.     <div></div>
  15. </body>

注意:

  • margin: auto —— 是给块级元素用得到
    text-align: center —— 是让 行内元素/ 行内块元素 居中的
  • 对于垂直居中，不能使用 "上下 margin 为 auto " 的方式

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://xhuahua.blog.csdn.net/article/details/122473135

内容来源于网络，如有侵权，请联系作者删除！

JavaScriptcss前端javawebcss3盒模型

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com