`
helloyesyes
  • 浏览: 1296022 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

CSS3草案的更新:弹性盒子布局和CSS3字体模块

阅读更多

W3C CSS工作组刚发布了CSS3两个工作草案规范的更新。

第一个更新在311日发布,对CSS3弹性盒子布局模块进行了大的变更。第二个在324日发布,为CSS3字体模块带来了许多优化。

CSS3弹性盒子布局

CSS3弹性盒子布局在20097第一次引入,在这次规范的最新更新中几乎完全被重写了。根据最新的工作草案:

和之前的草案相比,基本的模型在相当程度上进行了调整。特别的,flexibity不再是一个单独的属性,将会以不同属性值的方式表示。

2011324日,Bert Boswww-style邮件组里的一封邮件有如下内容:

新的工作草案中有许多变更。几个box-*属性将被重命名为flex-*;同时弹性盒子不再被表示为一个单独的属性,而将使用flex()符号。弹性属性的一些算法和格式今后将可能在表格和网格中使用。

CSS3字体

CSS3字体模型工作草案的升级带来了一些新的特性:

  • 添加了font-kerning属性,用于调整字距。
  • 添加了font-variant属性的扩展以支持OpenType字体特性
  • 添加了@font-feature-values规则以定义font-specific不同的选择器,相关讨论
  • 添加font-language-override属性,用于设置显示的另外一种语言。
  • 添加font-feature-settings属性,以访问低层次的OpenType特性。
  • 修订字体匹配算法。
  • 添加font-synthesis属性,用于字体合成,详细

更新的规范可以在这里找到。

CSS3模块状态页面已经更新,来体现CSS3规范以上和其他最新的变更。

分享到:
评论

相关推荐

    css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

     使用CSS3 圆角技术实现。  使用CSS3样式单词:border-radius  语法:  div{border-radius:5px}  对图片设置圆角样式:  .abc img{border-radius:5px}  设置class=”abc”对象图片四个角圆角为5px  三、CSS...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    CSS3.rar_CSS3_site:www.pudn.com

    Flexbox(弹性盒布局)是CSS3的一种布局模式,旨在提供更加灵活的容器内元素排列方式。通过flex-direction、align-items、justify-content等属性,开发者可以轻松实现水平或垂直居中、自适应间距等效果。 **Grid...

    DIVCSS网页布局实例:十步学会用CSS建站.pdf

    知识点:CSS文本样式、字体设置、颜色设置 6. 网站头部图标与logo设计:读者可以学习如何设计网站的头部图标与logo,并了解如何使用CSS来布局头部图标。 知识点:网站头部图标、logo设计、CSS布局 7. 页脚信息...

    李炎恢HTML_CSS教程.pdf

    * CSS3前缀和rem:CSS3新特性、rem单位 * CSS3文本效果:文本阴影、文本描边、文本装饰 * CSS3边框图片效果:border-image、border-radius * CSS3变形效果:transform、transition * CSS3过渡效果:transition、...

    CSS网站布局实录内含各色css布局样式

    1. 盒模型:CSS盒模型是理解布局的基础,它包括元素的内容区域、内边距、边框和外边距。 2. 浮动布局:float属性常用于创建多列布局,元素会浮动到其父元素的左侧或右侧。 3. 定位布局:position属性(static、...

    display: flex弹性布局

    display: flex弹性布局

    CSS那些事儿:掌握网页样式与CSS布局核心技术

    CSS3引入了许多新特性,例如过渡(transitions)、动画(animations)和变换(transformations),它们为网页添加了动态效果。过渡用于平滑地改变两个状态之间的样式,动画则能创建更复杂的视觉效果,而变换则可以...

    CSS盒子模式(DIV布局快速入门)

    CSS盒子模式是网页布局的基础,尤其对于使用CSS(层叠样式表)进行页面设计和开发而言,至关重要。在传统表格布局中,网页内容是通过表格和嵌套表格来定位的,而CSS布局则是通过定义不同大小和嵌套的“盒子”(即...

    CSS3模块的目前的状况分析

    然而,截至2009年12月7日,还没有任何CSS3模块达到W3C的“推荐”级别,这意味着虽然许多模块在不同浏览器中得到了不同程度的支持,但它们仍处于草案或候选推荐阶段,尚未形成正式标准。 以下是一些关键CSS3模块及其...

    CSS网站布局实录

    5. **Grid布局**:CSS Grid布局提供了一个二维网格系统,使得创建复杂的多列或多行布局变得简单。它允许精确控制单元格大小,以及元素在网格中的对齐方式。 6. **响应式设计**:随着移动设备的普及,响应式设计成为...

    css3参考手册

    弹性盒布局(Flexbox)是CSS3中的一个模块,提供了一种更为灵活的盒模型,可以方便地处理元素的对齐、排序和大小调整。主要属性有`display: flex`, `flex-direction`, `justify-content`, `align-items`等。 6. **...

    CSS那些事儿:掌握网页样式与CSS布局核心技术-书签扫描版

    Flexbox和Grid是现代CSS布局的两大利器,Flexbox处理一维布局,如行或列,适合实现弹性容器内的元素对齐和分配;Grid布局则提供了二维设计的能力,使得创建复杂的网格系统变得轻松易行。 此外,书中还会讨论CSS预...

    css元素样式:字体、背景、布局等

    css元素样式:字体、背景、布局等

    css3技能列表创意的文字布局代码

    在IT行业中,CSS3是一种强大的样式表语言,用于定义网页的布局、颜色、字体等视觉效果。本资源“css3技能列表创意的文字布局代码”显然聚焦于利用CSS3的特性来创新地展示文本,尤其适合那些希望提升网页设计水平或者...

    CSS3秘笈 第3版

    2. 布局控制:掌握基于CSS3的布局技术,包括弹性盒子(Flexbox)模型、网格布局(Grid)以及新的定位策略。 3. 视觉效果增强:学习如何使用CSS3提供的属性制作更加吸引人的视觉效果,如圆角边框、阴影效果、渐变...

    《CSS+DIV网页样式与布局》ppt文件

    4. **Flexbox布局**:弹性盒子模型,用于创建单轴布局,能处理元素的对齐、排序和大小调整。 5. **Grid布局**:二维网格布局系统,适用于复杂的多列布局。 **五、CSS3新特性** - **伪类和伪元素**:如`:hover`、`:...

Global site tag (gtag.js) - Google Analytics