CSS属性即值

最新推荐文章于 2024-07-10 10:14:49 发布

weixin_44606322

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量107

点赞数

分类专栏： css 网页基础文章标签： css 属性即值 css动画

本文链接：https://blog.csdn.net/weixin_44606322/article/details/89278763

版权

网页基础同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

display属性

标签的两种常见’display’属性
CSS使用display设置的标签的显示方式
none 隐藏
block "块"元素
inline "行内"元素
inline-block 行内块元素

float

会用float将脱离文档流并且向左或向右移动，直到浮动到边缘
clear会清除浮动，另起一行。可以取值：left，right，both
经常见到clear：both就是将新的浮动在原来浮动之后另起一行

文档流定位

position的值

static，默认值，即使用基于"文档流"的定位
relative,相对定位，即在"文档流"的基础上，结合left和top属性，相对定位
absolute，绝对定位，即脱离"文档流"，并基于它的"包含框"，使用left和top属性来定位
fixed，固定定位，即特殊的绝对定位，即它的"包含框"为浏览器
sticky，粘性定位

position:relative;相对定位

相对与原来的位置，使用left，right进行偏移
原来的位置对于后继元素的定位（float）依然有效
对于使用float的元素，realative也同样起作用

position：absolute；绝对定位

绝对定位脱离了"文档流"
使用绝对定位时，注意找准"包含框"，即包含该标签，并且距它最近的，position不等于static的标签
如果没有，那么将以浏览器左上角为准来定位
特别只定义position：absolute；没有设置left和top，标签位置仍按"文档流"定位，但已经"脱离文档流"

position:fixed;相对于窗口的定位

表现为滚动条滚动式，元素位置不变

position:sticky;粘性定位

当没有滚动到特殊位置时，跟随滚动条滚动，到达特定位置时位置不再发生变化

OverFlow

visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

CSS动画

我们可以使用CSS创建动画，它可以取代许多网页动画图像，Flash动画，和javaScripts

表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

	谷歌	IE	火狐	Safari	欧朋
@keyframes	43.0 4.0 -webkit	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o
animation	43.0 4.0 -webkit	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o

@keyframes创建动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}

将动画绑定到一个选择器

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

也可以使用百分比

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

常用属性

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count

CSS过渡

指定要添加效果的CSS属性
指定效果的持续时间

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

CSS效果

div:hover
{
width:300px;
}

CSS变换

转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
可以使用 2D 或 3D 转换来转换您的元素
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

导航条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
ul li{
list-style: none;
width: 100px;
background-color: gray;
float: left;
}
a{
display: block;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">API</a></li>
<li><a href="#">DownLoad</a></li>
<li><a href="#">AboutUS</a></li>
</ul>
</body>
</html>

图片库

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div.img{
float: left;
margin: 3px;
border: 1px solid gray;
}
div.img img{
width: 150px;
height: 150px;
margin: 1px;
opacity: 0.5;
}
div.img img:hover {
border: 1px solid red;
opacity: 1;
}
div.img div{
text-align: center;
border-top: 1px solid red;
}
</style>
</head>
<body>
<div class="img">
<a href="#"><img src="day01/img/1F.jpg" alt=""></a>
<div>图片1</div>
</div>
<div class="img">
<a href="#"><img src="day01/img/1F.jpg" alt=""></a>
<div>图片1</div>
</div>
<div class="img">
<a href="#"><img src="day01/img/1F.jpg" alt=""></a>
<div>图片1</div>
</div>
<div class="img">
<a href="#"><img src="day01/img/1F.jpg" alt=""></a>
<div>图片1</div>
</div>
<div class="img">
<a href="#"><img src="day01/img/1F.jpg" alt=""></a>
<div>图片1</div>
</div>
</body>
</html>

weixin_44606322

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS属性即值

display属性标签的两种常见’display’属性CSS使用display设置的标签的显示方式none 隐藏block "块"元素inline "行内"元素inline-block 行内块元素float会用float将脱离文档流并且向左或向右移动，直到浮动到边缘clear会清除浮动，另起一行。可以取值：left，right，both经常见到clear：both就是将新的浮动...
复制链接

扫一扫