阅读量:0
YUI 中的 Grids CSS 是一个值得学习的工具，它帮助开发者快速创建响应式布局。
YUI Grids CSS是Yahoo! UI库中的一部分，它为网页布局提供了一套灵活且强大的框架，这个CSS框架通过预定义的样式和布局模板，极大地简化了前端开发人员的工作，使得创建响应式、跨浏览器兼容的网站变得更加容易，以下是对YUI Grids CSS的介绍：
YUI Grids CSS的核心特性
1、预设页面宽度和模板：YUI Grids CSS提供了四种预设的页面宽度（750px, 950px, 100%, 974px）和六种预设的布局模板，这些模板支持两列、三列或四列的分栏形式，这种灵活性允许开发者快速选择合适的布局，而无需从零开始设计。
2、负边距技术：YUI Grids CSS使用负边距技术来实现布局的紧凑性，这有助于减少不必要的间距，使布局更加紧凑和高效。
3、em单位：在YUI Grids CSS中，宽度单位通常使用em，这是一种相对单位，与字体大小相关，这使得布局能够更好地适应不同设备的屏幕尺寸和分辨率。
4、清除浮动：为了解决因浮动引起的布局问题，YUI Grids CSS采用了自我清除的技术，确保每个容器都能正确显示其内容，即使内部元素使用了浮动。
5、自适应布局：YUI Grids CSS不仅支持固定宽度的布局，还支持流式布局（即自适应宽度布局），这意味着布局可以根据浏览器窗口的大小动态调整。
6、SEO优化：YUI Grids CSS的模板列是源顺序独立的，这意味着你可以将最重要的内容放在HTML标记层的最前面，这对于提高网站的可访问性和搜索引擎优化（SEO）非常有利。
7、广告单元兼容性：YUI Grids CSS还考虑了与IAB（Interactive Advertising Bureau）的广告单元指南的兼容性，这对于需要在网页中嵌入广告的开发者来说非常有用。
8、AGrade浏览器支持：YUI Grids CSS提供全面的AGrade浏览器支持，确保在所有现代浏览器上都能正常工作。
使用YUI Grids CSS的基本步骤
1、引入必要的CSS文件：要在网页中使用YUI Grids CSS，首先需要引入相关的CSS文件，这通常包括Reset、Fonts和Grids的CSS文件。
2、设置页面结构：根据所需的布局类型，设置HTML结构，可以使用<div id="doc">来定义一个文档容器，并使用<div id="yuit1">到<div id="yuit6">来选择不同的预设模板。
3、自定义宽度和布局：如果需要，可以通过更改外层div的id来指定页面的宽度，或者使用嵌套布局来实现更复杂的设计。
FAQs
1、YUI Grids CSS是否支持响应式设计？
是的，YUI Grids CSS支持响应式设计，特别是通过流式布局（即自适应宽度布局）实现，这意味着布局可以根据浏览器窗口的大小动态调整，以适应不同的设备和屏幕尺寸。
2、如何在YUI Grids CSS中实现内嵌布局？
在YUI Grids CSS中，可以通过使用<div class="yuig">来定义一个网格容器，并在其中包含<div class="yuiu">的元素来创建子网格，这样可以在一个主网格内部创建多个子网格，实现复杂的页面布局。
YUI Grids CSS是一个强大且灵活的CSS框架，它通过提供预设的页面宽度和布局模板，以及支持自适应宽度和内嵌布局的能力，极大地简化了前端开发工作，无论是创建简单的博客还是复杂的商业网站，YUI Grids CSS都是一个值得学习和使用的宝贵资源。
