李天龙_20210113李天龙
一、知识点总结
1.transform
transform 是 css3 的属性，该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，
移动，倾斜等。
用法：
transform: none|transform-functions;
常用的值有：
2.transition
transition 属性设置元素当过渡效果，四个简写属性为：
1.transition-property 指定CSS属性的name，transition效果
2.transition-duration transition效果需要指定多少秒或毫秒才能完成
3.transition-timing-function 指定transition效果的转速曲线
4.transition-delay 定义transition效果开始的时候
transition: property duration timing-function delay；
transition-timing-function 常用的值有：
3.动画
动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色
定义语法：
@keyframes animationName{
from {}
to {}
}
使用：
animation: name duration timing-function delay iteration-count direction
fill-mode play-state;
4 . 其它属性
2.19.1 列表属性
List-style：
list-style:none; 没有点的呈现
list-style: disc; 呈现圆点
list-style: circle; 空心圆
list-style: square;正方块
2.19.2 透明度
opacity: 0.8; /属性值 [0-1] 0：完全透明 1：不透明/
4.3 光标
cursor: pointer; 手型
cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子
4.4 设置多余文本省略
white-space:nowrap; //空白文本处理，nowrap不换行
text-overflow:ellipsis; //超出文本显示为省略号
overflow: hidden; //超出部分隐藏
5.布局（排版）
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者
主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节：
1.正常布局流
2.display 属性
3.弹性盒子
4.网格
5.浮动
6.定位
7.CSS 表格布局
8.多列布局
9.每种技术都有它们的用途，各有优缺点，相互辅助
5.1. 正常布局流(Normal flow)
正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
<body>
<p>I love my cat.</p>
<ul>
<li>Buy cat food</li>
<li>Exercise</li>
<li>Cheer up friend</li>
</ul>
<p>The end!</p>
</body>
默认情况下，浏览器的显示如下:
当你使用css创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完
全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要，因为你可以按照默认的方式
来搭建页面，而不是自己发明轮子。
5.2浮动
float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用
工具之一。
我们先从一个非常简单的例子开始，包括在图像周围浮动一个文本块。
<h1>Simple float example</h1>
<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg"
alt="A pretty butterfly with red, white, and brown coloring, sitting on a
large leaf">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam
lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris
ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus
viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</p>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 2;
word-spacing: 0.1rem;
}
我们来看看 float 是如何工作的，浮动元素 (这个例子中的 ![img]() 元素)会脱离正常的文档布局流，并吸
附到其父容器的左边 (这个例子中的 元素)。在正常布局中位于该浮动元素之下的内容，此时会
围绕着浮动元素，填满其右侧的空间。
5.2.1 多列浮动
<h1>2 column layout example</h1>
<div>
<h2>First column</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue
ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id
ornare felis, eget fermentum sapien.</p>
</div>
<div>
<h2>Second column</h2>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam
lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris
ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus
viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.</p>
</div>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
在宽度达到900px之前，整个视图的宽度将达到90%，在超过900px后，它将保持在这个宽度，并在视 口中居中。
div:nth-of-type(1) {
width: 48%;
float: left;
}
div:nth-of-type(2) {
width: 48%;
float: right;
}
/*
nth-of-type(n) 选择器匹配同类型中的第n个同级兄弟元素
*/
5.2.2 清除浮动
我们很快就会碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果
没有处理这些元素，就会变得很糟糕。
我们在上例中第二个 div 元素下面添加如下代码：
<footer>
<p>©2020 your imagination. This isn't really copyright, this is a
mockery of the very concept. Use as you wish.</p>
</footer>
你会看到页脚在最长的列旁边环绕着，这看起来很糟糕——我们希望页脚保持在底部，在所有的列下
面。有一种简单的方法可以解决这个问题—— clear 属性。
clear 属性，当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后
面的元素将不浮动，除非将一个新的 float 声明应用到此后的另一个元素。
footer {
clear: both;
}
clear 可以取三个值：
1.left ：停止任何活动的左浮动
2.right ：停止任何活动的右浮动
3.both ：停止任何活动的左右浮动
5.2.3 总结
脱离文档流，不占原来的文档流位置
浮动元素在父元素中所占的面积的有效高度为0
非浮动元素的外边距不能用于它们和浮动元素之间来创建空间
二、心得体会
在今天的学习中遇到了一些问题，在练习动画的过程中没有那么轻松，虽然最后经过认真思索解决了问题，但是发现自己不能熟练的运用，这还需要自己课后多加练习，这样才能更好的记住所学的知识，更加熟练的去运用。
?
评论