查看: 2201|回复: 1

我的第一阶段学习知识


17-6-1 09:59:58 | [复制链接]

5

主题

17

帖子

65

积分

千锋学员

Rank: 2

发表于 17-5-31 18:48:59 | 显示全部楼层 |阅读模式
经过这一阶段的学习,我学到了很多相关的重要知识,让我了解了H5的博大精深,受益匪浅。
突然让我总结一下,一时间我也不知道如何作答。

仔细想了想,我就给大家介绍一下盒模型吧!

● 新版盒模型
      ○ display:flex设置为弹性盒
      ○ flex-direction顺序指定了弹性子元素在父容器中的位置。
          ■ row默认在一行内排列
          ■ row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
          ■ column:纵向排列。
          ■  column-reverse:反转纵向排列,从下往上排,最后一项排在最上面
      ○ justify-content 内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐
          ■ flex-start默认,顶端对齐
          ■ flex-end末端对齐
          ■ center居中对齐
          ■ space-between两端对齐,中间自动分配
          ■ space-around自动分配距离
      ○ align-items侧轴对齐方式
          ■ flex-strat顶端对齐
          ■ flex-end末端对齐
          ■ center居中对齐
      ○ flex-wrap换行处理
          ■ nowrap不换行(默认)
          ■ wrap换行
          ■ wrap-reverse反向换行
      ○ align-content行间距对齐方式
          ■ flex-start没有行间距
          ■ flex-end底对齐没有行间距
          ■ center居中没有行间距
          ■ space-between两端对齐,中间自动分配
          ■ space-around自动分配距离
      ○ align-self子元素对齐方式(类似align-items)
          ■ flex-start没有行间距
          ■ flex-end底对齐没有行间距
          ■ center居中没有行间距
      ○ order:number排序优先级,数字越大越往后排,默认为0,支持负数。
      ○ flex:number子元素所占盒模型比例
      ○ flex-grow定义弹性盒子元素的扩展比率
  ● 旧版盒模型
      ○ display:box(必须加前缀)设置弹性盒
      ○ box-orient用来确定父容器里子容器的排列方式,是水平还是垂直
          ■ horizontal水平排列
          ■ vertical垂直排列
      ○ box-pack表示父容器里面主轴对齐方式,
          ■ start 居顶端
          ■ end 居末端
          ■ center 居中
          ■ justify两端对齐,中间自动分配
      ○ box-align表示父容器里面子容器侧轴对齐方式,
          ■ start居顶端
          ■ end居末端
          ■ center居中
          ■ baseline两端对齐,中间自动分配
          ■ stretch自动分配
      ○ box-direction:reverse反向显示
      ○ box-flex子元素显示比例
以上便是关于盒模型的一些介绍,可能太简单了,大家还有点意犹未尽吧!我再给大家介绍一下css媒体适应。

● css多列
  ● column-count 属性规定元素应该被分隔的列数:
  ● column-gap 属性规定列之间的间隔大小
  ● column-rule 属性设置列之间的宽度、样式和颜色规则
      ○ column-rule-color规定列之间规则的颜色。
      ○ column-rule-style规定列之间规则的样式。
      ○ column-rule-width规定列之间规则的宽度。
  ● column-fill:balance(默认值,对列进行协调。浏览器应对列长度的差异进行最小化处理。)/auto(自动排列)规定如何对列进行填充
  ● column-span:1/all规定元素应横跨多少列。
  ● column-width规定列的宽度。
  ● columns规定设置 column-width 和 column-count 的简写属性。
注释:Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
  ● Responsive Web Design 响应式设计布局概念
      ○  Responsive 设计特点
          ■ 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
      ○ meta标签移动端设置.note
  ● css3 媒体查询(media queries)
      ○ @media mediatype and|not|only (media feature) {
    CSS-Code;
}
      ○ mediatype媒体类型
          ■ all全部
          ■ screen用于电脑屏幕,平板电脑,智能手机等。
          ■ print用于打印机和打印预览
      ○ and|not媒体条件
      ○ 查询条件
          ■ min-width最小宽度(大于)
          ■ min-height最小高度(大于)
          ■ max-width最大宽度(小于)
          ■ max-height最大高度(小于)
          ■ orientation:portrait竖屏状态
          ■ orientation:landscape横屏状态下
      ○ link写法
      ○ <link href="路径" rel="stylesheet" media="all and (min-width:500px)"/>
      ○ 扩展,实际工作中媒体查询经常操作的属性
          ■ display:block;display:none】
          ■ float:none
          ■ width:100%
          ■ text-align:center
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

我的学习分享就先说这么多,感谢大家收看,我们下期再见。


65.jpg

19

主题

101

帖子

357

积分

班主任老师

Rank: 7Rank: 7Rank: 7

发表于 17-6-1 09:59:58 | 显示全部楼层
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3 )

GMT+8, 20-4-8 16:03 , Processed in 0.411775 second(s), 43 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表