CSS3基础
一、CSS3盒子模型
1.box-sizing
- 定义盒子模型的尺寸解析方式
- 值：
- content-box（默认）盒子没变化
- border-box:盒子变小了（width,height是整个盒子的大小，不受padding,border的影响）
2.resize
- 是否允许用户缩放，调节元素尺寸大小(设置overflow:hidden;才有效)
- 值：
- none:不允许用户调整元素大小
- both:用户可以调节元素的宽度和高度
- horizontal:只能调节元素的宽度
- vertical:只能调节元素的高度
3.outline
- 给元素周围绘制一条轮廓线（不占用任何地方）像元素发出的光。
- 类似border
- 设置
outline：none可取消文本框的样式 - outline-width(外轮廓宽度)
- 长度值（不允许负值）
- medium:定义默认宽度的轮廓
- thin:定义比默认宽度细的轮廓
- thick:定义比默认宽度粗的轮廓
- outline-style（外轮廓风格）
- outline-color（外轮廓颜色）
- outline-offset（外轮廓的偏移量）
- 即：外轮廓距离border的距离，默认0px;这个属性需要单独写
- 其它三个属性可以综合
outline：宽度 形状 颜色（顺序不要求）
- 设置
4.display
-
盒子是否以及如何显示
-
none:隐藏对象，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
-
inline:内联元素
-
block:块元素
-
inline-block:内联块元素
-
list-item:指定对象为列表项目（类似ul，ol,li）
-
table:类似（table）
-
inline-table:指定对象为内联元素的表格(类似table)
-
table-caption:表格标题（类似caption）
-
table-cell:单元格（类似td）
-
table-row:表格行（类似tr）
-
table-row-group:表格行组（类似tbody）
-
table-column:表格列。类似（col）
-
table-column-group:表格列组显示（类似colgroup）
-
table-header-group:表格标题组（类似thead）
-
table-footer-group:表格脚注组。类似（tfoot）
-
run-in:根据上下文决定对象是内联对象还是块级对象
-
box:将对象作为弹性伸缩盒显示（伸缩盒最老版本）（CSS3）
-
inline-box:将对象作为内联块级弹性伸缩盒显示（伸缩盒最老版本）（CSS3）
-
flexbox:将对象作为弹性伸缩盒显示（伸缩盒过渡版本）（CSS3）
-
inline-flexbox:将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）（CSS3）
-
flex:将对象作为弹性伸缩盒显示（伸缩盒最新版本）（CSS3）
-
inline-flex:将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）（CSS3）
二、CSS3长度单位
1.相对长度单位
- ex：相对于字符'x'的高度。通常为字体高度的一半
- ch：数字‘0’的宽度
rem：相对于根元素（html）font-size计算值的倍数vm：相对于视口的宽度。视口被均分为100单位的vw- vh:相对于视口的高度。视口被均分为100单位的vh
- vmax:相对于视口的宽度或高度中较大的。视口被均分为100单位的vw
- vmin:相对于视口的宽度或高度中较小的。视口被均分为100单位的vw
- px：像素
- em：相对于当前对象内文本的字体尺寸
2.绝对长度单位
- cm
- mm
- q：1/4毫米
- in：英寸
- pt：点
- pc：派卡，相当于我国新四号铅字的尺寸
三、CSS3颜色
1.透明
- opacity
- 值
- 检索或设置对象的不透明度
- 对于不支持该属性的IE浏览器可以使用私有的滤镜属性来实线与opacity相同的效果
- IE兼容
filter:alpha(opacity="透明值（0~1）") 整个元素都会透明，包括背景和字- 让字不透明：
定位或浮动：使写文字的元素（父元素）脱离文档流
2.CSS3颜色模式
- RGB
- RGBA：
背景透明但是字不会透明 - HEX：十六进制
- ColorName(单词)
- HSL
- H:色调（值0~360）,0表示红色，120表示绿色，240表示蓝色
- S:饱和度（值0.0%~100.0%）
- L:l亮度（值0%~100%）
- HSLA
- transform透明
- curentColor当前颜色
四、CSS3渐变
1.渐变简介
- 渐变相当于背景图片
2.线性渐变
-
linear-gradient(角度/to 方向，颜色1 位置1，颜色2 位置2...) -
角度指定渐变方向
- to left：设置渐变为从右向左。相当于270deg
- to right:从左到右。相当于90deg
- to top:从上到下。相当于0deg
- to bottom:从上到下。相当于180deg
-
指定渐变的起止颜色
-
指定颜色
-
用长度值指定起止色位置。不允许负值
-
用百分比指定起止位置
例如 .box04{ background:linear-gradient(to bottom, red, green); } .box05{ background:linear-gradient(90deg, red 50px, purple 200px); } .box06{ background:linear-gradient(90deg, red 10%, purple 90%); }
-
3.径向渐变
-
radial-gradient(圆的类型 圆的大小 圆心位置，颜色1 颜色起位置，...，颜色n 颜色结束位置) -
圆的类型
- circle（圆形）
- ellipse(椭圆)
-
圆的大小
-
circle|ellipse都接受该值作为size
- closest-side:半径长度为从圆心到离圆心最近的边
- closest-corner:半径长度为从圆心到离圆心最近的角
- farthest-side:半径长度为从圆心到离圆心最远的边
- farthest-corder:半径长度为从圆心到离圆心最远的角
-
circle接受该值为size
- length:用长度指定正圆径向渐变的半径长度，不允许负值
-
ellipse接受该值为size
- length:用长度值指定椭圆径向渐变的横向或纵向半径长度，不允许负值
- percentage:用百分比指定椭圆径向渐变的横向或纵向半径长度
-
-
圆心位置
- 如果提供两个参数：第一个是横坐标，第二个是纵坐标
- 如果只提供一个，第二个默认为50%，即center
- percentage:用百分比指定径向渐变圆心的横、纵坐标值（可以为负值）
- length:用长度指定径向渐变的横坐标（允许负值）
- left:设置左边为径向渐变圆心的横坐标
- center:设置中间为径向渐变圆心的横坐标
- right:设置右边为径向渐变圆心的横坐标
- top:设置顶部为径向渐变圆心的纵坐标
- center:设置中间为径向渐变圆心的纵坐标
- bottom:设置底部为径向渐变圆心的纵坐标
-
渐变起止颜色
-
color：指定颜色
-
length:用长度表示起止色位置（不允许负值）
-
percentage:用百分比指定起止色位置（不允许负值）
.box02{ background:radial-gradient(circle 100px at left top, red, purple); } .box03{ background:radial-gradient(circle 100px at 10px 50px, red, purple); } .box04{ background:radial-gradient(at 50% 50%, red, purple); } .box04{ background:radial-gradient(circle at 50% 50%, red, purple); } .box08{ background:radial-gradient(circle farthest-corner at 50% 50%, red, purple); } .box09{ background:radial-gradient(ellipse 100px 50px at 50% 50%, red, green); }
-
4.重复渐变
-
repeating-linear-gradient() -
repeating-radial-gradient()background:repeating-linear-gradient(180deg, #fff 0px, #fff 29px, #999 30px);
5.低版本IE对渐变的兼容
- 滤镜
- filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorStr=orange,endColorStr=green)
五、CSS3属性私有前缀
IE浏览器 -ms-
firefox -moz-
chrome -webkit-
Safari -webkit
opera -o-
