css属性.docx
《css属性.docx》由会员分享，可在线阅读，更多相关《css属性.docx（20页珍藏版）》请在冰豆网上搜索。
css属性
CSS3新属性
1.css2中的背景属性
Background-color背景颜色
Background-image背景图片
Background-position背景图片的位置
Background-position-x背景图片的x位置
Background-position-y背景图片的y位置
Background-repeat背景图片的重复方式
Background-attachment背景图片的绑定方式
Background:
背景图片的综合属性设定
CSS3中新增的属性：
多背景属性
格式：
background:
url（图片地址）重复设定定位属性等,
url（图片地址）重复设定定位属性等,
url（图片地址）重复设定定位属性等....
Background-origin：
背景原点定位属性
Padding-box:
padding开始的位置为原点（默认）
Border-box从最外面边框开始的位置为原点
Content-box：
从内容开始的位置为原点
Background-clip:
背景图片切割属性
Border-box从边框开始切割（默认，不切割）
Padding-boxpadding向外（边框）的内容不现实
Content-box:
内容向外（边框和padding）不显示
text:
文字切割（需要使用浏览器前缀）
Background-size:
设置背景图片的大小
值为长度单位即可
Auto背景图片原始大小默认值
cover适当缩放图片使得图片刚好能覆盖元素
contain适当缩放图片使得元素刚好包含图片
关于颜色
CSS2中的颜色表示方式
英文单词:
red,green,blue,pink....
rgb模式:
rgb（红色值,绿色值,蓝色值）所有值为0-255
HEX模式:
#红色值绿色值蓝色值（所有值为00-FF）
CSS3中新增的颜色表示方式
rgba模式
增强的RGB模式，在RGB模式的基础上增加了A值，A表示透明度，取值为0-1之间的数值，0为完全透明，1为完全不透明
格式:
rgba（红色值,绿色值,蓝色值,透明度）
hsl模式
HSL模式也叫做色轮模式
H色调选择颜色种类取值0-360
S饱和度0%-100%
L亮度0%-100%
注意：
HSL模式的目的是为了无限的接近自然界颜色种类的表示方式。
hsla模式
在HSL模式的基础上添加的透明度值的新的颜色表示方式
H色调选择颜色种类取值0-360
S饱和度0%-100%
L亮度0%-100%
A透明度0-1之间的小数
新的颜色属性
Opacity:
设置透明度属性
设置元素的透明值，取值为0-1之间的小数
新的颜色值
Transparent透明属于英文单词颜色
关于浏览器前缀
浏览器:
IE浏览器-ms-前缀
火狐浏览器-moz-前缀
chrome浏览器-webkit-前缀
safari浏览器-webkit-前缀
opera浏览器-o-前缀
标准的实验性质属性书写规范：
-webkit-CSS属性;
-moz-CSS属性;
-o-CSS属性;
-ms-CSS属性;
CSS属性;
新的图像表示方式
渐变:
分为四种线性渐变、径向渐变、重复的线性渐变和重复的径向渐变。
注意：
渐变本质是图像。
不是一种颜色。
线性渐变
最简单的颜色渐变
Linear-gradient（开始颜色,结束颜色）;
改变方向的颜色渐变
Linear-gradient（方向,开始颜色,结束颜色）;
注意：
方向值可以使用位置单词，一共八个方向，left.right.,top,bottom,lefttop,leftbottom,righttop,rightbottom。
多颜色渐变
Linear-gradient（方向,开始颜色,中间色....,结束颜色）
制定渐变颜色的位置
Linear-gradient（方向,开始颜色位置点,中间色位置点....,结束颜色位置点）
注意：
位置点可以是像素可以是百分比，只要是长度就行...
径向渐变
最简单的径向渐变
Radial-gradient（开始颜色,结束颜色）
带有制定原点
Radial-gradient（原点,开始颜色,结束颜色）
注意:
原点为坐标，可以是像素可以是百分比也可以是英文单词.
设定渐变的形状
Radial-gradient（原点,形状,开始颜色,结束颜色）
circle圆形
ellipse椭圆形默认值
设定渐变的大小
Radial-gradient（原点,形状大小,开始颜色,结束颜色）
Closest-side最近的边
Closest-corner最近的角
Farthest-side最远的边
Farthest-corner最远的角
cover覆盖
contain包含
多颜色渐变
Radial-gradient（原点,形状大小,开始颜色,,中间色...结束颜色）
制定渐变颜色的位置
Radial-gradient（原点,形状大小,开始颜色位置点,中间色位置点...结束颜色位置点）
重复的线性渐变
Repeating-linear-gradient（方向,开始颜色,中间色...结束色位置点）
注意：
结束颜色的位置点决定渐变的重复次数，例如,50%重复2次，20%重复5次
重复的径向渐变
Repeating-radial-gradient（方向,开始颜色,中间色...结束色位置点）
注意：
结束颜色的位置点决定渐变的重复次数，例如,50%重复2次，20%重复5次
角度单位：
deg度，一个圆周为360度
turn圈/周一个圆周就是1turn
grad梯度一个圆周400梯度
rad弧度一个圆周2N弧度（基本不用..）
文本属性:
text-transform:
设定大小写转换的属性
auto原始大小
capitalize首字母大写
uppercase转化为大写字母
lowercase转化为小写字母
full-width适用于拉丁字符...
white-space:
设置元素内部空白字符的处理方式
normal正常
nowrap强制内容超过元素不换航
pre设置元素内部空白为与格式化模式，超过不换航
Pre-wrap:
设置元素内部为预格式化模式，超出换行
Tab-size:
设置tab键的长度
值为整数或者长度单位
注意：
设置整数值表示tab键的N倍。
Letter-spacing设置字符间距
值为长度单位（对汉字有效）
Word-spacing设置单词间距
值为长度单位（对汉字单词无效）
Word-break:
设置是否允许在一个单词内部断开换行
normal正常
break-all允许断开单词
Word-wrap:
设置一行内单词的断开设置（overflow-wrap）
normal正常
Word-break:
允许单词断开
注意：
word-break属性是在元素的边界处直接断开单词。
Word-wrap如果能够换行就换行处理，没办法时就断开单词。
Text-fill-color:
设置文字的填充颜色
Text-stroke:
设置文字的描边效果
格式：
text-stroke:
颜色粗细
Text-stroke-width:
设置描边的宽度
Text-stroke-color:
设置描边的颜色
边框背景图片
边框背景图片切割及对应视图
Border-image-source设置边框背景图像的资源
格式：
border-image-source:
url（图片地址）
Border-image-width:
设置边框背景图像的宽度
值为长度值
border-image-slice:
设置用于当作背景图的切割点
注意:
改值默认单位为像素，但是不可以添加单位，避免和宽度冲突。
Border-image-repeat:
设置边框背景图片的重复或者覆盖方式
stretch拉伸（默认值）
repeat重复图片
round重复图片，保证图片个数为整数个，会进行适当的缩放
Border-image-outset:
设置边框背景图片的外移值。
值为长度单位
Border-image:
边框背景图片的综合设定属性
格式：
Border-image:
url（图片地址）切割点/宽度重复
边框圆角属性：
Border-radius:
一次性设置四个角的圆角
格式1：
（四角）
Border-radius:
一个值
设定所有角的水平和垂直半径都是当前这个值
格式2：
（对角线）
Border-radius:
值1值2;
设置左上角和右下角的水平和垂直半径为值1
设置右上角和左下角的水平和垂直半径为值2
格式3:
Border-radius:
值1值2值3;
设置左上角的水平和垂直半径为值1.
设置右上角和左下角的水平和垂直半径为值2
设置右下角的水平和垂直半径为值3
格式4;
Border-radius:
值1值2值3值4：
从左上角到左下角顺时针的设定每个角的水平和垂直半径分别为值1值2值3值4.
格式5:
格式5：
（四角）
Border-radius:
值1/值2
设置四个角的每个角的水平半径为值1，垂直半径为值2
备注：
在格式5的基础上值1可以变为1-4个值，值2也可以写成1-4个值分别表示每个角的设定方式。
综合起来border-radius一共20种设定方式
Border-top-left-radius：
设置左上角的圆角
格式：
一个值的设置方式
Border-top-left-radius:
水平和垂直半径值;
两个值的设置方式
Border-top-left-radius:
水平半径值垂直半径值;
Border-top-right-radius设置右上角的圆角
格式：
一个值的设置方式
Border-top-right-radius:
水平和垂直半径值;
两个值的设置方式
Border-top-right-radius:
水平半径值垂直半径值;
Border-bottom-left-radius设置左下角的圆角
格式：
一个值的设置方式
Borde-bottom-left-radius:
水平和垂直半径值;
两个值的设置方式
Border-bottom-left-radius:
水平半径值垂直半径值;
Border-bottom-right-radius:
设置右下角的圆角
格式：
一个值的设置方式
Border-bottom-right-radius:
水平和垂直半径值;
两个值的设置方式
Borde-bottom-right-radius:
水平半径值垂直半径值;
定位属性：
clip定位元素切割属性
auto默认不切割
rect矩形切割
Rect（上,右，下，左）
上值：
从上倒下切多少
下值：
从上到下留多少
左值：
从左到右切多少
右值：
从左到右留多少
注意：
当前属性仅在元素是绝对定位时有效。
尺寸属性：
Width:
设置元素内容的宽度
Height:
设置元素内容的高度
Max-width:
设置元素的最大宽度
Max-height:
设置元素的最大高度
当前元素没有内容时，高度为0，添加内容后，元素会变高，但是一旦达到了最大高度，则不再继续变大，内容会超过元素。
Min-width:
设置元素的最小宽度。
Min-height：
设置元素的最小高度
当元素没有内容或者内容高度没有达到最小高度时，元素默认为最小高度，一旦内容超过元素的最小高度，则会增加元素的高度用来包含内容。
注意:
min和max的宽度设置较少使用。
盒子大小：
Box-sizing:
设置接受宽高的盒子的位置
Content-box:
宽高为盒子的content部分设定（默认）
Border-box:
宽高为盒子的所有部分（border、padding、content）设定，增加边框或者padding都会使得content发生变化
文本修饰：
Text-decoration:
文本修饰属性
Text-decoration-line:
设定文本修饰线的位置
underline下划线overline上划线line-through删除线
text-decoration-color:
设定文本修饰线的颜色
Text-decoration-style:
设定文本修饰线的风格
值和边框的风格一样。
Text-shadow:
设置文字的阴影属性
格式：
text-shadow:
水平偏移垂直偏移模糊程度颜色。
盒子阴影
Box-shadow:
设置元素的阴影
格式：
box-shadow:
水平偏移垂直偏移模糊程度增大尺寸颜色内置阴影.
书写模式：
Writing-mode:
设置文本的书写方向
Lr-tb从左到右，从上到下书写
Tb-rl从上倒下，从右到左书写。
direction：
设置文本流的方向
ltr正常方向，从左到右
rtl从右到左
Unicode-bidi设置文本内容的显示方向
normal正常
Override-bidi:
设置和direction方向一致
用户界面：
Cursor设定鼠标的样式
值：
有很多
pointer小手
none原装箭头
move十字键头
Url（图片地址）xy,pointer
Ime-mode:
设置输入法切换方式
值：
auto任意切换输入法
disabled禁止切换输入法，只能输入英文
Outline轮廓线综合属性
Outline-style:
设置轮廓线的样式
值和边框样式一样。
Outline-width设置轮廓线的宽度
Outline-color设置轮廓线的颜色
Outline-offset设置轮廓线的偏移位置
注意：
默认位置为0，在边框之外，可以设置正数或者负数，向外或者向内移动轮廓线，常用在表单中。
。
Resize:
设置元素的可调整大小属性
none禁止调整大小除了textarea都是默认值
both可以水平和垂直方向调整textarea的默认值
horizontal水平方向可以调整
vertical垂直方向可以调整
text-overflow:
设置文本溢出的处理方式（文本本身）
Clip:
超出文字切割处理
Ellipsis:
超出部分变成...
Zoom:
设置元素的放大或者缩小倍数。
值为整数或者小数，用来表示扩大或者缩小的倍数。
尽量不要使用该属性改变元素大小。
User-select:
设定用户是否可以选中文本内容
none禁止选中所有内容
text仅允许选中文本
element可以选中文本单受范围约束
All:
可以选中所有内容
注意：
ie69-都无法实现该属性，但是可以使用事件解决，onselectstart=”returnfalse”
变换属性
Transform-origin：
设置元素的变换的原点位置
transform：
设置元素的变换属性
none不变换
rotate（）设置元素的旋转角度
格式：
rotate（角度值）
scale（）设置元素的缩放变换
格式：
scale（水平缩放倍数,垂直缩放倍数）
ScaleX（）设置元素水平方向的缩放变换
格式：
scaleX（倍数）
ScaleY（）设置元素的垂直方向缩放变换
格式：
scaleY（倍数）
Translate（）设置元素的平移变化
格式：
translate（水平位移,垂直位移）
TranslateX（）设置元素水平方向的平移变化
格式：
translateX（长度）
TranslateY（）设置元素垂直方向的平移变化
格式：
translateY（长度）
Skew（）设置元素在x轴和y轴的扭曲方式
格式：
skew（x轴角度,y轴角度）
SkewX（）设置元素在x轴的扭曲方式
格式：
skewX（角度）
SkewY（）设置元素在y轴的扭曲方式
格式：
skewY（角度）
matrix（）矩阵变换
格式：
matrix（水平伸缩比例,纵向扭曲,横向扭曲,垂直伸缩比例,水平偏移量,垂直偏移量）
matrix的默认值为matrix（1,0,0,1,0,0）
过度属性：
transition设置元素的过度属性
格式：
Transition:
变换的属性变换的时间变换的方法延迟开始时间
格式：
Transition:
变换的属性变换的时间变换的方法延迟开始时间,
变换的属性变换的时间变换的方法延迟开始时间,
变换的属性变换的时间变换的方法延迟开始时间,
...
Transition-delay:
设置变换开始之前的等待时间（延迟）
Transition-duration:
变换的过度时间
Transition-property:
设置变换的css属性
none无属性参与过度
all制定所有css属性
某个属性
transition-timing-function:
设置变换的函数（方法）
linear线性过度
ease平滑过度
Ease-in由慢到快
Ease-out由快到慢
ease-in-out先慢在快再慢
动画属性：
Animation:
动画的综合属性设定
Animation-name:
设定动画的名称
注意，要和@keyframe语法一起使用
animation-duration:
设置动画的播放时间
值为时间，单位一般用秒
animation-timing-function:
设置动画的过度方式
linear线性过度
ease平滑过度
ease-in由慢到快
Ease-out由快到慢
ease-in-out由慢到快再到慢
cubic-bezier（）:
自定义贝塞尔曲线
animation-delay:
设置动画开始的延迟时间
值的开始播放动画之前的延迟事件
animation-iteration-count:
设定动画播放的次数
可以写整数次，也可以也infinite（无限次）
animation-direction:
动画播放的方式是否允许反向
normal正常，不反向
alternate可以反向播放
多列布局：
column-count:
设置列的数量
设置列数，宽度自动调整
column-width:
设置列的宽度
设置宽度，列数自动调整
column-gap:
设置列与列之间的间隙
值为长度单位
column-rule:
设置列与列之间的分割线的样式宽度和颜色
column-rule-style设置列与列之间的分割线的样式
solid实线
dashed虚线
double双线
和border的取值基本一致
column-rule-width设置列与列之间的分割线的宽度
column-rule-color设置列与列之间的分割线的颜色
column-fill：
设置每列的高度是否一致
Auto:
自动设置
Balance:
统一每列的高度
注意：
基本没浏览器支持.,
column-span:
设置元素的跨列属性
none不横跨所有列
all横跨所有列，一般用于标题设置
column-break-after:
在制定元素的列尾部设置是否断行
auto：
默认值，自动设定如果有空间就跟随
Always:
强制断行，不允许其他元素在该元素后跟随
column-break-before:
设置元素的头部是否断行
auto：
默认值，自动设定如果有空间就跟随
Always:
强制断行，不允许其他元素在该元素前跟随
column-break-inside:
暂不支持
Columns:
用于设置列的宽度或者列的数量属性
注意：
同时只能设置一个属性数量或者宽度，同时设置无效。
伸缩盒子模型
Flex-grow:
设置盒子的扩展比率
值是数字
每个元素的扩展空间=总剩余空间/（子元素比例和）*当前元素的比例；
Flex-shrink:
设置盒子的收缩比例
每个元素的收缩空间=总超出空间/（子元素的比例和）*当前元素的比例
Flex-direction:
设置子元素的排列方式
row横向排列
Row-reverse横向倒序排列
column纵向排列
Column-reverse纵向倒序排列
Flex-wrap:
设置超出的元素的换行方式
Nowrap:
不换航处理，伸缩子元素
Wrap:
超出的子元素换行
Wrap-reverse超出子元素反向换行（原行和超出行交换位置）
Flex-flow:
设置元素的换行及超出处理方式
格式：
flex-flow:
方向换行处理方式
Order:
设置子元素在伸缩盒子内的排列顺序
值为数字，可以正数可以负数，数值越大越靠后。
Align-items:
设置子元素的在纵轴方向的对齐方式
stretch拉伸子元素占满位置（默认）
Flex-start伸缩盒子的开始位置（注意方向）
Flex-end伸缩盒子的结束位置（注意方向）
center伸缩盒子的中间位置（注意方向）
baseline效果和flex-start基本一致
注意：
要设置在伸缩盒子的外层盒子上而非子元素上
Align-slef:
设置当前元素在伸缩盒子内的纵轴的对方i方式
auto默认值
stretch拉伸子元素占满位置
Flex-start伸缩盒子的开始位置（注意方向）
Flex-end伸缩盒子的结束位置（注意方向）
center伸缩盒子的中间位置（注意方向）
baseline效果和flex-start基本一致
注意：
要设置在伸缩盒子的子元素上而非外层盒子
Justify-content:
设置伸缩盒子的子元素的水平对齐方式
Flex-start伸缩盒子的开始位置
Flex-end伸缩盒子的结束位置
center伸缩盒子的中间位置
Space-between伸缩盒子的两端对齐位置
Space-around每个子元素平均分布在盒子中
Flex-basis设置元素的伸缩基准值
值为长度
如果元素的所有基准值超过总盒子的长度，所有子元素会按照基准值的比例伸缩子元素。
升级会员 