1.伪元素:
:hover,鼠标悬浮
:link
:active
:visited


2.对齐:
水平居中:text-align:left,center,right
垂直居中:line-height,height值相同。
行内元素:vertical-align:middle,top,bottom


3.盒子模型:
A:边缘线:
border:线粗 线样式 颜色;
1px
线样式:solide:实线,double:双实线,dashed:虚线,dotted:点状线


外边距:margin
元素和元素之间的距离,或者元素和父容器之间的距离
margin-top,margin-right,margin-bottom,margin-left


内边距:padding
从容器的角度,描述内容物距离边框的距离。
padding-top,padding-right,padding-bottom,padding-left


10px:上下左右
10px 20px:上下10,左右20
10px 20px 30px:上10,左右20,下30
10px 20px 30px 40px:






元素的宽度:
元素本身的宽度+margin-left+padding-left+border-left+margin-right+padding-right+border-right


元素的高度:


外边距的合并:
上:margin-bottom
下:margin-top




容器里,内容物
容器:margin-top,如果没有内容,也没有边框
内容物:margin-top






4.浮动:float:left,right
让元素脱离当前的文档流,在页面上不占位置。


清除浮动:clear:left,right,both


5.溢出:overflow
容器里内容物较多
overflow:hidden,多余的不显示,相当于隐藏
overflow:auto,自动添加滚动条。


6.定位:position
设置元素的位置。定位到哪里
static:默认的属性值。块级,垂直排列,行内,水平排列。
relative:相对定位。元素偏移某些距离。保存原来的位置。相对于自己的原始位置。
left:在原来的基础上,向右侧偏移一定的距离。
负数
top:在原来的基础上,向下偏移一定的距离。
负数
bottom,right


absolute:绝对定位。对于父容器(position-->body)。脱离文档流。在页面上不占空间。
left,top,bottom,right


fixed:固定位置。用法同Absolute,相对于浏览器。

本堂课内容:
html+CSS
JavaScript:
Java:
标识符,运算符,分支,循环。。
数组,日期,字符串。。。






背景图片:
background-image:url(图片路径)
background-repeat:no-repeat,repeatX,repeatY
background-position:center,top,bottom,left,right
background-size:背景图片大小
阴影效果:
box-shadow:[inset] x-offset y-offset blur-radius spread-radius color;
x-offset:正数:右侧,负数:左侧
y-offset:正数:下边,负数:上边
blur-radius:模糊的半径,数值越大,边缘越模糊
spread-radius:扩展半径
color:模糊的颜色


左,右,上,下


转换效果:
transform
3D:
perspective 规定 3D 元素的透视效果 。


rotate:旋转,角度degree
translate:平移
x:正数右移,负数左移
y:正数下移,负数上移


scale:缩放
1代表原始大小。小于1就是缩小,大于1就是放大


skew:倾斜,扭曲
角度
过度效果:
transition
关注元素属性:旧的值-->新的值
transition-propertiy:left,background-color;
transition-delay:延迟时间,默认0
transition-duration:持续时间,
transition-timing-function:时间曲线
ease:开始和结束慢,中间快
linear:匀速运动
ease-in:开始慢
ease-out:结束慢
ease-in-out:开始和结束慢
动画:
animation
animation-name:动画名称
animation-duration:动画持续时间
animation-timing-function:
animation-iteration-count:播放次数:1次,无限次infinite

@keyframes 动画名称{
from{}--->to{}
}


或者按照百分比:0%,20%,40%,60%,80%,100%