设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › Css/Css3教程 › css3盒子模型案例附代码与教程

css3盒子模型案例附代码与教程

[复制链接]
查看7166 | 回复1 | 2020-1-6 11:31 | 显示全部楼层 |阅读模式
css3盒子模型案例附代码与教程
先看下代码案例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>css3盒子模型案例-IT战蚁</title>
  8.     <style>
  9.         div:nth-child(1) {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: pink;
  13.             border: 5px red solid;
  14.             padding: 10px;
  15.         }
  16.         div:nth-child(2) {
  17.             width: 200px;
  18.             height: 200px;
  19.             background-color: pink;
  20.             border: 5px red solid;
  21.             padding: 10px;
  22.             box-sizing: border-box;
  23.         }
  24.     </style>
  25. </head>

  27. <body>
  28.     <div></div>
  29.     <div></div>
  30. </body>
  31. </html>
复制代码
代码运行结果：

css3盒子模型案例附代码与教程

css3盒子模型案例附代码与教程
css3盒子模型, 盒子模型
回复

举报

admin | 2020-1-6 11:32 | 显示全部楼层
css3盒子模型的宽度是等于盒子的，已包括了border+padding的宽度。
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-16
回复楼主 返回列表