文章目录
二、常用CSS属性
2.16 transform
transform 是 css3 的属性，该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
用法：
transform: none|transform-functions;
常用的值有：
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| translate(x,y) | 定义 2D 转换。移动 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| 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.17 transition
transition 属性设置元素当过渡效果，四个简写属性为：
- transition-property 指定CSS属性的name，transition效果
- transition-duration transition效果需要指定多少秒或毫秒才能完成
- transition-timing-function 指定transition效果的转速曲线
- transition-delay 定义transition效果开始的时候
语法:
transition: property duration timing-function delay;
transition-timing-function 常用的值有：
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
2.18 动画
动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。
定义语法：
@keyframes animationName{
from {}
to {}
}
使用：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。infinite 无限次 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
2.19 其他属性
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：不透明/
2.19.3 光标
cursor: pointer; 手型
cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子
- repeat 水平和垂直方向都重复
- default 默认光标
- help 指示可用的帮助（通常是一个问号或一个气球）
- wait 指程序正忙（通常是一个表或沙漏）
2.19.4 设置多余文本省略
- white-space:nowrap; //空白文本处理，nowrap不换行
- text-overflow:ellipsis; //超出文本显示为省略号
- overflow: hidden; //超出部分隐藏
三、布局（排版）
如何把你的内容放在与你想要的正确位置上。
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节：
- 正常布局流
- display 属性
- 弹性盒子
- 网格
- 浮动
- 定位
- CSS 表格布局
- 多列布局
每种技术都有它们的用途，各有优缺点，相互辅助。
3.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>
默认情况下，浏览器的显示如下:
HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。
当你使用css创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要，因为你可以按照默认的方式来搭建页面，而不是自己发明轮子。
3.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 {
float: left;
margin-right: 30px;
}
我们来看看 float 是如何工作的，浮动元素 (这个例子中的 <img> 元素)会脱离正常的文档布局流，并吸附到其父容器的左边 (这个例子中的 <body> 元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。
注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右侧的文字紧贴着图片。
3.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后，它将保持在这个宽度，并在视口中居中。
默认情况下，子元素(这个 <h1> 和两个 <div> )将跨越整个body宽度的100%。如果我们希望将两个<div> 放在一起，那么我们需要将它们的宽度(父元素的宽度的100%)设置为更小，这样它们就可以彼此匹配。
div:nth-of-type(1) {
width: 48%;
float: left;
}
div:nth-of-type(2) {
width: 48%;
float: right;
}
/*
nth-of-type(n) 选择器匹配同类型中的第n个同级兄弟元素
*/
我们所有列使用宽度百分比——这是一个很好的策略，因为它创建一个流式布局（liquid layout），一种调整为不同的屏幕尺寸，并在较小的屏幕尺寸下保持相同的列宽度比例。
3.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 可以取三个值：
left：停止任何活动的左浮动right：停止任何活动的右浮动both：停止任何活动的左右浮动
3.2.3 总结
- 脱离文档流，不占原来的文档流位置
- 浮动元素在父元素中所占的面积的有效高度为0
- 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间
注意：如果有浮动，一定要定义一个父容器，而且一定要定义父容器宽和高。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
