码迷,mamicode.com
首页 > Web开发 > 详细

CSS常用知识点

时间:2020-05-09 18:40:18      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:fixed   family   css常用   定位   style   san   rom   column   tran   

一、浮动框可以向左或向右移动,直到外边缘碰到包含框或另一个浮动框边框为止。

  常用浮动:float:left(向左); float:right(向右);

加上浮动之后 还要清除浮动:

.cl::after{
    content: "";
    display: block;
    clear: both;
}
二、

2.1、定位(难点

position: static; (没有定位)  fixed(绝对定位,相对浏览器始终显示 相对于广告); relative(相对定位,相对正常位置);   absolute;

relative、absolute配合使用(父子类使用);

以导航条为例:使用 fixed绝对定位 怎么滚动导航条都变化

技术图片

 

 

 

三、css3关键字

1、边框:

border-radius:圆角 5px 或20%;100%的话是圆;

box-shadow(10px 10px 10px 解释:先水平 在垂直 在投影高度):

2、背景:

background-size:背景图片的尺寸

background-origin(规定图片位置):content-box()、padding-box 或 border-box(边框显示) 区域;

3.宽高包含区域:

 Box-sizing:content-box(默认),border-box;(红色为重点)

 Border-box 设置后width、height 包含

4、文本效果:

text-shadow:文本阴影;(解释:先水平 在垂直 距离)

word-wrap:(break-word)自动换行;

5、字体引入:

@font-facel{font-family:

Src:url(‘sanation light.ttf’).url(‘sanation light.eot’)

}

6、2D转换/3D转换:

transform:

translate(top,left):从其当前位置移动多少;

rotate(30deg):顺时针旋转给定的角度;

scale(1.1):元素尺寸增加或减少的倍数; 0.几就是缩小;

技术图片

scale(0.9)倍如下;

 技术图片

 

 

skew(30deg,20deg):翻转给定的角度;根据x轴y轴

3D:

rotateX():围绕X轴旋转;

rotateY():围绕Y轴旋转;

7、过渡:

transition:width 2s;(tranfrom过程 2s)

变化如下:

 

技术图片

技术图片

8、动画:先创建动画行为,再从css中进行定义

animation:myfirst{2s infinite循环}动画名 2s;

@keyframes myfirst创建动画;

animation.css网页中写好了好多动画效果

9、多列:

column-count:规定元素应该被分隔的列数;

column-gap 属性规定列之间的间隔;

 

CSS常用知识点

标签:fixed   family   css常用   定位   style   san   rom   column   tran   

原文地址:https://www.cnblogs.com/lxc127136/p/12859007.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!