CSS之盒子模型

盒子模型

content(内容区域)

  • 只对内容区域有改变
css 复制代码
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

padding(内边距)

  • padding 用于 扩展内容区域的间距,不会影响 margin 但会增加盒子大小
css 复制代码
.box {
    padding: 20px;
}
css 复制代码
padding: 10px;          /* 上右下左都 10px */
padding: 10px 20px;     /* 上下 10px,左右 20px */
padding: 10px 15px 20px;/* 上 10px,左右 15px,下 20px */
padding: 10px 15px 20px 25px; /* 上 10px,右 15px,下 20px,左 25px */

border(边框)

  • border 是围绕 padding 和 content 的边框,可设定颜色、样式和宽度。
css 复制代码
.box {
    border: 5px solid red;
}
css 复制代码
border: 2px solid black;  /* 实线 */
border: 2px dashed blue;  /* 虚线 */
border: 2px dotted green; /* 点状 */
border: 2px double red;   /* 双线 */
border: none;             /* 无边框 */

margin(外边距)

  • margin 用于 控制盒子与其他元素之间的间距。
css 复制代码
.box {
    margin: 20px;
}
css 复制代码
margin: 10px;          /* 上右下左都 10px */
margin: 10px 20px;     /* 上下 10px,左右 20px */
margin: 10px 15px 20px;/* 上 10px,左右 15px,下 20px */
margin: 10px 15px 20px 25px; /* 上 10px,右 15px,下 20px,左 25px */
相关推荐
九年义务漏网鲨鱼9 分钟前
从零学习 Agentic RL(四)—— 超越 ReAct 的线性束缚:深入解析 Tree-of-Thoughts (ToT)
前端·学习·react.js
Jay丶11 分钟前
Next.js 与 SEO:让搜索引擎爱上你的网站 💘
前端·javascript·react.js
狗头大军之江苏分军15 分钟前
请不要在感情里丢掉你的“我”
前端·后端
路光.30 分钟前
一.React相关面试真题
前端·react.js·前端框架
玉宇夕落36 分钟前
🌌用CSS3打造“星球大战”片头:前端是代码界的导演,让文字在星空中翻滚
前端·javascript
gustt37 分钟前
CSS3 动画实战:打造星球大战开场动画
前端·css
colorFocus38 分钟前
Promise与async/await的接口串联和并联
前端·javascript
流星稍逝39 分钟前
前端解决两数计算精度确实问题
前端
stringwu41 分钟前
Flutter 中的 MVVM 架构实现指南
前端·flutter
俩毛豆41 分钟前
【页面路由导航】三步实现页面跳转的完整示例
前端·harmonyos