一.CSS 选择器
1. 属性选择器
属性选择器允许根据元素的属性及属性值来选择元素:

2. 伪类选择器进阶
除了常见的:hover、:active,这些伪类也非常实用:

3. 伪元素的妙用
伪元素用于创建不在 DOM 中的虚拟元素,常用的有:

二.盒模型:布局的基础
- 内容区(content):实际内容所在区域
- 内边距(padding):内容区与边框之间的空间
- 边框(border):围绕内边距和内容区的线
- 外边距(margin):边框外的空间,用于与其他元素分隔

三.布局
1. Flexbox 布局
Flexbox(弹性盒布局)是一维布局模型,适用于行或列的布局:

2. Grid 布局
Grid(网格布局)是二维布局模型,适用于复杂的行列布局:

3. 响应式设计与媒体查询
媒体查询允许根据设备特性应用不同的样式:

四.常用css属性
-
文本样式
color:文本颜色(#ff0000、rgb(255,0,0)、red)font-size:字体大小(16px、1.2em、120%)font-family:字体("Microsoft YaHei", sans-serif)text-align:对齐方式(left、center、right)line-height:行高(1.5表示 1.5 倍字体大小)
-
盒模型属性
控制元素的布局和间距(核心概念):
width/height:内容区域宽高padding:内边距(内容与边框的距离)margin:外边距(元素与其他元素的距离)border:边框(border: 1px solid #ccc;)
-
背景属性
background-color:背景色background-image:背景图(url("bg.jpg"))background-repeat:背景图重复方式(no-repeat、repeat-x)
-
布局属性
display:元素显示类型(block、inline、flex、grid)position:定位方式(static、relative、absolute、fixed)float:浮动(left、right)