一点笔记[CSS]

样式

<style>

注释

/**/

选择所有元素

*

外边距/内边距

margin/padding（-top/right/left）

通过外边距居中，左右距根据网页自动调整

margin:  0 auto 0 auto（上右下左）

行高

line-height——使行高等于样式高实现垂直方向的居中

水平居中

text-align: center

文字粗细

font-weight: bold（加粗）

内容靠左浮动

float：left

去除无序列表各元素前缀点

list-style-type: none

去除超链接下默认下划线

text-decoration: none

已浏览超链接

visited

超链接

link

边框圆角（5像素）

border-radius: 5px

背景颜色

background-color

选取标签

.

旋转（角度）

transform: rotate(n deg)

鼠标移入效果

.hover

动画时长

transition: 1s

动画延迟

ease-out 0.3s

高度（height/width/top/bottom均可以百分比表示，百分比为相对父元素）

height： 100%       表该数值为父元素数值的100%；width同理，但body集宽度默认即为浏览器的100%。

相对位置

position: relative

绝对位置

position: absolute

实线/虚线

solid/dashed

把边框和内边距放入框中

box-sizing=“border-box”

超出部分不显示

overflow:hidden

将盒子背景换为图片

background-image: url("图名")

设置背景占盒子面积比(水平比/垂直比)

background-size: 100% 100%

景深

perspective:

设置3D属性，实现真实的3D效果

transform-style:preserve-3d;

绕Y轴旋转角度，向Z轴移动

transform:rotateY(40deg) translateZ(450px)

定制动画 form初始状态 to结束状态

@keyframes a{

                            form{transform:rotateY(0deg);}              to {transform:rotateY(-360deg);}

调用定制动画，时长40秒，匀速运动，无限

animation:a 40s linear infinite

选择器，空格表后代元素

.toubu  .nav  img