前端入门必学：CSS盒子模型与图片样式全解析前言

在学习前端开发的过程中掌握 CSS 的基础知识是至关重要的一步。本文将详细介绍CSS 盒子模型、标签宽高、边框、边距以及图片与背景图片的使用方法适合刚入门的同学系统学习和复习。一、CSS 盒子模型——页面布局的基石1. 什么是盒子模型在 CSS 中每个 HTML 元素都被视为一个长方形的盒子。这个盒子由四部分组成从外到内依次是margin— 外边距盒子与其他元素之间的距离border— 边框围绕在内边距和内容外的线padding— 内边距内容与边框之间的空白区域content— 内容显示文字和图片的区域一个元素实际占用的空间 width/height padding border margin。图解textmargin-top ┌─────────────────────────┐ │ border-top │ │ ┌───────────────────┐ │ │ │ padding-top │ │ │ │ ┌─────────────┐ │ │ │ │ │ content │ │ │ │ │ └─────────────┘ │ │ │ │ padding-bottom │ │ │ └───────────────────┘ │ │ border-bottom │ └─────────────────────────┘ margin-bottom2. 两种盒子模型标准盒子模型content-box默认设置的width/height只作用于 content 区域实际宽度 width padding-left padding-right border-left border-right总宽度 实际宽度 margin-left margin-right替代盒子模型border-boxcss* { box-sizing: border-box; }设置的width/height包含了 content padding border好处更容易控制元素整体尺寸增加 padding 不会撑大元素外部尺寸推荐在项目开始时全局使用能避免很多布局计算错误对比示例css.content-box { box-sizing: content-box; width: 200px; padding: 20px; border: 5px solid black; /* 实际内容区宽度 200px总占用宽度 250px */ } .border-box { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid black; /* 总占用宽度就是 200px内容区自动缩小为 150px */ }3. margin 的合并塌陷问题现象两个垂直相邻的块级元素它们的上下 margin 会合并取较大值。htmldiv stylemargin-bottom:30px;上块/div div stylemargin-top:20px;下块/div !-- 实际间距 30px不是 50px --父元素与子元素的 margin 合并父元素没有 border 或 padding 隔开时子元素的margin-top会传递给父元素导致父元素一起下移。解决方法给父元素添加overflow: hidden;给父元素添加border或padding哪怕 1px使用display: flex;或display: flow-root;用伪元素隔开::before { content: ; display: table; }二、标签宽高详解1. 基本属性cssdiv { width: 900px; height: 50px; line-height: 50px; /* 单行文字垂直居中 */ }2. 宽度高度特性块级元素默认宽度 100%父元素内容区宽度高度由内容撑开。行内元素设置width/height无效需先转为display: block;或inline-block;。行内块元素可以设置宽高但不独占一行相邻元素之间有空白间隙换行符导致解决父元素font-size: 0;。3. 最小/最大宽高css.min-box { min-width: 200px; /* 最小宽度防止内容过少时太窄 */ max-width: 600px; /* 最大宽度防止内容过多时过宽 */ min-height: 100px; max-height: 300px; }常用于响应式布局配合百分比宽度使用。4. 单位详解px— 像素绝对单位最常用%— 相对于父元素内容区的百分比注意父元素需有明确高度em— 相对于自身字体大小font-size1em 当前字体大小rem— 相对于根元素html的字体大小适合整体缩放vw— 视口宽度的 1%100vw 整个窗口宽度vh— 视口高度的 1%100vh 整个窗口高度百分比高度的坑csshtml, body { height: 100%; } /* 必须设置祖先高度 */ .child { height: 50%; } /* 才有效 */三、标签边框与圆角1. 基本边框cssborder: 5px solid red; /* 粗细 样式 颜色 */样式可选值solid实线、dashed虚线、dotted点线、double双线、groove3D凹槽、ridge3D凸起、inset凹陷、outset凸出。2. 单边设置cssborder-top: 3px dashed blue; border-right: none; border-bottom: 1px solid #ccc; border-left: 5px solid green;可分别控制宽度、样式、颜色。3. 圆角 border-radiuscss/* 统一圆角 */ border-radius: 10px; /* 四个角分别设置左上、右上、右下、左下 */ border-radius: 10px 20px 30px 40px; /* 椭圆圆角水平半径 / 垂直半径 */ border-radius: 20px / 10px; /* 圆形宽高相等border-radius: 50% */ .circle { width: 100px; height: 100px; border-radius: 50%; }4. 边框图片进阶cssborder-image: url(border.png) 30 round;较少使用但可制作花式边框。5. 轮廓 outline位于边框外不占空间常用于表单聚焦样式outline: 2px solid blue;outline-offset可设置与边框的距离四、内外边距1. 外边距 margincssmargin: 10px; /* 四边相同 */ margin: 10px 20px; /* 上下10px左右20px */ margin: 10px 20px 30px; /* 上10左右20下30 */ margin: 10px 20px 30px 40px; /* 上右下左顺时针 */ /* 水平居中 */ margin: 0 auto; /* 必须设置宽度且不能是行内元素 */负值 margincssmargin-top: -20px; /* 向上移动 20px */ margin-left: -10px; /* 向左移动 10px */常用于微调位置、重叠效果、突破父容器限制。2. 内边距 paddingcsspadding: 20px; padding: 10px 20px; padding-left: 30px;padding 区域会显示背景色或背景图使用box-sizing: border-box;后padding 不会撑大元素外部尺寸五、其他核心样式1. 文字样式csscolor: #333; font-size: 16px; font-weight: bold; /* 或 700 */ font-style: italic; text-decoration: underline; /* 下划线 */ text-decoration: line-through; /* 删除线 */ text-decoration: none; /* 去掉下划线常用于a标签 */ font-family: Microsoft YaHei, Arial, sans-serif; text-indent: 2em; /* 首行缩进两个字符 */ text-align: center; /* 水平居中 */ letter-spacing: 2px; /* 字母间距 */ word-spacing: 4px; /* 单词间距 */ line-height: 1.5; /* 行高倍数推荐无单位 */ text-shadow: 1px 1px 2px rgba(0,0,0,0.3);2. 垂直对齐 vertical-align用于行内元素或表格单元格常用值baseline默认、top、middle、bottom图片底部空白问题图片默认基线对齐底部会有 3-4px 空隙cssimg { vertical-align: top; } /* 解决 */ /* 或者 */ img { display: block; }3. 背景与颜色cssbackground-color: #f0f0f0; background-color: rgba(255, 0, 0, 0.5); /* 半透明背景不影响子元素 */ opacity: 0.5; /* 整个元素半透明含子元素 */4. 溢出处理cssoverflow: visible; /* 默认溢出可见 */ overflow: hidden; /* 隐藏溢出内容 */ overflow: scroll; /* 始终显示滚动条 */ overflow: auto; /* 内容溢出时才显示滚动条 */ overflow-x: hidden; /* 单独控制水平方向 */5. 鼠标样式csscursor: pointer; /* 手型可点击 */ cursor: default; /* 箭头 */ cursor: move; /* 移动 */ cursor: text; /* 文本输入 */ cursor: not-allowed; /* 禁止 */ cursor: wait; /* 等待 */6. 列表样式cssul { list-style-type: none; /* 去除默认圆点 */ list-style-type: square; /* 实心方块 */ list-style-type: decimal; /* 数字 */ list-style-image: url(dot.png); /* 自定义图片符号 */ }7. 超链接伪类LVHA 顺序cssa:link { color: blue; } /* 未访问 */ a:visited { color: purple; } /* 已访问 */ a:hover { color: red; } /* 鼠标悬停 */ a:active { color: orange; } /* 点击瞬间 */顺序不能乱LoVeHAte。六、CSS 选择器优先级选择器示例权重内联样式stylecolor:red1000ID 选择器#header0100类/伪类/属性.box,:hover,[type]0010标签/伪元素div,::before0001通配符*0000重要声明!important最高派生选择器权重累加#nav li.active 100 1 10 111。七、img 标签与图片优化1. 基本用法htmlimg srcphoto.jpg alt照片描述 title悬停提示 width600alt是必须的图片加载失败时显示利于 SEO 和无障碍访问只设宽度或高度另一个自动等比缩放图片居中父元素text-align: center;2. 图片格式选择JPEG照片、复杂颜色有损压缩文件小PNG图标、透明背景无损压缩GIF简单动图颜色少SVG矢量图无限缩放可编辑WebP谷歌格式同等质量体积更小3. object-fit 控制图片填充方式cssimg { width: 300px; height: 200px; object-fit: cover; /* 裁剪并铺满类似 background-size: cover */ object-fit: contain; /* 完整显示留白 */ object-fit: fill; /* 拉伸填充默认 */ object-position: center; /* 焦点位置 */ }八、背景图片完全指南1. 基本属性cssbackground-image: url(bg.png); background-repeat: no-repeat; /* 不平铺 */ background-repeat: repeat-x; /* 仅水平平铺 */ background-size: cover; /* 铺满容器可能裁剪 */ background-size: contain; /* 完整显示可能留白 */ background-size: 100px 200px; /* 固定尺寸 */ background-position: center; /* 居中 */ background-position: 20px 50%; /* 具体坐标 */ background-attachment: fixed; /* 背景固定视差效果 */2. 多重背景cssbackground: url(overlay.png) center/cover no-repeat, url(bg.jpg) center/cover no-repeat; /* 先写的在上层 */可用于叠加纹理、图案、渐变。3. CSS 渐变css/* 线性渐变 */ background: linear-gradient(to right, red, blue); background: linear-gradient(45deg, #ff0, #f0f); /* 径向渐变 */ background: radial-gradient(circle, red, yellow, green);4. 精灵图CSS Sprites将多个小图标合并为一张大图通过background-position显示局部。css.icon { width: 30px; height: 30px; background: url(sprite.png) no-repeat; } .icon-home { background-position: 0 0; } .icon-user { background-position: -30px 0; } .icon-cart { background-position: -60px 0; }优点减少 HTTP 请求加快加载。总结本文覆盖了 CSS 盒子模型、宽高、边框、边距、文字样式、选择器优先级以及图片与背景图片的全部核心知识点。掌握这些内容你已经可以完成大部分静态页面的样式编写。下一篇我们将继续学习网页布局、弹性布局、响应式设计和标签定位敬请期待