css常用属性

css字体属性

css字体属性	描述
color	字体颜色
font-family:宋体 ;	字体样式
font-size: 20px;	字体大小
font-style	正常 ( normal ) 斜体 ( italic )
font-weigh	数字 400 等价于 normal，而 700 等价于 bold。
line-height	字体行高

相对长度单位	说明
px	像素单位 以像素点个数为基础 最常用的单位
em	相对于当前对象内文本的字体尺寸
%	单位：换算 -> 已父容器的大小进行换算的

css文本属性

css文本属性	描述
text-decoration：文本装饰	下划线 : underline 删除线 :line-through 上划线 : overline添加任何装饰 : none
text-indent: 100px;	文本缩进
letter-spacing	字之间的间距
word-spacing	词之间的间距 ( 针对英文段落的 )

属性	描述	属性值
direction	设置文本方向。	ltr(左->右) ，rtl(右->左
letter-spacing	设置字符间距	px
text-align	对齐元素中的文本	left（左对齐）、center（居中）、right（右对齐）、justify (两端对齐)
text-transform	控制元素中的字母	capitalize 每个单词首字母大写，uppercase 全部大写，lowercase 全部小写
vertical-align	设置元素的垂直对齐	baseline 基线 默认，middle 中线，super 文本上标，sub 文本下标，top 顶端对齐最高元素顶端，text-top 元素顶端与父元素字体顶端，bottom 底端与最低元素底端，text-bottom 底端与父元素字体底端。
white-space	设置元素中空白的处理方式(主要控制换行)	normal 默认 忽略空白，pre 保留空白，nowrap 文本不换行，pre-wrap 保留空白 正常换行，pre-line 合并空白 保留换行符。
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	left right justify center
text-overflow	规定当文本溢出包含元素时发生的事情。	clip 剪裁，ellipsis 省略号
text-shadow	向文本添加阴影。text-shadow: h-shadow v-shadowblur color;	h-shadow 水平偏移，v-shadow 垂直偏移，blur 阴影模糊值，color 颜色。
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	normal 单词内不换行，break-word 单词内可换行

visibility

控制一个元素是否可见
visibility: visible(默认) | hidden
设置为 hidden 时 元素不可见但是保留渲染位置 只是视觉上的看不见

注意: display:none; 实现的效果是 元素不进行渲染 在页面上不存在 与 visibility有本质区别

使用display：
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
4、visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
5、opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

内容溢出时处理 overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS 背景(background)

属性	描述	属性值
background-color	背景颜色	关键词；rgb；十六进制
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat-x ,repeat-y,repeat ( x , y 都进行平铺，默认值 ),no-repeat 都不平铺
background-position	背景位置	x y : number(px、%) \ 单词， x : left、center、right， y : top、center、bottom
background-attachment	背景图随滚动条移动的方式	scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 ) fixed ( 背景位置是按照浏览器进行偏移的 )
background-size	背景尺寸	px；percentage；cover:覆盖；contain:包含
background-origin	背景图定位区域	padding-box; content-box; border-box;
background-clip	背景颜色绘制区域	border-box(默认值);padding-box;content-box;

盒子边框（border）

语法	描述
border : border-width border-style border-color	边框宽度 边框样式 边框颜色
border-style	none无（默认）、solid实线、dashed虚线、dotted点线、double双实线

border-shadow 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x偏移量 y偏移量 模糊半径 扩展半径 阴影颜色 阴影模式(内/外)
box-shadow: 10px 10px 20px 25px #ccc inset;

text-shadow文字阴影

text-shadow: h-shadow v-shadow blur color;
text-shadow: x轴偏移量 y轴偏移量 模糊值 阴影颜色;

h-shadow 必需，水平阴影的位置，允许负值；
v-shadow 必需，垂直阴影的位置，允许负值；
blur 可选，模糊距离；
color 可选，阴影的颜色；
.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}

溢出的文字隐藏

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

white-space:自动换行

值	描述
normal	默认。空白会被浏览器忽略。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

text-overflow 文字溢出显示省略标记（…）

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…）
注意一定要首先强制一行内显示，再次和overflow属性 搭配使用

多行文本超出隐藏

width: 200px;/*设置宽度*/
display: -webkit-box; /* -webkit-inline-box; 行内元素*/
-webkit-box-orient: vertical; /*设置子元素的排列方式,垂直排列 */
-webkit-line-clamp: 3; /* 控制在第几行的结尾进行显示 ...*/
overflow: hidden; /*高度 宽度必须规定好 不然...之后一行 也会展示出来*/

opacity 透明

opacity 属性设置元素的不透明级别(0-1)。 opacity: value|inherit;
value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit 应该从父元素继承 opacity 属性的值。
使用:
将内容（及所有后代）、背景一起透明，自身透明，子元素也透明

transition 过渡

1、transition-proterty
css样式：参与过渡的css属性名称|all表示所有属性
2、transition-duration
动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms
3、transition-timing-function

• 速度类型
  1.linear 相同的速度从开始到结束，也就是匀速
  2.ease 默认值 慢速度开始–速度变快–慢速度结束
  3.ease-in 慢速度开始的过渡效果，也就是以低速度开始
  4.ease-out 慢速度结束的过渡效果，也就是以低速结束
  5.ease-in-out 以慢速度开始和结束的过渡效果

4、transition-delay
延迟时间：默认0s,单位s|ms

注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果

CSS3 transform 2D变幻

注意 transform无法作用于 行内元素
容许元素在2D平面上进行变幻 包括 平移(translate) 旋转(rotate) 缩放(scale) 倾斜(skew)
语法

transform: translate(20px,30px) rotate(30deg) scale(3,4) skew(20deg,30deg); 
transform-origin: x-axis y-axis z-axis;

• translate 平移
  translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

   transform: translate(50px,100px);

• rotate 旋转
  rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

   transform: rotate(30deg);

• scale 缩放
  scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

	transform: scale(2,3);

• skew 倾斜
  包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

	transform: skew(30deg,20deg);

CSS 线性渐变

线性渐变（向下/向上/向左/向右/对角线）

• 向上（to top）
• 向下（to bottom）
• 向右（to right）
• 向左（to left）
• 使用角度
  0deg 相当于 to top
  90deg 相当于 to right

background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
background: linear-gradient(to right, tomato, green, yellow);

• 重复线性渐变

background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
background: repeating-linear-gradient(180deg, red 0%, red 10%, yellow 10%,yellow 20%);

css径向渐变

backgrond: radial-gradient(渐变形状, 颜色1 范围1, 颜色2 范围2, ...);
渐变形状：椭圆（ellipse,默认值）、圆形（circle）
 
重复径向渐变
backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);

圆心位置
语法：background:radial-gradient(形状 at 水平位置 垂直位置,颜色1，颜色2)
如果只给一个值，另一个值（y垂直方向）默认center
取值：

• px（表示距左上角的0，0的坐标位置）
• 关键字可以是以下词的组合
  • left center right
  • top center bottom
• 百分比

可编辑 contentEditable属性

contentEditable 属性指定元素内容是否可编辑。

style标签页可以放在body中，并且也可以添加contentEditable属性，这就造成我们可以实时编辑样式表

<!DOCTYPE html>
<html>
    <body>
        <style style="display: block;" contentEditable>
            body { color: blue;}
        </style>
    </body>
</html>

文本模糊 禁止选中文本

color: transparent;
text-shadow: #111 0 0 15px;
font-size: 30px;
/*禁止选中文本*/
user-select: none;

内嵌框架；内联框架（了解）

可以将另一个网页通过iframe 框架引入到当前页面

<iframe src="" frameborder="0" width="200" height="200"></iframe>

可以防止拖出图片影子的属性

 /* 防止拖出土图片的影子 */
  pointer-events: none;