🧩 HTML · CSS
#互联网
#浏览器
#编辑器
#HTML基础
#权值
#选择器
#盒模型
#浮动
#BFC
#定位
#flex
#grid
#响应式
<!DOCTYPE html> 声明文档类型 ·
<html> 根元素
<head> 配置 ·
<body> 内容 ·
<meta charset="UTF-8">声明文档的编码格式
单标签： 没有内容
双标签： 开始标签和结束标签之间，可以放内容
class可重复，id唯一。命名：不能用中文/特殊符号/数字开头。
格式：标签换行，开始标签跟和结束标签要对齐(一条直线)
子父级之间相差一个tab键
<html>
<head>
<title>页面标题</title>
</head>
<body>...</body>
</html>
三种方式： 内联(style属性) / 内部(style标签) / 外部(link)
!important > 内联样式 > ID > 类/伪类 > 标签
权值计算 (1,0,0,0) (0,1,0,0) ... 逐级比较，不进位。
20个类 < 1个ID
注意 通用选择器(*)、组合符不影响优先级。
/* 权值示例 */
#nav { } /* (1,0,0,0) */
.container { } /* (0,1,0,0) */
div { } /* (0,0,1,0) */
- * 通用
- div p 后代 · ul>li 子代
- .box 类 · #box ID
- .box, span 分组
- p~span 兄弟 · p+span 相邻
更多参考 runoob CSS选择器
总宽度 = width + 左右padding + 左右border + 左右margin
总高度 = height + 上下padding + 上下border + 上下margin
默认宽度： 块级100%父级；浮动由内容撑开。
默认高度： 由内容+padding决定。
盒模型图解：margin透明 · border · padding · content
margin 塌陷与合并
- 塌陷： 子父级，给子集margin-top导致父级下移（可用BFC/border/padding/overflow解决）
- 合并： 同级垂直margin合并，取较大值
padding
会增大宽高，需手动减。
position
- absolute 相对于已定位父级（最近）
- relative 相对自己原本位置
- fixed 相对浏览器视口
- absolute/fixed 脱离文档流（不占位置）
float: left/right 让块级元素一行显示，但会造成半脱离（文字环绕）。
.float-box{
float: left; width: 200px;
}
.normal {
width: 250px;
} /* 文字环绕
*/
清除浮动：
- clear:both (添加空块级，放在浮动元素后同級)
- 父级触发BFC (overflow, flex等)
- 伪元素 ::after 方法
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
}
独立容器，内部不影响外部。可解决margin塌陷、阻止浮动覆盖、包裹浮动高度。
触发BFC（任一）
overflow: hidden/auto/scroll
float: left/right (非none)
position: absolute/fixed
display: inline-block/flex/table-cell
应用： 父级overflow:hidden包裹浮动；右侧盒子触发BFC避免被浮动覆盖(实现自适应)。
BFC阻止浮动覆盖：蓝色触发BFC后与红色互不重叠
- 为父盒子设置border (可transparent)
- 父盒子 overflow: hidden/auto (触发BFC)
- 父盒子设置padding
- 父盒子 position: fixed
- 子元素浮动 (float)
display: block/inline/inline-block/none
水平居中
- 块元素: margin: 0 auto; (需width)
- 内联/内联块/文字: text-align: center
垂直居中
单行文字: line-height = 容器height
文字样式（可继承）
color, font-family, font-size,
font-weight, line-height, opacity
:hover 鼠标滑过；可控制其他元素 .box:hover
.other
a的属性target="_blank" 新标签页打开，
默认 _self。
href支持绝对/相对路径。
- <img src="..."> 直接插入
- background-image: url(...) 背景图
背景图适用：图片可能超出显示器 / 图片内需放置内容。
- border: 2px solid/dashed chocolate;
- border-radius 圆角
- opacity: 0.5 元素整体透明(子元素继承)；background: rgba(51,51,51,0.5) 背景透明不影响内容
- box-shadow: 水平偏移 垂直偏移 模糊 扩散 颜色
- width% → 参照父容器宽度
- height% → 参照父容器高度(需明确定义)
- border-radius% → 参照自身宽高
- 定位% → 参照已定位父级
单位: px, em, rem(root em)
容器设为 display: flex，子项float/clear/vertical-align失效。
容器属性
- flex-direction: row | column
- flex-wrap: nowrap/wrap/wrap-reverse
- justify-content (水平): flex-start/center/space-between等
- align-items (垂直): stretch/center等
- align-content (多行)
项目属性
- order 顺序，默认0
- flex-grow 放大比例，默认0
- flex-shrink 缩小比例，默认1
.container {
display: flex;
}
.item {
flex-grow: 1;
} /* 占据剩余空间 */
教程：跳转
CSS Grid 是二维布局系统，可同时控制行与列。容器设为 display: grid。
🌐 容器属性
- grid-template-columns: 100px 1fr 2fr 定义列宽
- grid-template-rows: 80px auto 定义行高
- gap: 10px 行列间距
- justify-items / align-items
控制单元格内内容对齐
- grid-template-areas 划分区域
📌 项目属性
- grid-column: 1 / 3 从第1列线到第3列线
- grid-row: span 2 跨2行
- justify-self / align-self
单独控制项目位置
/* 简单grid示例 */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 12px;
}
.item {
background: var(--accent);
padding: 1rem;
}
Grid 与 Flex 可结合使用：外层grid划分大结构，内层flex处理细节排列。
Grid 布局示意图：三列两行，可自由合并单元格
教程：跳转
多媒体
<video src="movie.mp4" controls autoplay loop>
<audio controls><source src="music.mp3">
语义化标签
<header> <footer> <nav> <aside>
CSS3 变换
transform: rotate(deg) translate(px) skew(deg) scale(n) (2D/3D:
rotateX, rotateY)
过渡与动画
transition: 属性 时长 · animation
响应式布局
- 百分比 / 媒体查询 @media screen / rem / flex / grid
@media screen and (max-width: 300px) {
body {
background: lightblue;
}
}
浮动
BFC
清除浮动
margin塌陷
✔️ 浮动可以让块级一行显示，但需清除。
✔️ BFC触发：overflow, position, display, float
✔️
BFC解决margin塌陷、阻止浮动覆盖、包裹浮动