一点笔记[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





最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,768评论 0 8
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,357评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,833评论 0 2
  • 渔翁_阅读 307评论 0 1