弹性盒子布局:
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
复制代码