css的基本知识

一.CSS 选择器

1. 属性选择器

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

2. 伪类选择器进阶

除了常见的:hover:active,这些伪类也非常实用:

3. 伪元素的妙用

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

二.盒模型:布局的基础

  1. 内容区(content):实际内容所在区域
  2. 内边距(padding):内容区与边框之间的空间
  3. 边框(border):围绕内边距和内容区的线
  4. 外边距(margin):边框外的空间,用于与其他元素分隔

三.布局

1. Flexbox 布局

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

2. Grid 布局

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

3. 响应式设计与媒体查询

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

四.常用css属性

  1. 文本样式

    • color:文本颜色(#ff0000rgb(255,0,0)red
    • font-size:字体大小(16px1.2em120%
    • font-family:字体("Microsoft YaHei", sans-serif
    • text-align:对齐方式(leftcenterright
    • line-height:行高(1.5表示 1.5 倍字体大小)
  2. 盒模型属性

    控制元素的布局和间距(核心概念):

    • width/height:内容区域宽高
    • padding:内边距(内容与边框的距离)
    • margin:外边距(元素与其他元素的距离)
    • border:边框(border: 1px solid #ccc;
  3. 背景属性

    • background-color:背景色
    • background-image:背景图(url("bg.jpg")
    • background-repeat:背景图重复方式(no-repeatrepeat-x
  4. 布局属性

    • display:元素显示类型(blockinlineflexgrid
    • position:定位方式(staticrelativeabsolutefixed
    • float:浮动(leftright
相关推荐
笨笨狗吞噬者4 分钟前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
该用户已不存在4 分钟前
Golang 上传文件到 MinIO?别瞎折腾了,这 5 个库拿去用
前端·后端·go
snows_l9 分钟前
JavaScript 性能优化实战大纲
前端
文心快码BaiduComate22 分钟前
文心快码3.5S开发古风射覆小游戏,它帅到我了!
前端·后端·程序员
白兰地空瓶38 分钟前
用 Stylus 写 CSS 有多爽?从响应式面板案例看透它的优雅
css·stylus
佛系菜狗1 小时前
防抖和节流-防抖鸿蒙版本实现
前端
不一样的少年_1 小时前
老板问我:AI真能一键画广州旅游路线图?我用 MCP 现场开图
前端·人工智能·后端
东方石匠1 小时前
Javascript常见面试题
前端·javascript·面试
恋猫de小郭1 小时前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter
性野喜悲1 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app