弹性盒布局

弹性盒子布局：

1.html，body必须都写height：100%才会产生弹性盒子；
 2.必须给所有块元素最外面写一个盒子.mian{display: -webkit-box;-   webkit-box-orient: vertical}
3.给中间元素article添加{-webkit-box-flex: 1;height:100%;width:100%;}
复制代码

1.两种方式：

（1）display：flex （2）display：inline-flex

2.弹性盒属性

（1）.container 容器
        flex-direction：方向  横向：row
                                           列向：column
        justify-content：控制内容的属性值
        align-items：
        align-content：
        flex-flow：row  nowrap
（2）.item  内容条目
        order：<number>  排序方式
        flex-grow：
3.媒体查询
     @media screen and（max-width：400px）{
        body{
            background：red；    
        }
    }
4.media Type：媒体类型
（1）all：所有设备
（2）screen：电脑屏幕，平板电脑，智能手机
（3）print：打印机
复制代码

妙味课堂

第一节课

中间显示：align-items:center
1. 定义盒模型：display:box    类似于左浮动
                          display:inline-box  
2.box-orient   定义盒模型布局方式
（1）horizontal        水平显示
（2）vertical            垂直显示  
3.box-direction    盒模型布局方向（也叫排列方向）
    （1）normal  正序
    （2）reverse  反序
4.box-ordinal-group   设置元素的具体位置
    例：-webkit-ordinal-group：2              将当前元素排列在第二个位置
5.box-flex   定义盒子的弹性空间
公式：子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和
6.box-pack:富裕空间管理
（1）.start      （默认值）所有子元素在盒子左侧显示         富裕空间在右侧
         end         所有子元素在盒子右侧显示         富裕空间在左侧
         center        所有元素居中
         justify        富裕空间在子元素之间平均分布
7.box-align ：start   上面显示        end  下面显示        center   中间显示
8.（这两项必须要加在父元素上）
    display：flex        弹性盒布局     类似于float    
    justify - content：四个属性
                         space-between： 弹性盒子元素会平均地分布在行里
                                   space - around   ：将各元素的左右留有空白
                                   flex-start               ：弹性盒子元素将向行起始位置对齐
                                    flex-end                ：弹性盒子元素将向行结束位置对齐

面试题
一个未知宽高的块元素如何在屏幕中水平垂直居中        水平：box-pack：center   
                                                                                      垂直：box-align：center
复制代码

第二节课

1.text-shadow ：0 0 10px  #ccc   文字阴影
2. box-shadow：inset  x   y   blur模糊半径   spread  扩展阴影半径   color   阴影颜色
    box-shadow  ：0 0 10px  #ccc   盒模型阴影
    box-shadow  ：inset   0 0 10px  #ccc   盒模型阴影   →→→→      内投影
    box-shadow  ： 0 0 10px  #ccc   盒模型阴影   →→→→     外投影   （不加inset）
3.box-reflect    倒影
   box-reflect：right    右倒影
                         left    左倒影  
                         above    
                         below
4.background：-webkit-linear-gradient（red  0，blue 100%）    颜色（阴影）渐变
5.实例：图片右倒影，然后渐变颜色   
  box-reflect：right  10px  -webkit-linear-gradient（right，rgba（0,0,0,1） 0，rgba（0,0,0,0） 100%）  
6.拖拽控制窗口大小 
     resize  必须配合overflow：auto  一起使用才会有效果
     resize：  none：不可拖拽
                    both：水平和垂直方向可以拖拽
                    horizontal：水平可以拖拽
                    vertical ：垂直方向可以拖拽
7.box-siziing：content-box  标准盒模型  （width/height = border+padding+content）
                         border-box    怪异盒模型   （width/height  = content）
复制代码

第三节课 响应式布局

css3分栏布局:只有webkit可以用
1.column - width  栏目宽度       column - width:250px
2.column - count 栏目列数        column - count :4  
3.column-gap 栏目距离             column-gap :10px
4.column - rule 栏目间隔线        column - rule :1px solid #ccc
响应式布局：可以适应不同终端   如：app和web
1.<link rel="stylesheet" type="text/css" href="indexa" media="screen and (min-width:800px)"/>
    <link rel"stylesheet" type="text/css" href = "indexb" madia = "screen and (min-width:600px) and (max-width:800px)"/>
2.横屏 和 竖屏
<link rel="stylesheet" media = "all and (orientation:portrait)" href = "indexa".css/>    横屏
<link rel="stylesheet" media = "all and (orientation:landscape)" href = "indexb".css/>   竖屏
3.媒体查询
style内部引入媒体查询
@media screen and （min-width:400px） and (max-width:500px){
    .box{margin:0 auto;}
}
style外部引入：
@import  url("indexc.css")   screen and （min-width:400px） and (max-width:500px);
4.media Type：媒体类型
（1）all：所有设备
（2）screen：电脑屏幕，平板电脑，智能手机
（3）print：打印机
（4）braille    盲文触觉设备
（5）embossed     盲文打印机
（6）projection    打印预览
（7）speech  “听觉类似的媒体类型”
（8）tty        不适用像素的设备
（9）tv   电视
复制代码

第四节课 新增ui属性

1.border-radius：10px  圆角
  border-radius：50%   圆
2.边框背景
border-image：url（）
        border-image-sourceg    引入图片
        border-image-slice           切割图片
        border-image-width          边框图片
        borde-image   图片排列方式
                                repeat            平铺       
                                round             重复
                                stretch            拉伸
3.border-colors   边框颜色
    火狐浏览器：左边框六种颜色叠加：-moz-border-left-colors：blue red yellow blue red yellow
4. background-image：-webkit-linear-gradient（起点  | | 角度  | | 颜色  ）      线性渐变
例：background-image：-webkit-linear-gradient（left top，red ，blue，yellow）从左上角→→左下角   由红色渐变为蓝色到黄    
        background-image：-webkit-linear-gradient（30deg，red，blue）
5.  background-image：-webkit-repeating-linear-gradient（60deg，red 0.blue 30px）   渐变 + 平铺
6.  IE 下颜色渐变兼容ie
filter : progid : DXImageTransform . Microsoft .gradient(startColorstr = "red" , endColorstr = "blue" , GradientType = "0")
startColorstr  :  开始颜色
endColorstr  ：结束颜色
GradientType= "0"  颜色从  上→下   渐变  
                       = “1” 颜色从  左→右  渐变
7.  -webkit-radial-gradient(left top, red,blue)                                                           径向渐变
注意    Firefox  目前只支持关键字
（1）起点 ： 可以是关键字 （left，right，top,bottom）,具体数值或者百分比
（2）形状 ：ellipse  椭圆      cirle  圆
（3）大小 ： closest-side   最近端    
                      farthest-corner   最远角
                      closest-Corner    最近角   
                      farthest-side  最远端  
                      contain  包含
                      cover   覆盖
8.  background：url（a.jpg） 0  0 ，url（b.jpg） 0 100%          多背景
9.  background-size ：x   y
    background-size ：100%  100%
    Cover    放大    contain  缩小
10. 背景  background-origin ：border  ||  padding  ||  content
                background-origin ： border-box  ：从border 区域开始显示背景
                background-origin ： padding-box  ：从padding区域开始显示背景
                background-origin ： content-box  ：从content 区域开始显示背景
11.  background-clip
         background-clip：border     从border区域向外裁剪背景
         background-clip：no-clip     从border区域向外裁剪背景
         background-clip：padding     从padding区域向外裁剪背景
         background-clip：content    从content区域向外裁剪背景
12.  -webkit-background-clip:text   只有Safari和Chrom才能实现用背景图片来填充文本的效果
                background-clip:text配合其私有属性-webkit-text-fill-color: transparent,
例子：-webkit-background-clip: text;
-webkit-text-fill-color: transparent;  透明的
.text{
      font-size:40px;text-transform: uppercase;        文字变成大写的-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
13. -webkit-mask:url() no-repeat position 遮罩
复制代码

第五课：

API:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
API:http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/
弹性盒子布局方向：

1.display：flex
2.fiex-direction
属性：
属性值 含义
row（默认值） 主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。
row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
column 主轴为垂直方向。排列顺序为从上到下。
column-reverse 主轴为垂直方向。排列顺序为从下到上。 
3.flex-wrap：
属性值 含义
nowrap（默认值） 容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
wrap 当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
wrap-reverse 与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。 
注意：可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来
        例如：flex-flow: row wrap;
4.兼容写法
1. 等分
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
2. 水平居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
3. 垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
div垂直居中：
http://www.cnblogs.com/gwcyulong/p/6251342.html
复制代码

转载于:https://juejin.im/post/5c9361c86fb9a070e25a64af