【CSS.2】

qq_52772066

已于 2022-07-31 16:34:57 修改

阅读量180

点赞数

文章标签： css css3 html

于 2022-07-31 16:29:43 首次发布

本文链接：https://blog.csdn.net/qq_52772066/article/details/126084088

版权

本文详细讲解了CSS position属性的用法，包括static、relative、absolute、fixed和sticky定位，还介绍了下拉菜单实现、省略号添加、CSS精灵、圆角设计、vw/vh单位及font-size/em的使用。此外，涵盖了HTML常见标签如link、meta和文本标签的实例。

摘要由CSDN通过智能技术生成

文章目录

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 文本标签

:表示一个段落
：表示斜体文本
：用于定义单独样式（使用css定义）
：表示文本粗体

<!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>