【CSS】理解CSS

简介:

CSS(Cascading Style Sheet,层叠样式表),及其精巧且富有表达力,开发者可以用最为高效的方式高度掌控网页内容的表示。

1. 盒模型

CSS中的一个基本概念是盒模型(box model)。可见元素会在页面中占据一个矩形区域,该区域会在页面中占据一个矩形区域,该区域就是元素的盒子,由四部分组成,如下图所示:

元素盒子有两部分是可见的:内容和边框。内边距是内容和边框之间的空间,外边距是边框和页面上其他元素之间的空间。

元素还可以包含其他元素。这种情况下,父元素的内容盒子称为子元素的块容器(container block),通常称为容器。这种关系如下图所示:

可以使用包含块的特征限定元素的外观。这不光适用于层叠属性和集成属性,还适用于显示定义的属性。

 

2. 选择器简明参考

选择器及添加它的CSS版本总结如下表所示:

 

3. 属性简明参考

接下来先总结一下CSS属性及添加相应属性的CSS版本。

 

3.1 边框和背景属性

下表总结了可能用于元素的边框和背景的属性:

 

 

3.2 盒模型属性

下表总结了配置元素盒子可能用到的属性:

 

3.3 布局属性

下表总结了创建元素布局可能用到的属性:

 

3.4 文本属性

下表总结了设置文本样式可能用到的属性:

 

3.5 过渡、动画和变换属性

下表总结了改变元素外观可能用到的一些属性(通常需要一段时间来展示效果):

 

3.6 其他属性

见下表:

目录
相关文章
|
数据可视化 Linux 开发者
Processing有哪些常见的用途或者优势呢
Processing有哪些常见的用途或者优势呢
630 0
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
535 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
11月前
|
机器学习/深度学习 人工智能 搜索推荐
探索人工智能在医疗健康领域的最新进展与未来展望
探索人工智能在医疗健康领域的最新进展与未来展望
576 12
|
存储 监控 安全
重构项目的十大注意事项
重构项目的十大注意事项
|
移动开发 安全 数据安全/隐私保护
多端可接入,实现随时随地登录无影云桌面
多端可接入,实现随时随地登录无影云桌面
2707 0
|
机器学习/深度学习 人工智能 自动驾驶
厉害了我的 AI:在看了上千部电影后,这个人工智能竟能帮你识别电影明星
目前 AI(人工智能)的前沿研究是关于大脑启发的人工神经网络,而这一技术已经被应用于无人驾驶的情况下让汽车减速,并且在几十种语言之间的即时翻译和医学诊断方面都有应用。
1387 0
厉害了我的 AI:在看了上千部电影后,这个人工智能竟能帮你识别电影明星
|
算法 安全 视频直播
批批网在B2B电商领域的搜索业务探索之路
B2B电商的搜索业务最佳实践案例分享
18292 0
批批网在B2B电商领域的搜索业务探索之路
|
存储 缓存 分布式计算
|
开发框架 Ubuntu .NET
5分钟快速安装ASP.NET Core 网站运行环境
简介 ASP.NET Core 是新一代的 ASP.NET,早期称为 ASP.NET vNext,并且在推出初期命名为 ASP.NET 5,但随着 .NET Core 的成熟,以及 ASP.NET 5 的命名会使得外界将它视为 ASP.NET 的升级版,但它其实是新一代从头开始打造的 ASP.NET 核心功能,因此微软宣布将它改为与 .NET Core 同步的名称,即 ASP.NET Core。
3061 0