首页 >web前端 >html教程 >CSS布局属性_html/css_WEB-ITnose

CSS布局属性_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:32:381155浏览

一、弹性盒模型介绍

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
    含义:设置弹性子元素侧轴上的对齐方式

  

  

  (6)语法:align-content:flex-start | flex-end | center | space-between | space-around | 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 ]
    含义:复合属性,设置弹性子元素的如何分配空间。

  (12)语法:align-self:auto | flex-start | flex-end | center | baseline | stretch
    含义:设置弹性子元素的在侧轴上的对齐方式,与align-item的相同。设置某个弹性子元素的独立对齐方式。

  

 

二、Flexbox菜单项目实战

 1、要求:

    大屏幕下:

  

    中屏幕下:

  

    小屏幕下:

  

2、body部分:

1 <ul class="menu">2     <li><a href="#">HTML</a></li>3     <li><a href="#">CSS</a></li>4     <li><a href="#">Javascript</a></li>5     <li><a href="#">Sass</a></li>6     <li><a href="#">Ruby</a></li>7     <li><a href="#">Mongo</a></li>8 </ul>

3、css样式部分:

 1 <style> 2         *{ 3             padding: 0; 4             margin: 0; 5             border: none; 6         } 7         html{ 8             font-size: 12px; 9         }10         .menu{11             width: 100%;12             border: 1px solid rgba(0,0,0,.1);13             display: flex; /*激活弹性布局*/14             flex-flow: row wrap;  /*设置主轴方向以及是否换行*/15         }16         .menu li{17             list-style-type: none;18             text-align: center;19             height: 40px;20             line-height: 40px;21             flex: 1 1 100%;22         }23         .menu li:nth-child(1){24             background-color: #39ADD1;25         }26         .menu li:nth-child(2){27             background-color: #3079AB;28         }29         .menu li:nth-child(3){30             background-color: #982551;31         }32         .menu li:nth-child(4){33             background-color: #E15258;34         }35         .menu li:nth-child(5){36             background-color: #CC6699;37         }38         .menu li:nth-child(6){39             background-color:  #52AC43;40         }41         .menu a{42             text-decoration: none;43             color: #fff;44             font-size: 2rem;45         }46          @media (max-width: 768px) {47             .menu{48                 flex-wrap: wrap;49             }50             .menu li{51                 flex: 1 1 50%;52             }53          }54           @media (max-width: 480px) {55             .menu{56                 flex-direction: column;57             }58             .menu li{59                 flex: 1 1 100%;60             }61          }62     </style>

 

三、媒体查询解析

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
  实现过程中,遵循移动优先原则

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn