CSS进阶及html补充

最新推荐文章于 2024-09-30 08:51:48 发布

大润发第一渔夫

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量95

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_69401634/article/details/126059429

版权

文章目录

一.position定位
二.添加省略号
三.CSS精灵(又叫雪碧图)
四.圆角设置
五.vh和vw
六.HTML补充

一.position定位

用于指定一个元素在文档中的定位方式.top,right,left,bottom,z-index属性决定最终位置

top,right,left,bottom属性表示与定位点的某方向的距离.如定位点为整个文档左上角,则top:100px表示距离文档顶部100px

z-index属性表示层级,层级高的在上方,嵌套时,以外层层级为准

position取值: static(默认),relative(相对定位),absolute(绝对定位),fixed(固定定位),sticky(粘性定位)

relative:

如果没有定义偏移量(top,right,left,bottom),则对元素无影响
不使元素脱离文档流
不影响其他元素
偏移量是相对于当前元素本身进行偏移

现有如下页面:

<style>
    #div1{width: 100px;height: 100px;background:red;}
    #div2{width: 100px;height: 100px;background:blue;}
    #div3{width: 100px;height: 100px;background:yellow;}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

效果:
在这里插入图片描述

使用relative偏移后:

<style>
    #div1{width: 100px;height: 100px;background:red;}
    #div2{width: 100px;height: 100px;background:blue;position: relative;left: 100px;top: 		100px;}
    #div3{width: 100px;height: 100px;background:yellow;}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

效果: 在这里插入图片描述

absolute:

使元素完全脱离文档流
使内联元素支持宽高
使块元素默认宽根据内容决定
有定位祖先元素(具有position属性的元素)则相对祖先进行偏移,没有则相对整个文档进行偏移

现有如下页面:

<style>
    #div1{background:red;}
    #span1{width: 100px;height: 100px;background:blue;}
 </style>
<div id="div1">这是一个块</div>
<span id="span1">这是一个内联</span>

效果:
在这里插入图片描述

使用absolute偏移后:

<style>
    #div1{background:red;position: absolute;}
    #span1{width: 100px;height: 100px;background:blue;position: absolute;top: 100px;left: 		100px;}
 </style>
<div id="div1">这是一个块</div>
<span id="span1">这是一个内联</span>

效果:
在这里插入图片描述

fixed:

使元素完全脱离文档流
使内联元素支持宽高
使块元素默认宽根据内容决定
相对于整个浏览器进行偏移,不受滚动条影响

现有如下页面:

    <style>
        body{width: 500px;height: 500px;}
        #div1{background:red;position: fixed;}
     </style>
    <div id="div1">这是一个块</div>

滚动滚动条前: 在这里插入图片描述

滚动滚动条后:

在这里插入图片描述

sticky:

如果没有定义偏移量(top,right,left,bottom),则对元素无影响
当目标元素偏移到设置偏移量处时,会被粘在那

现有如下页面:

    <style>
        body {
            height: 3000px;
        }

        #div1 {
            background: red;
            position: sticky;
            top: 100px;
        }
    </style>
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    <p>aaaaaaaa</p>
    <div id="div1">这是一个块</div>
    <p>bbbbbbbb</p>
    <p>bbbbbbbb</p>
    <p>bbbbbbbb</p>
    <p>bbbbbbbb</p>
    <p>bbbbbbbb</p>
    <p>bbbbbbbb</p>

正常情况: 在这里插入图片描述

目标元素到达设置偏移量处时:

在这里插入图片描述

小练习:下拉菜单:

代码:

<style>
    /* 消除默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
  
    /* 设置菜单外框 */
    #menu {
        width: 100px;
        height: 30px;
        margin: 30px auto;
        border: 1px black solid;
        position: relative;/* 添加相对定位,使其下拉菜单方便定位 */
    }
    #menu ul{
        width: 100px;
        border: 1px black solid;
        position: absolute;/* 添加绝对定位,相对其父容器定位 */
        left: -1px;/* 边框占了1px,所以偏移-1px */
        top: 30px;
        background: white;
        display: none;/* 隐藏菜单 */
    }
    #menu:hover ul{display: block;}/* #menu:hover>>鼠标移入时触发后方样式 */
    #menu ul li:hover {background: rgb(69, 68, 68);}
  
    p{text-align: center;}/* 段落居中 */

</style>

<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
            <li>列表项5</li>
            <li>列表项6</li>
        </ul>
    </div>
    <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
</body>

效果:
在这里插入图片描述

二.添加省略号

代码实现:

    <style>
        #box {
            width: 500px;/* 必须有个固定宽 */
            border: 1px black solid;
            white-space: nowrap;/* 设置不折行 */
            overflow: hidden;/* 隐藏溢出内容 */
            text-overflow: ellipsis;/* 添加省略号 */
        }
    </style>
    <div id="box">
        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
    </div>

效果:
在这里插入图片描述

三.CSS精灵(又叫雪碧图)

CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

好处:

可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

雪碧图实例:

在这里插入图片描述

使用方法:

    <style>
        /* 需先测量所需图标在雪碧图中的大小和位置 */
        #box{width:20px;height:21px; background:url(雪碧图路径) no-repeat left -596px}
    </style>
    <div id="box"></div>

四.圆角设置

使用border-radius: 属性设置圆角,其参数为圆角弧度(即切角所用圆的半径),多参数时为顺时针方向各角的值|使用/隔开两个值则为椭圆型圆角

圆角:

    <style>
        #div1{background: red;width: 200px;height: 200px;border-radius: 50px;}
    </style>
    <div id="div1"></div>

效果:
在这里插入图片描述

半径为块大小一半时:

    <style>
        #div1{background: red;width: 200px;height: 200px;border-radius: 100px;}
    </style>
    <div id="div1"></div>

效果:
在这里插入图片描述

椭圆:

    <style>
        #div1{background: red;width: 200px;height: 200px;border-radius: 50px/100px;}
    </style>
    <div id="div1"></div>

效果:
在这里插入图片描述

五.vh和vw

根据屏幕百分比来计算显示使用的像素值，100vw表示占屏幕宽度100%，主要用于移动端开发，适配不
同大小的屏幕

<style>
    body{margin: 0;}
    #div1{background: red;width: 100%;height: 100px;}
    #div2{background: blue;width: 100vw;height: 100px;}
</style>
<body>
    <div id="div1"></div>
    <div id="div2"></div>

上方div1和div2都可以实现自适应屏幕.

区别:100vw为所占屏幕比;100%为所占父容器的百分比,父容器为整个页面时,100%和100vw是一样的

六.HTML补充

1.link标签

作用：引用外部资源
属性：rel、href
主要功能：引入css、网页图标等

    <link rel="stylesheet" href="此处填写css文件路径"><!-- stylesheet表示引入css文件 -->
    <link rel="icon" href="此处填写图标路径"><!-- icon表示引入网页图标文件 -->

2.meta标签

功能：定义页面的文本编码类型、定义窗口大小对应的显示模式

<!--定义编码类型为utf-8 国际编码,一般都是使用该编码-->
<meta charset="utf-8" />

<!--
name="viewport"表示的是定义窗口视图情况
content="width=device-width, initial-scale=1.0"
width=device-widthL:表示根据设备的视图宽度调整网页宽度
initial-scale=1.0：设置浏览器首次加载页面时的初始缩放级别
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />