web前端从入门到放弃

VIP文章 apple_73086122

于 2022-11-18 18:25:36 发布

阅读量144

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/apple_73086122/article/details/127870790

版权

1.css定位？

position取值：
static（默认值）
relative
absolute
fixed
sticky

relative特性：
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相当于当前元素自身进行偏移的
absolute绝对定位：
使元素完全脱离文档流
是内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让会具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏（绝对、相对、固定）
fixed固定定位：
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让会具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位：
在指定的位置，进行黏性操作

z-index定位层级：
默认层级为0
嵌套时候的层级问题
定位实现元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
     width: 300px;height: 300px;border: 1px black solid;position: relative;}
        #box2{
     width: 100px;height: 100px;background: red;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

实现定位元素居中

2.css添加省略号

width
必须有一个固定的宽
white-space：nowrap
不让内容折行
overflow：hidden
隐藏溢出的内容
text-overflow：ellipsis
添加省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{
     width: 100px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    </style>
</head>
<body>
    <div id="content">aaaaaaaaaaaaaaaaaaa</div>
</body>
</html>

3.css sprite

特性： CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图去加载。
好处：可以减少图片的质量。网页的图片加载速度快，减少图片的请求的次数，加快网页的打开。

4.css圆角

border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
     width: 100px;height:200px;background:red; border-radius: 50px;}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

5.pc端的布局？

通栏、版心
通栏：自适应浏览器宽度
版心：固定一个宽度，并且让容器居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{
     position: relative;