2016年03月_bwshqh

原创 CSS学习（二十二）-flexbox模型之三

一、理论：1.flex-line-pack 堆栈伸缩行a.使用与flex-pack 相同b.增加stretch start/end/center/justify(平均分布)/distribute（两端保留一半的空间）/stretch（拉伸填充整个容器）c.flex-line针对个体，flex-line-pack针对群体二、实践：1. Title

2016-03-31 00:58:20 843

原创 CSS学习（二十一）-flexbox模型之二

一、理论：1.flex-flowa.flex-direction 设置伸缩容器的伸缩流方向b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列2.flex-packa.具有与box-pack属性相同的参数b.distribute 伸缩项目会平均分布在同一行里c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容

2016-03-29 00:59:16 1251

原创 CSS学习（二十）-flexbox模型

一、理论：1.混合版本flexbox模型a.display 1)flexbox 设置元素为块级容器2)inline-flexbox 设置元素为内联块伸缩容器b.display容器的基本使用1)主要用于IE10浏览器2.伸缩流方向flex-directiona.flex-direction1)row ltr-->自左向右排列，rtl-->自右向左排列2)row

2016-03-26 23:09:18 1508 1

原创 CSS学习（十九）-CSS伸缩布局盒

一、理论：1.flexbox模型基础知识a.flexbox布局方向不可预知b.屏幕和浏览器窗口大小发生改变可以灵活调整布局c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间e.指定如何将垂直元素布局轴的额外空间分布到该元素周围f.控制元素在页面上的布局方向g.按照不同于DOM所指定的方式

2016-03-20 23:58:12 3186

原创 Redis学习（二）-散列、有序集合

一、理论：1.散列命令a.redis的散列可以存储多个键值对之间的散列b.散列值中的数字也可以进行自增或者自减操作c.hset 在散列里面关联起给定的键值对d.hget 获取指定散列键的值e.hgetall 获取散列包含的所有键值对f.hdel 如果给定键存在于散列里面，那么移除这个键2.有序集合a.有序集合的键被称为成员，每个成员都是各不相同的b.有序集合

2016-03-20 22:56:58 1150

原创 CSS学习（十八）-滚动条、拖动元素、轮廓线

一、理论：1.overflow-x/overflow-ya.visible 默认值,不添加滚动条b.auto 添加滚动条c.hidden 内容溢出容器时，所有内容都将隐藏，不显示滚动条d.scroll 不论有无溢出，都显示滚动条e.no-display 当内容溢出容器时不显示元素f.no-content 当内容溢出容器时不显示内容2.resizea.none 用

2016-03-19 00:18:12 3063

原创 CSS学习（十七）-盒模型

一、理论：1.CSS盒模型a.外盒尺寸计算--高度element空间高度=内容高度+内距+边框+边距b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距c.内盒尺寸计算--高度element高度=内容高度+内距+边框d.内盒尺寸计算--宽度element宽度=内容宽度+内距+边框2.box-sizinga.content-box 默认

2016-03-18 00:59:53 1474

原创 Redis学习（一）-基础理论、字符串命令、列表结构

一、理论：1.redis可以存储键与5种不同类型的值之间的映射，可以将存储在内存的键值持久化到硬盘2.redis可以以两种不同的方式将数据写入硬盘，并且redis除了存储普通字符串键之外，还可以存储其他４种数据结构。但memcached只能存储普通的字符串键3.主流数据库的特点提要：a.redis 批量操作和不完全的事务支持，具有主从复制\持久化\脚本b.memcached 多

2016-03-16 23:50:43 683

原创 CSS学习（十六）-HSLA颜色模式

一、理论：1.HSLA颜色模式a.HSLA在HSL基础上增加了不透明度，值越大透明度越低b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持2.RGBA和HSLA颜色模式二者可以完全相互替换3.RGBA/HSLA的IE兼容方案a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式b.将透明的PNG图片平铺做为

2016-03-16 23:16:01 1866

原创 CSS学习（十五）-CSS颜色模式、CSS颜色透明度

一、理论：1.CSS3颜色模式a.RGBA颜色模式，在RGB基础上加了控制alpha透明度的参数b.HSL颜色模式：色调饱和度亮度c.HSLA颜色模式：A值取于0-1之间，值越大，透明度越低2.RGBA/HSLA滤镜格式a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度，需要将RGBA/HSLA中的透明值乘以255，然后将其转换成十六进

2016-03-16 00:38:30 3176

原创 CSS学习（十四）-CSS颜色之一

一、理论：1.RGB色彩模式 a.CMYK色彩模式 b.索引色彩模式 (主要用于web)c.灰度模式 d.双色调模式2.opacity:a.alphavalue:透明度b.inherit:继承父元素的不透明性二、实践：1. Title .row{ overflow: hidden;

2016-03-14 22:18:52 841

原创 CSS学习（十三）-文本换行符技巧

一、理论：1.word-wrap 用来断词而不是断字符2.word-break:a.break-all 可以允许非中文断开b.keep-all 在中文里不允许字断开2.white-space:a.nowrap 文本强制不换行b.pre 显示预定义文本格式3.浏览器适应：a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示b.在

2016-03-12 23:08:42 2260 1

原创 CSS学习（十二）-文本换行符

一、理论：1.word-wrap:a.normal 在半角空格或连字符的地方进行换行b.break-word 不截断英文单词换行2.word-break:a.normal 中文到边界上的汉字换行，英文从整个单词换行b.break-all 强行截断英文单词换行c.keep-all 不允许字断开3.while-space:a.normal 默认值b.pre 文本

2016-03-12 00:56:29 5042 1

原创 CSS学习（十一）-CSS文本溢出

一、理论：1.text-overflow a.clip 不显示省略标记b.ellipsis 显示省略标记二、实践：1. Title .text-overflow-clip1{ width: 80px; padding: 10px; border: 1px

2016-03-11 00:06:11 1686 1

原创 CSS学习（十）-CSS字体、CSS字体阴影

一、理论：1.css字体类型a.font-family 字体类型b.font-style 字体样式c.font-weight 粗细，可设置数字d.font-size-adjust 是否强制对文本使用同一尺寸e.font-stretch 横向拉伸变形字体f.foont-variant 字体大小写2.css文本类型a.word-spacing 词间距b.lett

2016-03-09 23:06:31 1661

原创 CSS学习（九）-CSS背景

一、理论：1.background-break a.bounding-box 背景图像在整个内联元素中进行平铺b.each-box 背景图像在行内中进行平铺c.continuous 下一行的背景图像紧接着上一行中的图像继续平铺以上仅在firefox下可用2.css多背景a.background-image 设置元素背景图片民，可用相对地址或绝对地址索引背景图像b.b

2016-03-07 23:56:15 1481 1

原创 CSS学习（八）-background-origin、background-clip

一、理论：1.css背景属性简介：a.background-color 背景颜色b.background-image 背景图片c.background-repeat 铺放格式d.background-attachment 固定或者滚动e.background-position 设置背景图片位置f.background-origin 指定绘制背景图片的起点g.back

2016-03-06 18:32:18 953

原创 CSS学习（七）-边框阴影效果（下）

一、理论：1.阴影层级：边框>内阴影>背景图片>背景色>外阴影2.多层阴影：每层之间用逗号隔开3.box-shadow兼容性：a.在现代浏览器新版本无须加前缀，但旧版本需要加b.ie8以下需要用ie滤镜来模拟实现c.box-shadow具有多个参数可选，可制作出圆润的阴影效果二、实践：1. Title .box-s

2016-03-06 01:26:51 1382

原创 CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）

一、理论：1.border-radius:a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半)c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形e.椭圆:需要设置圆

2016-03-04 01:05:59 4649

原创 CSS学习（五）-css圆角边框

一、理论：1.border-radius:左上\右上\右下\左下2.border-radius:圆角水平半径/圆角垂直半径3.在img上应用border-radius在webkit内核浏览器上不能对图片进行剪切二、实践：1. Title .border-radius{ width:250px;

2016-03-03 01:16:05 778

原创 CSS学习（四）-css边框样式（下）

一、理论：1.注意制作边框的图片的高与宽2.边框宽度配合到位3.切割边框背景图片合理二、实践：1. Title .border-image-btn{ display: inline-block; border: 18px solid green; bord

2016-03-02 00:28:10 668

bwshqh的博客