weixin_34290096
weixin_34290096

新手flex布局入门篇，看这篇文章就够了

提纲

  • CSS介绍

  • 盒子模型

  • 什么是flexbox

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

Flexbox基础+项目实战视频

源码链接

CSS介绍

参考文档

  • http://www.css88.com/book/css/

  • http://www.w3school.com.cn/css3/index.asp

  • http://www.runoob.com

什么是层叠样式表

CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

样式语法

Selector {property:value}

如何将样式表加入您的网页

你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

内联方式 Inline Styles

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

示例代码：


这一行的字体颜色将显示为红色

内部样式块对象 Embedding a Style Block

你可以在你的HTML文档的标记里插入一个块对象,再在里面插入如下代码。

示例代码：

body {
  background:#fff;
  color:#000;
}
p {
  font-size:14px;
}

外部样式表 Linking to a Style Sheet

你可以先建立外部样式表文件*.css，然后使用HTML的link对象。

示例代码：

Flex布局

网页布局（layout）是CSS的一个重点应用。

传统布局

新手flex布局入门篇，看这篇文章就够了_第1张图片

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。

Flexbox 布局

新手flex布局入门篇，看这篇文章就够了_第2张图片
CSS Flexible Box Layout Module 简称 Flexbox Layout，Flexbox 布局是CSS3中一种新的布局模式，用于改进传统模式中标签对齐、方向、以及排序等等缺陷。

The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

最重要的特点是当父视图因为不同的屏幕而改变自身大小时，父视图可以动态的改变子视图的宽和高来尽可能的填充父视图可用的空间。

许多设计师和开发者发现flexbox布局更容易使用，元素的定位相对于传统布局只需要使用更少的代码即可实现，使开发过程更简单。

最新的flexbox支持的浏览器

  • Chrome 29+

  • Firefox 28+

  • Internet Explorer 11+

  • Opera 17+

  • Safari 6.1+ (prefixed with -webkit-)

  • Android 4.4+

  • iOS 7.1+ (prefixed with -webkit-)

查看浏览器支持特性.

flexbox用法

要想使用 flexbox 布局只需要在父标签设置display属性即可:

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

如果你希望你的子元素能够使用flexbox布局，你可以这样写：

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

Note:这是让container能够使用flexbox布局的唯一属性，它能够让所有的子视图立刻变成flex items。

盒子模型

在我们开始学习flexbox相关属性之前，我们先介绍一下flexbox model。

类和对象的类比

类：它是抽象的概念，比如div，p，span，input等等标签

对象：对象是具体的东西，比如

,

,, 等等

盒子模型结构

代码




    
    flexbox-model
    





    

        flexbox-model

效果图

新手flex布局入门篇，看这篇文章就够了_第3张图片

width和height计算

盒子的宽度 = 效果图中蓝色边框的宽度

盒子的高度 = 效果图中蓝色边框的高度

标准的盒子模型结构图

新手flex布局入门篇，看这篇文章就够了_第4张图片

flex-container和flex-item之间的关系





    
    flexbox-model
    





    
flex-item

    
flex-item

    
flex-item

效果图解析

下图中黄色的图是flex-container,三个白色的正方形是flex-item,flex-container是flex-item的父视图，我们通常叫容器,flex-item是flex-container的子视图，我们通常叫做项目,容器中可以有多个项目，一个项目只有一个直接的容器，容器里面的多个项目有排列方向，下图中，三个项目的排列方向是从左到右排列，我们把和排列方向一致的这条线叫做主轴，另外一条线叫做交叉轴.

新手flex布局入门篇，看这篇文章就够了_第5张图片

容器的flexbox属性

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

项目的flexbox属性

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

请注意，值 row 和 row-reverse 受 flex 容器的方向性的影响。 如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

row

flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。

Value

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第6张图片

row-reverse

表现和row相同，但是置换了主轴起点和主轴终点

Value

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction: row-reverse;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第7张图片

column

flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

Value

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第8张图片

column-reverse

表现和column相同，但是置换了主轴起点和主轴终点.

Value

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第9张图片

Default value: row

flex-wrap

这个属性主要是设置container中的items是否会换行。

nowrap

Value

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第10张图片

wrap

Value

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第11张图片

wrap-reverse

Value

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap: wrap-reverse;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第12张图片

Default value: nowrap

flex-flow

flex-flow是flex-direction和flex-wrap的组合。

Values

.flex-container {
  -webkit-flex-flow:  || ; /* Safari */
  flex-flow:          || ;
}

Default value: row nowrap

justify-content

justify-content主要用设置flex items在容器里面严着主轴的排列方式。

flex-start

Value

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第13张图片

flex-end

Value

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第14张图片

center

Value

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第15张图片

space-between

Value

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第16张图片

space-around

Value

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第17张图片

Default value: flex-start

align-items

当flex items在主轴上只有一排时，align-items属性主要用于设置交叉轴上flex items的排列方式。

stretch

Value

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第18张图片

flex-start

Value

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第19张图片

flex-end

Value

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第20张图片

center

Value

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第21张图片

baseline

Value

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items: baseline;
}

效果图

Default value: stretch

align-content

当flex items在主轴上有多排(只有一排时此属性不起作用)时，align-content属性主要用于设置交叉轴上flex items的排列方式。

stretch

Value

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第22张图片

flex-start

Value

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第23张图片

flex-end

Value

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第24张图片

center

Value

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第25张图片

space-between

Value

.flex-container {
  -webkit-align-items: space-between; /* Safari */
  align-items: space-between;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第26张图片

space-around

Value

.flex-container {
  -webkit-align-items: space-around; /* Safari */
  align-items: space-around;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第27张图片

Default value: stretch

order

order用于改变容器中项目的默认的排列顺序。

Value

.flex-item {
  -webkit-order: ; /* Safari */
  order: ;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第28张图片
通过修改flex-item的值可以让flex items重新按照order值重新排列。

Default value: 0

flex-grow

flex-grow属性的默认值为0,当它为0时，尽管flex-container剩余很多多余的空间，但是当前的flex-item并不会自动伸缩以填充flex-container多余的空间。

其实我们可以这么总结，flex-grow属性值决定它相对与其他兄弟视图自动填充flex-container剩余空间的比例。

Values


.flex-item {
  -webkit-flex-grow: ; /* Safari */
  flex-grow:         ;
}

当所有的item的flex-grow的值相同时，他们所占据的空间相同。
新手flex布局入门篇，看这篇文章就够了_第29张图片

下图中5个flex-item的比例关系为:1:3:1:1:1

新手flex布局入门篇，看这篇文章就够了_第30张图片

Default value: Default value: 0

flex-shrink

flex-shrink属性和flex-grow相反，默认值为0,当flex-container空间就算不够时，也不允许缩小，当flex-shrink的值为非0的正数时，表示当前flex-item相对与其他的兄弟item的缩小比例值。

Value


.flex-item {
  -webkit-flex-shrink: ; /* Safari */
  flex-shrink: ;
}

假设下图中除了2的flex-shrink值为默认值0，其他的都为1，那么当空间不足时，2并不会变小，其它的兄弟视图等比例缩小。

新手flex布局入门篇，看这篇文章就够了_第31张图片

Default value: 1

flex-basis

制定某一个item在主轴上的大小，或者在主轴上相对于flex-container大小的比例关系。

Value

.flex-item {
  -webkit-flex-basis: auto | ; /* Safari */
  flex-basis:         auto | ;
}

效果图

新手flex布局入门篇，看这篇文章就够了_第32张图片

Default value: auto

flex

flex是flex-grow, flex-shrink andflex-basis的缩写，auto等价于1 1 auto,none等价于0 0 auto.

.flex-item {
  -webkit-flex: none | auto | [  ? ||  ]; /* Safari */
  flex:         none | auto | [  ? ||  ];
}

Default value: 0 1 auto

align-self

align-self主要用在当因为flex-container上的属性align-items属性改变了自己的状态但是又希望自己的状态和其它兄弟视图之间的状态不一样时，就可以使用align-self来的自身的状态进行设置。

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

新手flex布局入门篇，看这篇文章就够了_第33张图片

Default value: auto

你可能感兴趣的:(新手flex布局入门篇，看这篇文章就够了)

  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 那个抄袭的大张伟 猫小努
    最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期
  • 相信相信的力量 孙丽_cdb3
    孙丽中级十期坚持分享第345天有一个特别有哲理的故事：有一只老鹰下了蛋，这个蛋，不知怎的就滚到了鸡窝里去了，鸡也下了一窝蛋，然后鸡妈妈把这些蛋全都浮出来了，孵出来之后等小鸡长大一点了，就觉得鹰蛋孵出来的那只小鹰怪模怪样，这些小鸡都嘲笑它，真难看，真笨，丑死了，那只小鹰觉得自己真是谁也不像，真是不好看，后来鸡妈妈也不喜欢他，我怎么生出你这样的孩子来了？真烦人，后来这群小鸡和小鹰一起生活，有一天，老鹰
  • 谁家酒器最绝唱，藏在酒厂人未知？景阳冈酒厂先秦藏品大揭秘 李虓酒评论
    文/王赛时中国的酒器酒具历史久远，举世闻名。从北京的故宫博物院、中国国家博物馆，到世界各国的大型博物馆，都以能够收藏中国古代酒具而夸耀。但很少有人知道，在山东阳谷景阳冈酒厂，默默地收藏了两千件中国酒器。这些酒器，就封藏在景阳冈的酒道馆里。其中有一些青铜酒器，一睡就是三、四千年，堪称无声国宝，堪作无字史书！今天，我将引领诸位首先窥视一下景阳冈酒道馆的9件先秦藏品，你自己来说震撼不震撼。提示：这只是景
  • 我的黑历史 袖手围观有来有去
    孩子同学与我们一起共进晚餐，俩孩子加我三个人。小同学是一个大方率性礼貌的小孩，我们也都非常喜欢。好了，回到正题上来让我把这个故事讲完。俩孩子都喜欢吃鱼，所以就发生了小孩子之间常会发生的事。我狠狠的盯了我家孩子，孩子表情有些狼狈。和孩子单独一起的时候，见她尚未释怀，并谴责我不该狠盯她，让她没面子。也许是她触动了我的童年往事吧。由此，一狠心，给她讲了一段埋藏心里极深的黑历史：我奶奶有四个儿子，四个儿子
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！ 成长时间线
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
  • 【夜读】提升生活品质的8个建议 茳淮秀水
    停止攀比很多人之所以感觉疲惫，部分原因是来自于跟别人攀比。殊不知，攀比得到的满足只是片刻的，过后往往会感到空虚。过分在意别人的评价，丢失的是自己原有的审美，扰乱的是自己最初的节奏。不妨活得洒脱些，自己内心丰盈了，快乐就能更持久。停止自责想改变自己，先从接纳自己开始。越是过分自责，就越难改变现状，因为如果把精力全耗在自责上，就没有精力用来改变了。遇到问题，我们要用正确的心态去面对。与其一味自责，不如
  • 蘩漪：新女性？利己主义者 赮_红雨
    蘩漪是曹禺《雷雨》笔下的女性形象。对于她的喜爱，曹禺在之前的访谈中，就已经表达得很清楚了，蘩漪是他所倾心的女子的“代替者”。在这个女性身上有着曹禺最精心的描写，但同时她的身上又存在着一些时代的问题。图片发自App首先，繁漪是追求自由和幸福的新女性形象。她是精神悲剧的核心人物，她对周朴园的反抗，具有典型意义。她是位资产阶级家庭出身的小姐，受过五四新思潮的影响，她任性、傲慢，追求人格独立、个性自由和爱
  • 如果做到轻松在股市赚钱？只要坚持这三个原则。 履霜之人
    大A股里向来就有七亏二平一赚的说法，能赚钱的都是少数人。否则股市就成了慈善机构，人人都有钱赚，谁还要上班？所以说亏钱是正常的，或者说是应该的。那么那些赚钱的人又是如何做到的呢？普通人能不能找到捷径去分一杯羹呢？方法是有的，但要做到需要你有极高的自律。第一，控制仓位，散户最大的问题是追涨杀跌，只要涨起来，就把钱往股票上砸，然后被套，隔天跌的受不了，又一刀切，全部割肉。来来回回间，遍体鳞伤。所以散户首
  • 高端密码学院笔记285 柚子_b4b4
    高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商 nseejrukjhad langchaineasyui前端python
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
  • 想明白这个问题，你才能写下去 文自拾
    春节放假的时候，又有一天梦见她，第二天她冒着漫天大雪，傻傻地跑来见我。她说，见见傻傻的我，天很冷，心很暖。她回去后，我写了一篇文章，题目叫——从此梦中只有你。我们没在一起的很长一段时间里，她都在我的心底，一次次出现在我的梦里。我对她说，在一起之前，是胆小且闷骚，在一起之后，我变得不要脸了。不要脸的——去爱你。那文章没写完，火车上，给她看了。我有点小失望，花了好几个小时写，她分分钟就看完，很希望她逐
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • 走向以教育叙事为载体的教育叙事研究 666小飞鱼
    今天我读了吴松超老师的《给教师的68条建写作建议》中的第23条《如何通过教育叙事走向研究》，吴老师在文中与我们分享了一个德育案例，这是一个反面的案例，意在告知我们在处理问题时，不能就考虑的点太窄，思考要全面。走向教育叙事研究，教师要有敏锐的“感知力”，这个感知力来自于背后专业知识的支撑，思维能力以及广阔的视野和见识等。所以对于同一件事处理方法不同，这个就是教师背后“敏锐力”的不同造成的，也就是说是
  • 2023-10-22 奥雷里亚诺第n
    昨天在B站看到关于猫喜欢挠人的视频，视频教导说猫挠人的话就抓住它的后脖颈然后用手打打挠人的那个爪子。视频本身没什么，但评论区却炸开了锅（真是符合挑食者厌食心理）。令我印象最深刻的一个甚至上升到了关于我是谁这种终极问题。它说，猫就是畜生，它挠人就打它别惯着它，反正我六道轮回成了人就应该保持人的高贵，谁都别想来打破。我顿时汗颜，但看到下面全是类似的言论只不过后面的理由各有不同，本来想骂人的心都凉了一半
  • 人怎么才能认识自己？ 阿尚青子自由写作人
    人怎么才能认识自己？（原问题）我从不愿意上纲上线地确定偌大的话题，就直接说吧。纵使你能认识世界上的万事万物，你很难做到真实地认识自己。因为即使就这个世界，基本上每个人也很难做到客观、公正、科学地认识。对你好的人就是好吗？一件事情是否能够保持永远原来的样子？借不到钱的男友，女友想离开他就理直气壮？父母对子女有几分慷慨，又有几分是无私？工作的意义究竟是什么？是工作需要你，还是你需要工作呢？诸如此类的问
  • 2022-11-17 无奇君
    又去了一次社康，这次是急性支气管炎……太难了。半夜就猛咳，天天咳醒，还好他戴海绵耳塞睡吵不到他，要不然对他来说也是种煎熬。一累也会猛咳，希望这次是最后一次吃药，吃完就好。又想把头发剪短了，顺便染个色。可是刚刚去看人家还没开门，不是休息日老板好佛系。理发店是个夫妻店，一年多前刚搬来的时候老板还没对象呢，当时聊天老板就说希望能找个对象一起两个人守着店都比上班强。不久后再去他已经有对象了，而且在店里帮忙
  • 冬天短期的暴利小生意有哪些？那些小生意适合新手做？ 一起高省
    短期生意不失为创业的一个商机，不过短期生意的商机是转瞬即逝的，而且这类生意也很难作为长期的生意去做，那冬天短期暴利小生意查看更多关于短期暴利小生意的文章有哪些呢?给大家先推荐一个2023年风口项目吧，真很不错的项目，全程零投资，当做副业来做真的很稳定，不管你什么阶层的人，或多或少都网购吧？你们知道网购是可以拿提成，拿返利，拿分佣的吗？你们知道很多优惠券群里面，天天群主和管理发一些商品吗？他们其实在
  • 穷人做什么生意最赚钱？10个适合穷人赚钱的路子？ 氧惠爱高省
    不管在什么地方，一般都是穷人占大量数，而富人只有少数，但是它们却掌握着大量的财富。对于穷人来说，想要买车、买房等奢侈品就难如登天，因为他们只能通过打工来赚取几千元的月薪。➤推荐网购返利app“氧惠”，一个领隐藏优惠券+现金返利的平台。氧惠只提供领券返利链接，下单全程都在淘宝、京东、拼多多等原平台，更支持抖音、快手电商、外卖红包返利等。（应用市场搜“氧惠”下载，邀请码:521521，全网优惠上氧惠！
  • Python 实现图片裁剪（附代码） | Python工具 剑客阿良_ALiang
    前言本文提供将图片按照自定义尺寸进行裁剪的工具方法，一如既往的实用主义。环境依赖ffmpeg环境安装，可以参考我的另一篇文章：windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg，而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装：pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了，上代码
  • 被带偏的家人，可气又感动 艾孤璟
    当我还是个严肃且内敛的孩子时，爷爷也是个严谨且和蔼的人，虽然不苟言笑，但没有距离感。当我接触的人越来越多，知道怎么调动气氛，家人们就被我带偏了。家里人本来没有外号的，后来都被我给取了各种各样的名字，“骂人”时就相对应的有了暗号。村里的小孩，本来不知道怎么使用假动作“打人”，怎么给人取合适的外号，后来也被我带偏了。老人常说我，古灵精怪，好的不学非得学坏的，带着不良风气。而我对他的话总是想生气又觉得搞
  • 烟花美，但瞬间即逝的样子像极了爱情。 胡萝卜很甜
    我见过烟花在天上绽放时绚烂的模样也目睹过爱情消逝曾经相爱的两人变冷漠的样子其实我特别喜欢烟花绽放的艳丽大年初一凌晨的烟花手机拍的没有眼睛看到的美但是烟花虽美，稍纵即逝，眼睛刚记录下它的美好，就转眼消失不见。天空又恢复一片黑。烟花的样子像极了爱情啊……不论曾经多么山盟海誓，海枯石烂。只要吵架或者分手。就变得那么冷漠，那么陌生。你甚至开始怀疑你有过爱情么？真正的爱情到底是什么样子。来的快去的也快么？对
  • 2018-12-29 枫叶红时总多离别
    2018年12月29日星期六昨天老师就告诉我们，今天下午不用上课，是图书漂流活动会。我觉得很兴奋，好期待。到了下午，我帮好忙就到外面去买书，刚一出去，就有一大帮的大哥哥、大姐姐围着我问要不要买书，买一本书送一颗糖。我看到了一本《小老虎比上树》的书，问大姐姐多少钱，大姐姐说这本书原价13块，现在便宜4块钱也就是9块钱卖给你，我就把一张10块钱给她找，她找了我一块钱。我现在想想我今天只带了10块钱，现
  • Redis系列：Geo 类型赋能亿级地图位置计算 Ly768768 redisbootstrap数据库
    1前言我们在篇深刻理解高性能Redis的本质的时候就介绍过Redis的几种基本数据结构，它是基于不同业务场景而设计的：动态字符串(REDIS_STRING)：整数(REDIS_ENCODING_INT)、字符串(REDIS_ENCODING_RAW)双端列表(REDIS_ENCODING_LINKEDLIST)压缩列表(REDIS_ENCODING_ZIPLIST)跳跃表(REDIS_ENCODI
  • Low Power概念介绍-Voltage Area 飞奔的大虎
    随着智能手机，以及物联网的普及，芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标，我们需要在系统设计阶段就采用低功耗设计的方案。而且，随着设计流程的逐步推进，到了芯片后端设计阶段，降低芯片功耗的方法已经很少了，节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗（staticleakagepower）和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等
  • 主题升华随机抽总结 木棉咕噜
    昨天晚上在火山灿教练那里抽了主题升华最后一关。一共抽了两个故事，现总结如下。第一个故事是《并不是你想象的那样》。主题一：有时候，面对别人一些貌似不合常情的行为，不要轻易的指责他，也许背后有我们所不知道的原因。在这一个主题里面，刚开始的时候，我没有加上貌似二字。所以就没有改动之后这么精准。主题二：有时候我们对他人善意的行为，可能会给我们带来一些意外的回报。主题三：面对同样一件事，因为不同的人看待问题
  • 那个严厉的启蒙老师 小米星的天空
    本文参加鹏哥教师节征文活动我的启蒙老师李老师，大概是唯一动手打过我，但是我仍然很感恩的老师吧。李老师当年四十多岁，擅长珠心算教学，算是我们乡镇小学的王牌老师。李老师很严厉，不仅要骂学生，还要动手打人，他的大眼睛一瞪，全班同学都瑟瑟发抖。在九十年代，家长不像现在这样宠溺孩子。许多家长都跟老师说，管得严一点，不听话就给我打。那时候棍棒教育是很正常的，教室里的木质米尺，常常因为被用来打调皮男生的屁股而折
  • 想家，想念家乡的四季 三妹杨敏
    不知道，为什么，这次我回自己出生地—老家，反倒有了一种出差走亲戚的感觉。人啊，出来得久了，就生分了。就不再那么心贴着心脸对着脸了。需要时间，需要机缘，需要我们再重新把自己的思维重置一遍，你才能够转得回这个弯儿的。最好的转弯儿，不是说教，也不是余旧，都有些治标不治本。真正管用的东西，只有一样。也简单。一个字：吃。吃一顿家乡的饭，喝一口家乡的水，听一听那浓重得有些陌生的乡音，心就回来了。心回来，人才算
  • ASM系列六 利用TreeApi 添加和移除类成员 lijingyao8206 jvm动态代理ASM字节码技术TreeAPI
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/
  • Springmvc-权限设计 bee1314 springWebjsp
    万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标： 1.实现权限的管理（CRUD） 2.实现部门管理 （CRUD) 3.实现人员的管理 （CRUD） 4.实现部门和权限
  • 算法竞赛入门经典（第二版）第2章习题 CrazyMizzz c算法
    2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil
  • struts2中jsp自动跳转到Action 麦田的设计者 jspwebxmlstruts2自动跳转
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士）   2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
  • php 操作webservice实例 IT独行者 PHPwebservice
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve
  • Windows下使用Vagrant安装linux系统 _wy_ windowsvagrant
    准备工作： 下载安装 VirtualBox ：https://www.virtualbox.org/ 下载安装 Vagrant ：http://www.vagrantup.com/ 下载需要使用的 box ： 官方提供的范例：http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ 
  • 更改linux的文件拥有者及用户组(chown和chgrp) 无量 clinuxchgrpchown
    本文（转） http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用： 使用chown命令可以修改文件或目录所属的用户：        命令
  • linux下抓包工具 矮蛋蛋 linux
    原文地址： http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起” alafqq mybatis
    最近看了  每一个用mybatis的男纸，你伤不起 原文地址 ：http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖； 个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 发现多了一个mapper层；个人感觉就是个dao；
  • 解决java数据交换之谜 百合不是茶 数据交换
    交换两个数字的方法有以下三种 ，其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =
  • 渐变显示 bijian1013 JavaScript
    <style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style>
  • 探索JUnit4扩展：断言语法assertThat bijian1013 java单元测试assertThat
    一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}} bit1129 gson
      如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析：   import com.google.gson.Gson;
  • 【Kafka九】Kafka High Level API vs. Low Level API bit1129 kafka
    1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题  
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-归并排序 bylijinnan java
    import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to
  • Netty源码学习-CompositeChannelBuffer bylijinnan javanetty
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API（ http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 可以看到，所谓“Transparent Zero Copy”是通
  • Android中给Activity添加返回键 hotsunshine Activity
    // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) {
  • 静态页面传参 ctrain 静态
    $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令 daizj windows查找某个目录下的所有文件包含某个字符串
    findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
  • 改善程序代码质量的一些技巧 dcj3sjt126com 编程PHP重构
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
  • SharedPreferences对数据的存储 dcj3sjt126com
    SharedPreferences简介：                                                   &nbs
  • linux复习笔记之bash shell (2) bash基础 eksliang bashbash shell
    转载请出自出处： http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量（locale）  1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8"
  • Android零碎知识总结 gqdy365 android
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
  • HoverTree.Model.ArticleSelect类的作用 hvt Web.netC#hovertreeasp.net
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
  • PHP 判断是否使用代理 PHP Proxy Detector 天梯梦 proxy
    1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to
  • apache的math库中的回归——regression（翻译） lvdccyb Mathapache
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。   数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。   基本覆盖了：线代，统计，矩阵， 最优化理论 曲线拟合 常微分方程 遗传算法（GA）， 还有3维的运算。。。
  • 基础数据结构和算法十三：Undirected Graphs (2) sunwinner Algorithm
      Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
  • 云计算平台最重要的五项技术 sumapp 云计算云平台智城云
    云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 仅需要几分钟，根据CP
  • 《京东技术解密》有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾： http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下： 一等奖（两名） Microhardest：http://microhardest.ite
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他