css3设计模式，常用布局

html-css019

css3设计模式，常用布局,第1张

1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局

3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,

css设计模式

OOCSS——Object Oriented CSS

SMACSS——Scalable and Modular Architecture for CSS

垂直水平均分：

子元素纵向等距排列：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。

例：

此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到 文字环绕 问题，如下如所示。

解决办法：

补充flex左右布局，左边固定，右边自适应，并且两列等高自适应

H5的新特性：

1. 用于绘画 canvas 元素。

2. 用于媒介回放的 video 和 audio 元素。

3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。

4. 语意化更好的内容元素，比如 article、footer、header、nav、section。

5. 表单控件，calendar、date、time、email、url、search。

css3的新特征:

选择器。

2.和透明度。

3. 多栏布局。

4. 多背景图。

5.Word Wrap。

6. 文字阴影。

7.@font-face属性。

8.圆角(边框半径)。

9.边框图片。

10.盒阴影。

11. 盒子大小。

12. 媒体查询。

13.语音。