css 基础知识 (待完善...)
CSS
1.position 属性
对元素进行定位.
absolute
相对于 非static类型的position 的 第一个(临近的) 父元素 进行定位.
relative
相对于 正常文档流的位置进行定位. 可以简单理解为 相对于自己本身 进行偏移量定位.
例如,"position:relative;left:20;" 会让该元素在left位置增加20px.
fixed
也是生成绝对定位元素.与absolute不同的是,它是相对于浏览器窗口 进行定位.
todo : 所谓浏览器窗口 到底指代的 html标签 还是 body标签 ? 或者就是字面的'浏览器窗口'?
static
默认值.表示元素会出现在正常的文档流中的位置.
该类型定位会让元素 忽略掉 top , left , right , bottom 以及 z-index 属性.
inherit
从 直接父级 继承position属性的值.
补充:
position的默认属性是static.不可继承的.
css2开始支持position.
当是absolute/fixed时,无论什么元素都会变成块级的.
IE8及以下版本 均不支持 inherit值 .(todo , IE9 及以上 支持不?)
JS语法: object.style.position = '';
2.display 属性
规定了元素 应该生成的 框的类型.
none
此元素不会被显示.
block
元素显示为 块级元素. 元素的前后 都会带有换行符.
inline
默认值.元素显示为 内联元素. 元素前后 没有换行符.
inline-block
元素显示为 行内块元素.
list-item
元素会作为 列表 显示.
run-in
根据上下文 来决定 元素是以 块级/内联 方式显示.
table
元素显示为 块级表格(类似于<table>). 元素前后带有换行符.
inline-table
元素显示为 内联表格(类似于<table>). 元素前后 没有换行符.
table-row-group
元素显示为 一个/多个 行的分组(类似于<tbody>).
table-header-group
元素显示为 一个/多个 行的分组(类似于<thead>).
table-footer-group
元素显示为 一个/多个 行的分组(类似于<tfoot>).
table-row
元素显示为 一个 表格行(类似于<tr>).
table-column-group
元素显示为 一个/多个 列的分组(类似于<colgroup>).
table-column
元素显示为 一个 单元格列(类似于<col>).
table-cell
元素显示为 一个 表格单元格(类似于<td>或<th>).
table-caption
元素显示为 一个 表格标题(类似于<caption>).
inherit
规定从父级元素 继承 display属性.
补充:
IE7及以下 不支持 inline-table, inherit, run-in, 以及所有 table-* 属性.
从css1开始支持display属性.
display属性的默认值是inline.不可继承的.
JS语法 : object.style.display = ''
3.background 属性
设置元素的 背景属性.
background-color
规定要使用的背景色.
该颜色为纯色,会覆盖 元素的内容,内边距,边框(直到边框的边界为止,即不包括外边距,但是包括边框本身的区域).
因此,如果边框有部分是透明的(比如虚线边框),那么透明的地方会显示背景颜色.
color_name
代指颜色名称,如 'red'
hex_number
代指 十六进制的 颜色值, 如 '#ff0000'
rgn_number
代指 rgb类型的 颜色值, 如 'rgb(0,255,255)'
transparent
默认值.表示元素的背景色为透明的.
inherit
规定从父级继承的 background-color 属性的值.
JS语法 : object.style.backgroundColor = 'rgb(0,255,255)';
background-position
规定背景图像的位置.
该值有三种设置方式:(其中方式二 和方式三 可以混合使用)
方式一 (如果只指定了一个 那么第二个值默认为center)
top left 或 top center 或 top right
center left 或 center center 或 center right
bottom left 或 bottom center 或 bottom right
方式二 (如果仅指定了一个值 , 那么第二个值默认为 50%)
x% y% 如: 0% 0%
方式三 (如果仅指定了一个值 , 那么第二个值默认为 50%)
xpos ypos 如: 0 0 , 单位可以是任何css单位 px em rem等
JS语法 : object.style.backgroundPosition = '0% 10%';
background-repeat
规定 是否/如何 重复背景图像.(其实就是 设置哪种 平铺模式).
repeat
默认值. 图像在 水平以及垂直方向上重复.
repeat-x
图像在 水平方向上重复.
repeat-y
图像在 垂直方向上重复.
no-repeat
背景图像仅显示一次.
inherit
从父级元素上继承background-repeat 属性的值.
JS语法 : object.style.backgroundRepeat = 'repeat-x'
background-attachment
规定背景图像是 固定的/随着页面其余部分滚动 .
scroll
默认值. 背景图像随着页面其余部分滚动.
fixed
背景图像是固定的,不会随着页面其余部分滚动.
inherit
从父级元素上继承background-attachment属性的值
JS语法 : object.style.backgroundAttachment = 'fixed'
background-image
规定要使用的背景图像.
url('URL')
指向背景图片的路径.
none
默认值.不显示背景图像.
inherit
从父级元素上继承background-image属性的值.
JS语法 : object.style.backgroundImage = 'url("../xxx/xx.jpg")'
inherit
从父级元素上继承background属性的值.
background-size
规定背景图像的尺寸.
length
设置背景图像的宽高.如果只设置一个值,则第二个值默认为'auto'.
percentage
百分比形式设置宽高.如果只设置一个值,则第二个值默认为'auto'.
cover
把背景图片扩展至足够大,使背景图像覆盖背景区域.
背景图像的某些部分有可能无法显示在指定的背景定位区域内(说白了,就是背景图像可能只能局部显示,多余的部分已经超出背景区域的管辖了).
contain
把图像扩展至最大尺寸,以使得宽高完全适应内容区域.(智能填充有木有!)
JS语法 : object.style.backgroundSize = '10px auto'
background-origin
规定背景图像的定位区域(即设置以盒模型的哪个部位来定位).
padding-box
默认值.以内边距来定位背景图片
border-box
以边框来定位背景图片.
content-box
以内容框来定位背景图片.
JS语法 : object.style.backgroundOrigin = 'content-box'
background-clip
规定背景的绘制区域.(todo 看效果,网页提供的用例 没有明显效果)
padding-box
背景被裁剪到内边距框.
border-box
默认值.背景被裁剪到边框盒.
content-box
背景被裁剪到内容框.
JS语法 : object.style.backgroundClip = 'padding-box'
JS语法 : object.style.background = 'orange url("../xxx.jpg") repeat-y'
补充:
后三个属性是css3新出的.前者是css1的.
IE8及以下版本均不支持一个元素多个背景图片.
IE7及以下版本不支持inherit.IE8需要声明 !DOCTYPE .
对于background属性本身,可以不指定某个/某几个值(即只设定部分值).
推荐使用background属性 , 而不是以值 作为属性 分别设置:
不但可以减少文字的键入 , 还可以保证老版本的浏览器 能有更好的兼容性.
4.@keyframes 规则 及 animation属性 (-webkit , -moz ,-o 前缀对 它们都适用)
@keyframes 规定动画规则.
语法:
@keyframes animation_name {
keyframes_selector_1 {
css_styles ;
}
keyframes_selector_2 {
css_styles ;
}
}
其中,
animation_name : 自定义的动画名称
keyframes_selector_* : 动画时长百分比(0-100%).
css_styles : 一个/多个 合法的css样式.
样例:
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
补充:
和@keyframes用法一样,兼容不同浏览器的规则如下:
@-moz-keyframes mymove /* Firefox */
@-webkit-keyframes mymove /* Safari 和 Chrome */
@-o-keyframes mymove /* Opera */
animation
动画属性的一个统称.它有六个更细颗粒的动画属性.
animation-name
绑定到@keyframes规则 上的动画名称.
none
默认值.无动画效果.
keyframes_name
需要绑定到选择器上的keyframes名称.
JS语法 : object.style.animationName = 'mymove'
animation-duration
动画的周期(即耗时).单位为 秒/毫秒. 只的是单次的耗时,和animation-count属性无关.
time
动画时长.
JS语法 : object.style.animationDuration = '5s'
animation-timing-function
规定动画的速度曲线.
ease
默认值. 低速 -> 变快 -> 变慢
linear
匀速.
ease-in
低速开始.
ease-out
低速结束.
ease-in-out
低速开始和结束.
cubic-bezier(n,n,n,n)
设置速率曲线. n 是0~1之间的值.
JS语法 : object.style.animationTimingFunction = 'linear'
animation-delay
动画开始前的延迟时间.
time
延迟时间.默认为0.
JS语法 : object.style.animationDelay = '2s'
animation-iteration-count
动画的播放次数.
n
播放次数.
infinite
无限循环.
JS语法 : object.style.animationIterationCount = 18 ;
animation-direction
是否轮流反向播放动画.
normal
默认值. 正常顺序播放.
alternate
反向播放动画.
JS语法 : object.style.animationDirection = 'alternate'
JS语法 : object.style.animation = 'mymove 5s infinite'
补充:
Internet Explorer 9 以及更早的版本不支持 animation 属性。
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
animation-duration属性 一定要设定，否则时长为 0，就不会播放动画了
5.transition 属性
元素过渡属性的统称.分为四个细颗粒度的过渡属性.
transition-property
过渡效果的css名称.(当指定的css属性的值改变了,过渡效果开始启动)
none
没有属性会获得过渡效果.
all
默认值.所有属性获得过渡效果.
property
定义 应用过渡效果的css属性名称列表. 列表以逗号","作为分隔符.
JS语法 : object.style.transitionProperty = 'width,height';
transition-duration
完成过渡效果需要花费的时间.
time
默认值为0,意味着不会发生过渡效果.单位可以是秒或者毫秒.
JS语法 : object.style.transitionDuration = '10s';
transition-timing-function
该函数定义了 过渡效果的 速度曲线.
(具体值的意义 参考 animation-timing-function)
linear , ease (默认值), ease-in , ease-out , ease-in-out , cubic-bezier(n,n,n,n)
JS语法 : object.style.transitionTimingFunction = 'ease'
transition-delay
过渡效果 开始前的 延迟时间.单位为秒或毫秒.
time
延迟时间,默认为0s.
JS语法 : object.style.transitionDelay = '3000 ms'
补充:
transition-duration属性 一定要设置,否则过渡时长为0,不会有过渡效果.
过渡效果一般发生在 鼠标指针浮动到元素身上时候发生.
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
6.transform 属性
元素 在 2d/3d层面 的转换. 其中x,y,z皆为数值.
none
默认值. 不进行转换.
matrix(n,n,n,n,n,n)
2d转换. 使用六个值的矩阵. (md..矩阵咋算 ..)
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
3d转换. 使用十六个值的 4*4矩阵.
translate(x,y)
2d转换.
translate3d(x,y,z)
3d转换.
translateX(x)
x轴上的转换.
translateY(y)
y轴上的转换.
translateZ(z)
3d转换.z轴上的转换
scale(x,y)
2d缩放转换.
scale3d(x,y,z)
3d缩放转换.
scaleX(x)
x轴上的缩放转换.
scaleY(y)
y轴上的缩放转换.
scaleZ(z)
z轴上的3d缩放转换.
rotate(angle)
2d旋转. angle为旋转角度.
rotate3d(x,y,z,angle)
3d旋转.
rotateX(x)
绕x轴进行3d转换.
rotateY(y)
绕y轴进行3d转换.
rotateZ(z)
绕z轴进行3d转换.
skew(x_angle,y_angle)
x轴以及y轴进行倾斜转换.
skewX(x)
x轴进行倾斜转换.
skewY(y)
y轴进行倾斜转换.
perspective(n)
为3d转换元素定义透视视图(todo 什么鬼?没试出来..)
JS语法 : object.style.transform="rotate(7deg)"
补充:
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
7.伪类
其实,它是css选择器的一部分.抽离出来记录下.
:before
在该元素前面插入内容
:after
在该元素后面插入内容
:link
选择所有未被访问过的链接
:visited
选择所有已被访问过的链接
:active
选择活动链接/元素
:hover
鼠标悬停状态的元素
:focus
选择 获得了焦点的元素
:first-letter
选择该元素的首个字母.
:first-line
选择该元素的第一行
:first-child
选择 所有符合 属于父元素的第一个该类型的子元素
:lang(language)
选择 带有指定字符开头的lang属性值 的每个元素
:first-of-type
选择 所有符合 属于父元素的 第一个 该类型的子元素
:last-of-type
选择 所有符合 属于父元素的 最后一个 该类型的子元素
:only-of-type
选择 所有符合 '属于父元素的该类型 有且仅有一个该类型子元素' 的该类型元素.
:only-child
选择 所有符合 '属于父元素的 有且仅有 一个子元素' 的 该类型元素.
:nth-child(n)
选择 所有符合 属于父元素的 第n个 该类型的子元素
:nth-last-child(n)
选择 所有符合 属于父元素的 倒数第n个 该类型的子元素
:nth-of-type(n)
选择 所有符合 属于父元素的 第n个 该类型的子元素
:nth-last-of-type(n)
选择 所有符合 属于父元素的 倒数第n个 该类型的子元素
:last-child
选择 所有符合 属于父元素的 最后一个 该类型的子元素
:root
选择文档的根元素. (那么对于html来讲,应该就是html了)
:empty
选取所有 不含子元素的 元素
:target
选取当前活动的元素. 实际上 和 active 是不同的.(todo 查下不同点)
(测试 能感受到 :
target 针对的是 目标活动元素
--该目标元素处于活动的原因可能是其他元素影响的,
比如实现锚点定位 后 活动的不是锚点本身,而是 锚点所指向的目标元素 ,
active针对的是 该元素本身是否活动)
:enabled
选取每个 处于启用状态的该元素
:disabled
选取所有 处于禁用状态的该元素
:checked
匹配所有 处于勾选状态的该元素
:not(selector)
匹配所有 除了指定类型元素 的元素
::selection
选择被用户选取的元素部分
8.content 属性 (todo css文档和html文档中 该属性的值不一样 mmp ...)
配合 :before 或 :after 使用. 来插入生成内容.
string
文本内容
url
资源存储位置,文本内容就是该资源.
attr(X)
该元素 某个指定属性的值 作为伪类元素所修饰的元素的插入内容.
open-quote
双引号 中 前面(即第一个)引号
close-quote
双引号 中 后面(即第二个)引号
no-open-quote (不知道是什么鬼)
no-close-quote (不知道是什么鬼)
counter(..args)
counter-increment
counter-reset
JS语法 : object.style.content = 'url(deep.wave)'
9.定位属性
10.文本属性
color
文本颜色
direction
文本书写方向
letter-spacing
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
white-space
word-spacing
text-justify
text-outline
text-overflow
text-wrap
word-break
word-wrap
unicode-bidi
11. 字体
.清除浮动
.垂直居中
.css单位
css单位有两种 : 尺寸单位 和 颜色单位.
尺寸单位:
px
一个像素点的大小.
em
(todo .. 重点补充)
%
百分比
以及 in,cm,mm,ex,pc,pt .
颜色单位:
rgb(x,x,x)
rgb值.
rgb(x%,x%,x%)
rgb百分比值.
#rrggbb
十六进制 值.
实际上 还有很多比如
rgba , 相比rgb增加了一个透明度选项.rgba(r,g,b,alpha)
hsl(色调,饱和度,亮度), hsla(色调,饱和度,亮度,透明度). 其中色调0~360,饱和度和亮度为百分比,透明度为0~1.
.flex -- 手机
.calc , vh
