文章目录
1.position定位
-
position特性
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值
- static (默认)
- relative
- absolute
- fixedsticky
- relative:
如果没有定位偏移量,对元素本身没有任何影响不使元素脱离文档流
不影响其他元素布局
left、top、right、 bottom是相对于当前元素自身进行偏移的
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1{ width: 100px; height: 10opx; background : red;}
#box2{ width:100px; height:100px; background:口blue; position: relative; left:100px; top:108px;}#box3{ width: 10epx; height : 10opx; background : yellow; }
</style>
</head>
<body>
<div id="box1"></div><div id="box2"></div><div id="box3">g/div</ body>
</html>
- absolute:
使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{width:400px; height:400px; border:1px red solid;}
#box2{width:100px; height:100px; background:red; position:absolute; right:0; bottom:0;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
/*<style>
#box1{width:400px; height:400px; border:1px red solid; position:absolute;}
#box2{width:100px; height:100px; background:red; position:absolute; right:0; bottom:0;}
祖先有定位这样设置
</style>
*/
- fixed:
使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{height:2000px;}
#box1{width:400px; height:400px; border:1px red solid; position:relative;}
#box2{width:100px; height:100px; background:red; position:fixed; right:0; bottom:0;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
- sticky黏性定位
在指定的位置,进行黏性操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{height:2000px;}
div{background:red; position:sticky; top:20px;}
</style>
</head>
<body>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<div>这是一个块</div>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
</body>
</html>
- z-index定位层级
默认层级为0
嵌套时候的层级问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent{width:100px; height:100px; border:1px black solid; position:absolute; z-index:1;}
#box1{width:100px; height:100px; background:red; position:absolute; z-index:0;}
#box2{width:100px; height:100px; background:blue; position:absolute; left:50px; top:50px; z-index:2;}
</style>
</head>
<body>
<div id="parent">
<div id="box1"></div>
</div>
<div id="box2"></div>
</body>
</html>
1.1定位实现下拉菜单
< ! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{ margin:o; padding:o;}ul{ list-style: none;}
#menu{ width:100px; height: 30px; margin:28px auto; border:1px Oblack solid; position: relative;}
Fmenu ul[{ width:10epx; border:1px Oblack solid; position: absolute;left:-1px;top:30px; background: white;display: none;
}
#menu : hover ul{ display : block;}
#menu ul li: hover{ background:gray;Dp{ text-align: center;}
</style>
</head>
<body>
<div id="menu">
卖家中心<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li><li>列表项4</li></ul>
</div>
<p>测试段落测试段落测试段落测试段落</p>
</body>
</html>
2.CSS添加省略号
- width
必须有一个固定的宽 - white-space : nowrap
不让内容折行 - overflow : hidden
隐藏溢出的内容 - text-overflow : ellipsis
添加省略号
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.o"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#content( width:208px; border:1px Oblack solid; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
国
</style>
</head>
<body>
<div id="content">测试文字测试文字测试文字测试文字测试文字测试文字</div></body>
</html>
3.CSS精灵
CSS Sprite
- 特性
CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。它允许你将一个页
面涉及到的所有零星图片都包含到张大图中去加载。
- 好处
可以减少图片的质量,网页的图片加载速度快减少图片的请求的次数,加快网页的打开
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1{ width:20px; height:21px; background:url(./sprite_icon.png) no-repeat left -596px;}
#box2{ width: 30opx; height :50px; border:1px Oblack solid; line-height: 50px; padding-left: 30px;background:url(./sprite_icon.png)no-repeat right -516px;}
</ style>
</head>
<body>
<div id="box1"></div>
<div id="box2">产品中心</div></body>
</html>
4.CSS圆角
- border-radius
给标签添加圆角。
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*#box( width:200px; height: 200px; background: red; border-radius: 100px;}*/
/#box( width:30opx, height :300px; background: red; border-radius: 50%;}*//nbox( width:30px; height:30opx; background: red; border-radius: 10px 20px; ) */
/nboxf wittianpxe, height:30Ppx, background: red; border-radius: 10px 20px 30px 40px;}*//*#tbox{ width: 30opx; height : 3eopx; background: red; border-radius: 20px / 40px; )“/
#box{ width:300px; height:150px; background: red; border-radius: 150px 150px 0 0; }</style>
/head
<body>
<div id="box"></div></body>
</html>
5.CSS拓展
5.1 vw、vh
根据屏幕百分比来计算显示使用的像素值,100vw表示占屏幕宽度100%,主要用于移动端开发,适配不同大小的屏幕
5.2 font-size、em
font-size:用于定义字体单位长度的像素值
em:1em等于1个font-size的的长度
好处:统一了长度的大小,可以只改变font-size,就改变了所有的元素大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*每行显示五个文字*/
#div1{font-size:16px; width:5em; height:100px; background:red; }
</style>
</head>
<body>
<div id="div1">这是一个块这是一个块这是一个块这是一个块这是一个块这是一个块</div>
</body>
</html>
6.html常用标签
6.1、link标签
- 作用:引用外部资源
- 属性: rel、href
- 主要功能:引入CSS、网页图标等
<!--引入外部css
stylesheet定义引入的格式为样式表
href属性表示引入的链接(地址)
-->
<link rel="stylesheet" href="css/index.css" />
<!--引入外部css
icon定义引入的格式为网页的图标
href属性表示引入的链接(地址)
-->
<link rel="icon" href="./img/tb.png" />
6.2 2、meta标签
功能:定义页面的文本编码类型、定义窗口大小对应的显示模式
<!--定义编码类型为UTF-8-->
<meta charset="UTF-8" />
<!--
name="viewport"表示的是定义窗口视图的情况
content="width=device-width, initial-scale=1.0"
width=device-width:表示根据设备的视图宽度调整网页宽度
initial-scale=1.0:表示设置浏览器首次加载到页面时的初始缩放级别。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6.3 文本标签
<p></p>
:表示一个段落
<i></i>
:表示斜体文本
<span></span>
:用于定义单独样式(使用css定义)
<strong></strong>
:表示文本粗体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{background:red;}
</style>
</head>
<body>
<p>这是一个段落</p>
<i>斜体的文本</i><br>
<strong>粗体的文本</strong><br>
<span>这是span的内容</span>
</body>
</html>
6.4 4、其余标签
video:标签定义视频,比如电影片段或其他视频流
audio:标签定义声音,比如音乐或其他音频流
canvas:用来处理图片、绘制图像等功能,是使用JavaScript操作图像的技术,HTML5中的新标签
echarts库:用来制作图表的技术。