DESKTOP-5IV8P69_20210524-王宁

一、日志

1、知识总结

transform(动态效果)

(1)常用的值:

none 定义不进行转换。
translate(x,y) 定义 2D 转换。移动
translate3d(x,y,z) 定义 3D 转换。父元素 transform-style: preserve-3d;
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义转换,只是用 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

(2)设置元素当过渡效果:

transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

布局

 正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。

浮动 (float)

多列浮动

清除浮动(clear)

clear 可以取三个值:
left :停止任何活动的左浮动
right :停止任何活动的右浮动
both :停止任何活动的左右浮动

定位(position)

(1)静态定位 ( staitc ):静态( staitc )定位是每个元素获取的默认值。

(2)相对定位 : 给元素加上 position:relative; 并不会改变元素的位置,需要使用 top , bottom , left 和
right 属性。

(3)绝对定位: position:absolute; 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。

(4)固定定位: fixed 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

优先级

  内联样式>内部样式>外部样式>浏览器默认样式

(3)浮动

float 属性最初只用于在成块的文本内浮动图像,但是现在它已成为在网页上创建多列布局的最常用
工具之一。

body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 2;
word-spacing: 0.1rem;
}

清除浮动:clear 属性,当你把这个应用到一个元素上时,它主要意味着"此处停止浮动"——这个元素和源码中
后面的元素将不浮动,除非将一个新的 float 声明应用到此后的另一个元素。

footer {
clear: both;
}

(4)定位

静态定位:如果所有的父元素都没有显式地定义 position 属性,那么所有的父元素默认情况下 position 属性
都是 static 。

相对定位:给元素加上 position:relative; 并不会改变元素的位置,需要使用 top , bottom , left 和
right 属性。

绝对定位:position:absolute; 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。绝对定
位的元素不再存在于正常文档布局流中。

固定定位:fixed 固定定位,这与绝对定位的工作方式完全相同,只有一个主要区别:绝对定位固定元素是相对
于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

二、心得体会

23号,结束了关于css的学习,总体内容多,之前学的有的忘记了,下来自己会加强练习。

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1