CSS进阶-布局（三）

9、布局

9.1 版心

网页内容的主要显示区域，即用户浏览信息的核心部分。这个区域通常是网页设计师精心规划的地方，用来展示最重要的内容，比如文章、图片、视频等。在网页设计中，我们通常会用到一些术语来描述这种核心显示区域，比如"主要内容区"、"body内容"或者"main元素"。

9.2 常用类名

1. 容器类 ：
   • .container：用于包含整个页面的主要内容。
   • .wrapper：类似于.container，用于包裹一组相关的元素。
   • .row：通常用于栅格系统中的水平排列的一组元素。
2. 布局类 ：
   • .grid：用于创建网格布局。
   • .flex-container：用于Flexbox布局的容器。
   • .grid-item：网格布局中的单个项。
   • .flex-item：Flexbox布局中的单个项。
3. 内容类 ：
   • .content：用于包含页面的主要内容。
   • .text-center：用于居中文本。
   • .text-left, .text-right：用于左对齐或右对齐文本。
   • .clearfix：清除浮动。
4. 按钮类 ：
   • .btn：基本按钮样式。
   • .btn-primary, .btn-secondary：不同类型的按钮样式。
   • .btn-large, .btn-small：不同尺寸的按钮。
5. 表单类 ：
   • .form-group：用于包含表单控件及其标签。
   • .input-group：用于复杂的输入框组合。
   • .form-control：基本的输入框样式。
6. 导航类 ：
   • .navbar：用于网站顶部的导航条。
   • .nav：用于创建导航列表。
   • .nav-item：导航列表中的单个项目。
7. 卡片类 ：
   • .card：用于创建卡片式布局。
   • .card-body：卡片主体内容。
   • .card-header, .card-footer：卡片的头部和尾部。
8. 媒体对象类 ：
   • .media：用于创建媒体对象布局，如博客评论等。
   • .media-object：媒体对象中的图片或视频。
   • .media-body：媒体对象的文本部分。
9. 表格类 ：
   • .table：用于创建表格的基本样式。
   • .table-striped：带有斑马纹的表格。
   • .table-bordered：带边框的表格。
10. 辅助类 ：
    • .hidden：隐藏元素。
    • .visible：显示元素。
    • .sr-only：仅对屏幕阅读器可见的文本。
11. 动画类 ：
    • .fade-in：淡入效果。
    • .slide-down：下滑效果。
    • .zoom：缩放效果。

9.3 默认样式重置

9.3.1 通配选择器

使用通配选择器给所有的元素加上默认样式重置。

9.3.2 reset.css

根据不同的元素特点有针对的进行去除样式，使得页面变成一张所有样式都要自己加的白纸。

9.3.3 normal.css

在去除默认样式的同时保留了一些有价值的默认样式，有一个固定的标准。

官网：https://necolas.github.io/normalize.css/

相关代码地址：https://gitee.com/justinc666/front-end/tree/master/CSS/4、CSS进阶/4、布局