CSS布局属性_html/css_WEB-ITnose

原创: 2016-06-24 11:32:38 747浏览

一、弹性盒模型介绍

1、弹性盒模型介绍 — 基础知识

　　弹性盒模型（ Flexible Box 或 Flexbox）是一个CSS3新增布局模块，官方称为CSS Flexible Box Layout Module，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）。弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。

　　*弹性容器(flex container)

　　*弹性子元素(flex item)

　　*轴分为主轴(main axis) 侧轴(cross axis)，弹性子元素沿着主轴依次排列，侧轴垂直于主轴。

　　*弹性容器的主轴开始(main start)、主轴结束(main end)和侧轴开始(cross start)、侧轴结束(cross end) 代表了弹性子元素排列的起始和结束位置。

2、弹性盒模型介绍 — 属性分类

　　（1）弹性容器属性

　　（2）弹性子元素属性

3、属性详解

　　（1）语法：flex-direction：row | row-reverse | column | column-reverse
　　含义：设置主轴方向，确定弹性子元素排列方式

　　（2）语法： flex-wrap：nowrap | wrap | wrap-reverse
　　　　含义：设置弹性子元素超出弹性容器范围时是否换行

　　（3）语法：flex-flow：[ flex-direction ] || [ flex-wrap ]
　　　　含义：复合属性(flex-direction和flex-wrap)，设置弹性子元素排列方式

　　（4）语法：justify-content：flex-start | flex-end | center | space-between | space-around
　　　　含义：设置弹性子元素主轴上的对齐方式

　　（5）语法：align-items：flex-start | flex-end | center | baseline | stretch
　　　　含义：设置弹性子元素侧轴上的对齐方式

　　（7）语法：order：
　　　　含义：设置弹性子元素的顺序，数值小的排在前面，可以为负值。

　　（8）语法： flex-grow：
　　　　含义：设置弹性子元素的扩展比率，不允许为负值，默认值为0。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

　　（9）语法： flex-shrink：
　　　　含义：设置弹性子元素的收缩比率，不允许为负值，默认值为1
根据弹性盒子元素所设置的扩展因子作为比率来收缩空间

　　（10）语法： flex-basis： | | auto

　　含义：设置弹性子元素的伸缩基准值，不允许为负值。默认值为auto，无特定宽度(高度)。

　　（11）语法：flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
　　　　含义：复合属性，设置弹性子元素的如何分配空间。

二、Flexbox菜单项目实战

1、要求：

　　　　大屏幕下：

　　　　中屏幕下：

　　　　小屏幕下：

2、body部分：

1 2     HTML
3     CSS
4     Javascript
5     Sass
6     Ruby
7     Mongo
8

3、css样式部分：

三、媒体查询解析

1、基础知识

　　响应式布局（Responsive Web design）指的是在网页开发过程中针对不同设备开发一套网站，然后根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)自适应地显示不同布局。响应式布局的核心是媒体查询。媒体查询（ Media Query ）是获取用户行为和设备环境、然后提供相应的CSS规则的过程的简称。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

2、基础语法

　　语法：[[',' ]*]? ：[only | not]? [and ]* | [and ]* ：‘('[:]?)’

　　<表达式>: ‘(‘<媒体特征>[: <值>]?’)’ <媒体查询>: [only | not]? <媒体类型> [and <表达式>*] | <表达式>[and <表达式>]* <媒体查询列表>: [<媒体查询>[,<媒体查询>]*]？

3、媒体特征

4、媒体类型

5、媒体查询规则

6、媒体查询解析— 屏幕尺寸

　　常用的屏幕尺寸从小到大如下所示：
　　　　*老智能机: 320px-480px
　　　　*智能手机： ≥ 480px
　　　　*平板电脑： ≥ 768px
　　　　*中等屏幕(桌面显示器)： ≥ 992px
　　　　*大屏幕(大桌面显示器): ≥1200px
　　实现过程中，遵循移动优先原则