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
相关推荐
gerrgwg1 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
你的人类朋友2 小时前
【Node】单线程的Node.js为什么可以实现多线程?
前端·后端·node.js
iナナ3 小时前
Spring Web MVC入门
java·前端·网络·后端·spring·mvc
驱动探索者3 小时前
find 命令使用介绍
java·linux·运维·服务器·前端·学习·microsoft
开心不就得了3 小时前
自定义脚手架
前端·javascript
星晨雪海5 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6665 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
white-persist5 小时前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
ObjectX前端实验室5 小时前
【前端工程化】脚手架篇 - 模板引擎 & 动态依赖管理脚手架
前端
GISer_Jing5 小时前
前端GIS篇——WebGIS、WebGL、Java后端篇
java·前端·webgl