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 */
相关推荐
csgo打的菜又爱玩9 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
ding_zhikai9 小时前
SD:在一个 Ubuntu 系统安装 stable diffusion Web UI
前端·ubuntu·stable diffusion
gerrgwg11 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
你的人类朋友12 小时前
【Node】单线程的Node.js为什么可以实现多线程?
前端·后端·node.js
iナナ13 小时前
Spring Web MVC入门
java·前端·网络·后端·spring·mvc
驱动探索者13 小时前
find 命令使用介绍
java·linux·运维·服务器·前端·学习·microsoft
开心不就得了13 小时前
自定义脚手架
前端·javascript
星晨雪海15 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉66615 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
white-persist15 小时前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式