该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式
vertical-align 样式演示
|
|
无名喵站
|
在2D平面产生近大远小视觉立体，但是只是效果二维的
透视我们也称为视距，视距就是人的研究到屏幕的距离。越近物体越大；越远物体越小
perspective 可设置透视 （译为视距）
// 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
// 注意：perspective 属性只影响 3D 转换元素；单位为 px ，越小表示视距位置越近
perspective 的该CSS属性需附加给父级(单位为px)，以便子元素3D转换时呈现透视效果(转换时远近效果)。
因此：要想呈现较好的3D效果，首先父级得拥有透视 perspective 属性，
另：若需要子元素拥有3维立体空间。需要给父级 添加 transform-style:preserve-3d
步骤1 @keyframes 定义动画样式 和 名称
// 顺序可用from {} to {} 或 百分比 0%{} 100%{}
@keyframes move {
/* 初始位置 */
0% {
transform: translateX(0px);
}
/* 基于初始位置向右移动500px */
100% {
transform: translateX(500px);
}
}
步骤2 animation-name 引入动画样式
/* 引入该动画:动画名称 */ animation-name: move;
步骤3 animation-duration 设置动画播放时间
/* 持续时间 5s */ animation-duration: 5s;继续阅读
定义2D转换中的移动，沿着 X 和 Y 轴移动元素；transform 的位移不会影响其他元素的位置
// transform 中的 translate 百分比单位长宽 是对于自身元素单位长宽；
// transform 对行内标签没有效果
该CSS样式常搭配 :hover 与 transition 一起使用
transform: none|transform-functions; //不进行转换 或 设置转换的方式函数
继续阅读可以采用 溢出隐藏 + 文字溢出隐藏 方式实现
/* (属性是用来设置如何处理元素中的 空白 (en-US)。)让文本一行显示 */ white-space: nowrap; /* 溢出内容隐藏 */ overflow: hidden; /* 溢出文字用省略号替代 */ text-overflow: ellipsis;继续阅读
| 值 | 属性 | 描述 |
|---|---|---|
| transition-property | all,height,width… | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 0s+ (单位s) | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | linear,ease,ease-in,ease-out,ease-in-out | 规定速度效果的速度曲线。 |
| transition-delay | 0s+ (单位s) | 定义过渡效果何时开始。 |
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
民间说法：flex 就是一种布局方式，类似于 block，inline-block等
可以说包括我在内的大部分人，都是在被flex垂直水平居中方式所惊艳后才对其有所了解，以至于在日常开发中对于flex的使用，也确实更偏向于元素对齐方式的使用。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条
设置 overflow 达到溢出隐藏效果后，也会影响子项定位的效果，当子项定位在盒子外部，将也会随之隐藏
<style>
.box{
height: 60px;
width: 100px;
background: #ccc;
font-size: 30px;
}
</style>
<body>
<div class="box">
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
</div>
</body>
<style>
.box{
height: 60px;
width: 100px;
background: #ccc;
font-size: 30px;
overflow:hidden;
}
</style>
<body>
<div class="box">
全名制作人大家好，我是练习时常两年半的个人练习生屎猫猫,喜欢唱跳rap，篮球
</div>
</body>
//Chrome浏览器支持 清除滚动条
.demo::-webkit-scrollbar {
display: none;
}
//firefox加IE 10+支持 保证内容是可滚动的
.demo {
scrollbar-width: none;
/* firefox */
-ms-overflow-style: none;
/* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
opalcity翻译起来就是不透明度。顾名思义；它是调整元素的透明度的一个参数。
opacity属性指定了一个元素后面的背景的被覆盖程度。
当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
使用opacity属性，当属性值不为1时，会把元素放置在一个新的层叠上下文中。
<html>
<head>
<style>
.img_opalcity{
opacity: 1;//完全不透明
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html><html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//设置透明度50%
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html><html>
<head>
<style>
.img_opalcity{
opacity: 0.5;//半透明
filter: blur(2px);//模糊度
width: 300px;
}
</style>
</head>
<body>
<div style="padding:5px;">
<img src="http://www.dmoe.cc/random.php" class="img_opalcity">
</div>
</body>
</html>| 值 | 描述 | CSS |
|---|---|---|
| background-color | 规定要使用的背景颜色。 | 1 |
| background-position | 规定背景图像的位置。 | 1 |
| background-size | 规定背景图片的尺寸。 | 3 |
| background-repeat | 规定如何重复背景图像。 | 1 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-image | 规定要使用的背景图像。 | 1 |
| inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
<style>
.div_color {
height: 300px;
width: 300px;
background: cornflowerblue; //设置背景 浅蓝色
}
</style>
<div class="div_color"></div>
<style>
.div_color2 {
height: 300px;
width: 300px;
background: url(http://www.dmoe.cc/random.php); //插入图片地址
background-size: cover; //图片显示方式 自适应
}
</style>
<div class="div_color2"></div>
background:背景颜色 url(背景图片地址) 背景平铺 背景图像滚动 背景图片位置 background:black url(images/smm.jpg) no-repeat fixed center top;