科少

科少的博客


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

  • 搜索

弹性盒模型

发表于 2018-06-05 | 分类于 web前端

一. 弹性盒模型的理解

其实就是比较多灵活的属性去控制布局,父容器必须是 flex

二. 弹性盒模型学习的意义

目前流行的web技术布局形式基本都采用的是类似弹性盒模型的属性

三. 常用属性

弹性盒模型可以分为两种*容器属性 和 *子元素属性

3.1容器属性

/* 
       row  默认子元素水平靠左排列
       row-reverse 子元素靠右倒序排列
       column 竖排
       column-reverse 倒序竖排
*/
1、flex-direction:row; (确定子元素排列的方向)
/*   
    nowrap:默认值,子元素宽度超过父级宽度时不换行;
    wrap:子元素宽度超过父级宽度时换行;
    wrap-reverse:子元素宽度超过父级宽度时换行且倒序排列;
 */
2、flex-wrap:wrap-reverse;(元素超过父容器尺寸时是否换行)
/*          
    flex-start:整体子元素靠左;
    flex-end:整体子元素靠右;
    center:整体子元素居中;
    space-between:第一个子元素靠左顶格,最后一个子元素靠顶格,中间的元素等分间距;
    space-around:第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半,中间的元素等分间距。
*/
3、justify-content:space-around;(子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式)
/* 
    flex-start:整体垂直靠上排列;
    flex-end:整体垂直靠下排列;
    center:整体垂直居中排列;
    baseline: 子元素内的文字底部对齐,如果文字大小不同,会导致子元素水平不对齐;
    stretch:如果子元素不设置高度,高度被拉伸到和父元素高度相同(除去自身的margin);
*/
4、align-items:stretch;(子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的垂直方向的分布方式)
/*    flex-start:多行整体靠上排列;
    flex-end:多行整体靠下排列;
    center:多行整体垂直居中排列;
    space-between:第一行子元素靠上顶格,最后一行子元素靠下顶格,中间行元素等分垂直的间距;
    space-around:第一行子元素靠上的间距和最后一行子元素靠下的间距是中间行元素间距的一半,中间行的元素等分垂直间距。
*/
5、align-content:space-around;(设置多行子元素在行方向上的对齐方式)

3.2子元素属性

/* 
        表示的是当父元素有多余的空间时,这些空间在不同子元素之间的分配比例(安卓里的权重) 
 */
1、flex-grow:number;

Android系统架构

发表于 2017-12-19 | 分类于 Android

Android 底层结构

这里写图片描述

Android开发常用

发表于 2017-12-05 | 分类于 Android

EditText

1.1 明文与密文

1
2
3
4
5
6
// 密文显示
TransformationMethod method = PasswordTransformationMethod.getInstance();
etLoginPassword.setTransformationMethod(method);
// 明文显示
HideReturnsTransformationMethod method = HideReturnsTransformationMethod.getInstance();
etLoginPassword.setTransformationMethod(method);

1.2 默认不获取焦点
父容器设置(其实只要布局内有一个控件设置就可以)

1
android:focusableInTouchMode="true"

1.3 中间有空格的需求

文本编辑器的基本使用

发表于 2017-12-05 | 分类于 其他

代码区域

1.1 普通写法:

1
2
3
 public void main(){
system.out.printf("hello word");
}

1.2 有链接的写法1

class pygments.lexers.jvmMDN Documentation
1
2
3
4
 // 😄
public void main(){
system.out.printf("hello word");
}

1.3 有链接的写法2(建议用这种)

Discover if a number is primeSource Article
1
2
3
public void main(){
system.out.printf("hello word");
}

加载图片

网上说可以加载相对路径,试了一下发现不可以。也不知道什么原因。但是加载网上的图片是可以的,所以可以把图片先上传到GitHub再复制url,或者也可以直接加载网上的图片
这里写图片描述

心得

md格式是固定的,缩进多一个空格都会变成普通文本。也不需要理解为什么要这样写,反正用就是了,写多就熟了。 更高深的用法可以去csdn或者其他博客网站上新建一篇博客去模仿写

代码区域参考链接

http://octopress.org/docs/plugins/backtick-codeblock/

观察者模式

发表于 2017-12-05 | 分类于 设计模式

Hello World

发表于 2017-12-01

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

热爱编程、热爱学习

6 日志
4 分类
8 标签
GitHub E-Mail
© 2018 热爱编程、热爱学习
由 Hexo 强力驱动
|
主题 — NexT.Pisces v5.1.3