B站老陈打码视频以及相关知识参考博文进行的知识汇总
CSS中定位
1、static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明
2、absolute(绝对定位)
absolute定位的元素脱离了文本流,在正常流中的位置不再存在。相对于 static 定位以外的第一个父元素进行定位或参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位。
如果设定TRBL,并且父级设定position属性,则以父级的左上角为原点进行定位,位置由 TRBL决定。即使父级有Padding属性,对其也不起作用
因此把一个定位属性为absolute的元素定位于其父级元素内,只有满足两个条件:
第一:设定TRBL
第二:父级设定Position属性
在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位
3、relative(相对定位)
定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。
他是默认参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的Padding属性会对其影响。
总结:
relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式
对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层;如果其父层中都未定义absolute或relative,则其将相对body进行定位
摘抄自下面博文:https://www.cnblogs.com/theWayToAce/p/5264436.html
文字阴影
文字阴影的顺序:水平偏移距离,垂直偏移距离,模糊度,阴影的颜色
发光效果:可进行多个阴影的叠加,例如:text-shadow:0px 0px 10px yellow,0px 0px 5px orange
3D效果:通过层次感营造出3D立体效果
闪亮的效果:使用动画animation和keyframes 名称{from … to… }
过渡动画
transition属性:要过渡的属性 过渡时间
transition-property:width,background;
transition-duration:2s,10s;
transition-timing-function:ease;
/*ease:默认先慢后快再变慢*/
/*linear:线性速度*/
/*还可以通过浏览器获取贝塞尔曲线值*/
transition-delay:3s;
2D移动与旋转
transform:translate(x,y);
/*X代表水平移动,y代表垂直移动的距离。*/
等同于transform:translateX() translateY()
transform:rotate();
3D旋转
旋转X轴:transform:rotateX();此时看到只是3D旋转之后的二维投影平面。
3D效果呈现:
perspective:距离值;/设置透视点/
margin:0 auto居中
margin:0 auto居中生效的情况:
**块级元素:**给定要居中的块级元素的宽度。
**行内元素:**①设置display:block;②给定要居中的行内元素的宽度。(行内元素设置成块级元素后可以对其宽高进行设置)
**行内块元素:**设置display:block。
margin:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定。这些值中,只有width和margin-left,margin-right可以设为auto。
1、auto 可解释为:弥补其它部分与所要求总合之间的差别;
2、如果两个边界都被设为 auto ,则被设为相等的值。
3、如果两个边界之一和width设为auto ,则被设置为auto的边界值为0
4、三个都被设为auto ,则2个边界的值都为0,width的值为最大可能值
background-image属性
1、在使用该属性的时候,需要给容器添加height和width,不然无法显示。因为背景图片不会撑开容器,只有容器的内容(content+padding)才能撑开容器。
background-size:100%100%; 按容器比例撑满,图片变形;
background-size:cover;把背景图片放大到适合元素容器的尺寸,图片比例不变
2、该属性的路径(url)问题
图片路径可以是绝对路径、根相对路径、文档相对路径
绝对路径是包括服务器协议的完全路径
根相对路径(也称相对跟目录)的路径以“/”开头,路径是从当前站点的根目录开始计算。
文档相对路径就是指包含当前文档的文件夹,也就是以当前网页所在文件夹为基础开始计算路径
当使用相对地址时,相对地址和css是内联还是外联是有关系的:在css中当使用内联css时,相对地址为图像相对于htm文件的地址;当使用外联css时,相对地址应为图像相对于css文件的地址!
关于background-image的路径问题参考自下面博文:https://www.cnblogs.com/kelly2017/p/7091829.html
关于斜杠和反斜杠:
web应用最新使用在Unix系统上面,所以目前所有的网络地址都采用 斜杆/ 作为分隔符。
windows系统上的文件浏览器都是用 反斜杠\ 作为路径分隔符(由于使用 斜杆/ 作为DOS命令提示符的参数标志)
在该属性的url中,需要使用/或者//。
参考博文:https://blog.csdn.net/yfgcq/article/details/7062550
https://www.cnblogs.com/theWayToAce/p/5264436.html