CSS3盒子模型（CSS3）

落日映苍穹つ 2023-10-03 13:46 158阅读 0赞

CSS3盒子模型（CSS3）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>CSS3盒子模型</title>
  9.     <style>
  10.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  17.         div {
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: pink;
  22.             border: 20px solid red;
  23.             padding: 15px;
  24.             box-sizing: content-box;
  25.         }
  27.         p {
  29.             width: 200px;
  30.             height: 200px;
  31.             background-color: pink;
  32.             border: 20px solid red;
  33.             padding: 15px;
  34.             /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
  35.             box-sizing: border-box;
  36.         }
  37.     </style>
  38. </head>
  40. <body>
  41.     <div>
  42.         小猪乔治
  43.     </div>
  44.     <p>
  45.         小猪佩奇
  46.     </p>
  47. </body>
  49. </html>

发表评论

表情：
评论列表 （有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS3 弹性盒子

    目录 弹性盒子的flex属性 自元素的flex属性 元素的土地扩张和收缩 W3C标准盒子与IE怪异盒子 弹性盒子

    朱雀朱雀/ 0 赞/ 165 阅读

    相关 css盒子模型

    1.盒子模型 所有的html元素都可以看做盒子。 ![这里写图片描述][20160615161131029] 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左

    叁歲伎倆叁歲伎倆/ 0 赞/ 168 阅读