当前位置: 首页 > news >正文

CSS常用属性_(进阶)

目录

1.尺寸单位与颜色

(1)尺寸

(2)颜色 常用2种

(3)颜色属性值(透明度)

例如:

2.字体属性font

例如:

**顺序

3.文本属性

​编辑例如:

4.背景属性 background

(1)知识点 (颜色、图片、平铺、定位、背景大小)

​编辑

(2)图片平铺

(3)图片截取部分(注意左上角的具体位置,覆盖在坐标轴的哪里)(负值,负值)

(4)渐变:

5.边框

(1)知识点 (样式、颜色、厚度、触碰)

(2)7种边框效果

(3)内尺寸top、外尺寸margin(向内/外填充)

**内填充:写上下左右/pading=10px

(4)盒子模型案例(有内外填充)

6.定位position

(1)知识点:(绝对、相对、固定)

(1)相对定位(红方块针对于灰色框的定位)

(2)绝对定位(针对于整个屏幕的定位)

(3)固定定位(悬浮固定)

**三种定位

7.1布局(普通布局)

7.2布局(弹性盒子布局)旧

7.2布局(弹性盒子布局)新

例如:导航

**用display做,就是块状信息;就可以不用套div


1.尺寸单位与颜色

(1)尺寸

(2)颜色 常用2种

(3)颜色属性值(透明度)

例如:

div是块状标签,可以指定宽高尺寸:

2.字体属性font

**行高:用倍数

例如:

**顺序

3.文本属性

例如:

4.背景属性 background

(1)知识点 (颜色、图片、平铺、定位、背景大小)

例如:

(2)图片平铺

center center 水平垂直居中        no-repeat不铺

(3)图片截取部分(注意左上角的具体位置,覆盖在坐标轴的哪里)(负值,负值)

(4)渐变:

5.边框

(1)知识点 (样式、颜色、厚度、触碰)

例如:

(2)7种边框效果

(3)内尺寸top、外尺寸margin(向内/外填充)
**内填充:写上下左右/pading=10px

(4)盒子模型案例(有内外填充)

6.定位position

(1)知识点:(绝对、相对、固定)

例如:

(1)相对定位(红方块针对于灰色框的定位)

(2)绝对定位(针对于整个屏幕的定位)

(3)固定定位(悬浮固定)

**三种定位

7.1布局(普通布局)

(1)知识点

(2)例如:

7.2布局(弹性盒子布局)旧

7.2布局(弹性盒子布局)新

例如:导航

**用display做,就是块状信息;就可以不用套div

**手册里面的 弹性盒子布局(top 居中 底部 竖直)移动端

8.用户界面

鼠标的形状

9.双层边框

10.变换效果

11.过度属性(不生硬,时间的变化,慢慢变大/变色)

http://www.xdnf.cn/news/224119.html

相关文章:

  • 理解数据库存储以及查询(集合)
  • 强化学习_Paper_2017_Curiosity-driven Exploration by Self-supervised Prediction
  • ROS2与Carla安装设备指南(其二)
  • K8S Secret 快速开始
  • ArrayList的特点及应用场景
  • 评估个股相比大盘强弱程度的方法
  • STM32实现simpleFOC控制无刷电机
  • k8s -hpa
  • LeetCode算法题 (除自身以外数组的乘积)Day14!!!C/C++
  • 微信小程序中使用 多线程 Worker
  • Rust 学习笔记:关于结构体的例题
  • SMMU相关知识
  • 《分词算法大揭秘:BPE、BBPE、WordPiece、ULM常见方法介绍》
  • 解读 AI绘画工作流ComfyUI Stable Diffusion
  • VR汽车线束:汽车制造的新变革
  • 分布式链路ID实现
  • PageOffice在线打开word文件,并实现切换文件
  • Microsoft 365 Copilot应用4月重大更新:正式支持个人版,开启AI办公新时代!
  • LeetCode LCP40 心算挑战题解
  • 西门子PLC S7-1200 电动机的软启动控制
  • 自定义Tool
  • 【网工第6版】第6章 网络安全③
  • Fiori学习专题二十五:Remote OData Service
  • 基于CATIA参数化球体建模的自动化插件开发实践——NX建模之球体命令的参考与移植
  • Transformer-CVPR2025-线性注意力-Breaking the Low-Rank Dilemma of Linear Attention
  • 【AI】DeepSeek 流程图 / 时序图制作,Word 排版错乱问题,文字转直观图形
  • 机器学习-07-分类评估函数进阶案例
  • 【数学建模国奖速成系列】优秀论文绘图复现代码(四)
  • Access开发:轻松一键将 Access 全库表格导出为 Excel
  • 游戏引擎学习第250天:# 清理DEBUG GUID