HTML+CSS自用知识点（第四周）

Whnist

已于 2022-11-18 18:11:28 修改

阅读量571

点赞数

文章标签： css html 前端 css3

于 2022-11-18 17:53:09 首次发布

本文链接：https://blog.csdn.net/Meg_Fu/article/details/127888793

版权

HTML+CSS自用知识点

拨云见日篇（续）

拨云见日篇（续）

三十五、CSS定位

1、relative的相对定位

1.position

position特性
css position属性用于指定一个元素在文档中的定位方式。top、right.bottom、left 属性则决定了该元素的最终位置。

position取值
static（默认)
relative
absolute
fixed
sticky

2.relative

如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、 top、 right、 bottom是相对于当前元素自身进行偏移的

    <style>
    #box1{ width: 100px;height: 100px;background: red ;}
    #box2{ width: 100px;height: 100px;background: blue ; position: relative;left: 100px;top: 100px;}
    #box3{ width: 100px;height: 100px;background: yellow ;}
    </style>
</head>
<body>
   <div id="box1" ></div>
   <div id="box2" ></div>
   <div id="box3" ></div>
</body>
</html>

在这里插入图片描述

2、absolute绝对定位

1.使元素完全脱离文档流

#box1{ width: 100px;height: 100px;background: red ;position: absolute;}
#box2{ width: 200px;height: 200px;background: blue ; }

在这里插入图片描述

2.使内联元素支持宽高(让内联具备块特性）
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档（可视部分）发生偏移（绝对、相对、固定)

3、fixed固定定位

1.使元素完全脱离文档流
2.使内联元素支持宽高(让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响

4、sticky黏性定位

1.在指定的位置，进行黏性操作。

div{ background: red;position: sticky;top: 0px; }

（当红色块随滚动条上移时，到距离（top）0px时，会固定在当前可视页面不动，而其他元素会随着滚动而动。）

3、z -index定位层级

1.默认层级为0
2.嵌套时候的层级问题

4、下拉菜单制作

<!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>
    *{ margin: 0;padding: 0;}
    ul{ list-style: none; }
    #menu{ width: 100px;height: 30px; margin: 20px auto; border:1px black solid; position: relative; }
    #menu ul{ width: 100px; border: 1px black solid; position: absolute;left:-1px ;top:30px; background: white;
        display: none; }
    #menu:hover ul{ display: bolck; }
    menu ul li:hover{ background: gray; }
    p{ 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>

5、定位实现居中和装饰

    <style>
    #box1{width: 100px; 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>

三十六、CSS添加省略号

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

三十七、CSS Sprite

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

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

三十八、CSS圆角设置

border-radius: 10px(左) 20px(右);
(四个同理)
border-radius: 10px/20px;
(椭圆）

半圆：四个值后两个设为0，高度改小。

三十九、PC端企业类型整页制作（博文尚美首页）

PC端的布局
通栏:自适应浏览器的宽度。
版心:固定一个宽度,并且让容器居中。
（HTML部分）

<!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; }
    #banner .banner_list{ width: 100%; height: 469px;position: relative; }
    #banner .banner_list li{ width: 100%; height: 100%; background:center 0 no-repeat ; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1;}
    #banner .banner_list a{ display: block; width: 100%; height: 100%; }
    #banner .banner_list li.active{ opacity: 1; z-index: 10;}
    #banner .banner_btn{ width: 100%; position: absolute; bottom: 19px; left: 200px; z-index: 20; font-size: 0; text-align: center;}
    #banner .banner_btn li{ display: inline-block; width: 12px; height: 12px; border: 2px solid white;border-radius: 50%; box-sizing: border-box; margin: 0 6px; cursor: pointer; }
    #banner .banner_btn li.active{ background: white; }
    
    #service{ overflow: hidden; min-height: 407px; }
    #service .service_list{ text-align: center; margin-top: 34px; }
    #service .service_list li{ float:left; width: 250px; margin:0 10px; }
    #service .service_list div{ width: 102px;height: 102px; margin:0 auto;}
    #service .service_list li:nth-of-type(1) div{ background-image:url(./images/web1.png) ; }
    #service .service_list li:nth-of-type(2) div{ background-image:url(./images/mail1.png) ; }
    #service .service_list li:nth-of-type(3) div{ background-image:url(./images/graphic1.png) ; }
    #service .service_list li:nth-of-type(4) div{ background-image:url(./images/e-bussiness1.png) ; }
    #service .service_list h3{ font-size: 18px; color:#434343; line-height: 26px; margin-top: 25px;}
    #service .service_list p{ font-size: 14px; color: #6d6d6d; line-height: 22px;}

    #case{ background: #f8f8f8; }
    #case .container{ min-height: 460px; overflow: hidden;}
    #case .area_title{ margin-top:55px; }
    #case .area_title h2{ color: #66c5b4; }
    #case .case_list{ margin-top:28px; }
    #case .case_list li{ float: left; width: 340px; margin:0 10px ;}
    #case .case_btn{ width: 176px;height: 37px; background: #66c5b4; margin:0  auto;border-radius: 25px; line-height: 37px; text-align: center;font-size: 14px; margin-top: 36px;}
    #case .case_btn a{ display: block; width: 100%;height: 100%; color: white; }

    #news{ min-height: 450px; overflow: hidden; }
    #news .area_title{ margin-top:65px; }
    #news dl{ margin-top: 48px; }
    #news dt{ width: 234px; }
    #news dd{ width: 846px; }
    #news .news_list{ width:100%;}
    #news .news_list li{ width:50%; float: left; margin-bottom: 48px;}
    #news .news_date{ width: 71px; border-right: 1px solid #dcdcdc;}
    #news .news_date i{ color: #66c5b4; font-size: 39px; display: block; font-weight: bold;}
    #news .news_date span{ color: #999999; font-size:20px;line-height: 36px; }
    #news .news_text{ width: 310px; margin-left:20px;}
    #news .news_text h3{ font-size: 14px; }
    #news .news_text h3{ color: #3f3f3f;}
    #news .news_text p{ color: #a4a4a4; font-size: 12px; line-height: 21px; margin-top: 27px;}
    </style>
</head>
<body>
     <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="博文尚美" title="博文尚美">
            </a>
        </div>
        <ul class="head_menu r">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PROTFOLIO</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
     </div>
     <div id="banner" class="container-fluid">
        <ul class="banner_list">
            <li class="active" style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image:url(./images/banner.png)">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
     </div>
     <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUR SERVICE</p>
        </div>
        <ul class="service_list">
            <li>
                <div></div>
                <h3>1.WEB DESIQN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>2.GRAPHIC DESIGN</h3>
                <p>
                    标志logo设计/产品宣传册设计
                    <br>
                    企业广告/海报设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>3.E-BUSINESS PLAN</h3>
                <p>
                    淘宝/天猫装修设计及运营推广
                    <br>
                    企业微博、微信营销
                </p>
            </li>
            <li>
                <div></div>
                <h3>4.MAILBOXAGENTS</h3>
                <p>
                    腾讯/网易企业邮箱品牌代理
                    <br>
                    个性化邮箱定制开发
                </p>
            </li>
        </ul>
     </div> 
     <div id="case" class="container-fluid">
        <div class="container">
            <div class="area_title">
                <h2>{ 客户案例 }</h2>
                <p>With the best professional technology,to design the best innovative web site</p>
            </div>
            <ul class="case_list clear">
                <li>
                    <a href="#"><img src="./images/20141121095216750.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/20141121095528549.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./images/20141121105856226.png" alt=""></a>
                </li>
            </ul>
            <div class="case_btn">
                <a href="#">view more</a>
            </div>
        </div>
     </div>  
     <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>THE LAST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/xs1.png" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>18</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">漳州西恩视觉婚纱摄影网站建设</a></h3>
                            <p>漳州西恩视觉婚纱摄影隶属西恩视觉文化传播有限公司旗下婚纱摄影品牌，由国内著名摄影师冬晖CHAN...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>16</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站数据统计用哪种比较好?</a></h3>
                            <p>网站数据统计代码是平常网站建设过程中最受用户青睐的数据统计工具，几乎每个用户的网站程序都会...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>14</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">厦门网站建设服务的内容主要有哪些？</a></h3>
                            <p>大多数用户建网站由于都是头一次接触，对于网站建设并不了解，往往会误认为找网站建设公司建网站...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>12</i>
                            <span>Aug</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">海石景观股份有限公司网站设计案例解析</a></h3>
                            <p>此次网站整体设计采用扁平化的的风格、简约式排版，网站主视觉区采用大面积的视觉效果图，以动画...</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
     </div> 
     <div id="foot" class="container-fluid">
        <div class="container">
            <p class="l">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
            <div class="r">
                <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a>
            </div>
        </div>
     </div>
</body>
</html>

（CSS部分）

*{ margin: 00; padding: 0;}
ul,ol{ list-style: none; }
img{ display: block; }
a{ text-decoration: none; color: #646464; }
h1,h2,h3{ font-size: 16px; }
body{ font-family: Arial; }

.l{ float: left; }
.r{ float: right; }
.clear:after{ content: ""; display: block; clear: both;}
.container{ width: 1080px; margin:0 auto; position: relative;}
.container-fluid{ width: 100%; }

#head{ height: 81px; }
#head .head_logo{ width: 164px; height: 44px; margin-top: 19px; }
#head .head_menu{ font-size: 14px; line-height: 81px;} 
#head .head_menu li{ float: left; margin-left: 58px;}

#foot{ background: #66c5b4; }
#foot .container{ height: 54px; line-height: 54px; font-size: 12px; color: white;}
#foot div a{ margin: 0 10px; color: white;}

.area_title{ margin-top:60px; text-align: center;}
.area_title h2{ height: 20px; line-height: 20px; font-size: 20px; color: #363636; background:url(../images/title_bg.png) no-repeat center 7px; font-weight: normal;}
.area_title p{ color: #9f9f9f; font-size: 14px; line-height: 34px;}

（效果图）

四十、PC端游戏类型整页制作（仿写QQ飞车首页）

（HTML部分）

<!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>
    #main{ background:url(./images/bg20190104.jpg) no-repeat center 0;}
    #nav{ background:url(./images/nav_down_re.png) repeat-x,url(./images/nav.png) no-repeat center 0;}
    #nav .container{ min-height: 236px; overflow: hidden;}
    #nav .nav_logo{ width: 138px; height:112px; margin:15px auto;}

    #nav dl{ position: absolute; top: 0;}
    #nav dt{ height : 66px;}
    #nav dt a{ width:100%; height:100%; display: block; text-indent:-9999px; overflow: hidden;}
    #nav dd{ line-height: 27px; font-size:12px;text-align: center;}
    #nav dd a{ color:white;}
    #nav dd a:hover{ color :red; text-decoration: underline;}
    #nav dd a.hot:after,#nav dd a.new:after{ content:""; display: block; width:12px; height:12px; background: url( ./images/nav_tips.png)no-repeat; position: absolute; right: -15px; top: 0;}
    #nav dd a.hot:after{ background-position: 0 -12px; }
    #nav dd a.new:after{ background-position: 0 0; }
    #nav .nav_index{ width:65px; left:0;}
    #nav .nav_zl{ width:69px; left:98px;}
    #nav .nav_ss{ width:74px; left:203px;}
    #nav .nav_hd{ width:68px; left:325px;}
    
    #link{ height:175px;}
    #link a{ width:463px; height:100%; display: block; margin: 0 auto}   
    
    #banner{ height:276px; background:url( ./images/top.png) no-repeat; margin-top: 20px}
    #banner .banner_left{ width:240px; height:310px; background:url(./images/down_user_spr.png) no-repeat;margin: -20px 0 0 7px;}
    
    /*CSS3简单的动画*/
    #banner .banner_download :hover p:first-child{ animation:1s upNove;}
    @keyframes upMove{
        0%{transform : translateY ( -40px); opacity: 0; }
        100%{ transform : translateY(0); opacity: 1;}
    }
    #banner .banner_download :hover p:first-child{ animation:1s downNove;}
    @keyframes downMove{
        0%{transform : translateY ( 40px); opacity: 0; }
        100%{ transform : translateY(0); opacity: 1;}    
    }
    /*CSS3简单的动画*/
    
    #banner .banner_user div{ width:56px; height:56px; border-radius: 50%; margin:80px auto 0 auto; border :4px #283257 solid; box-sizing: border-box; overflow: hidden;}
    #banner .banner_user img{ box-sizing: border-box;overflow: hidden; }
    #banner .banner_user p{ text-align: center; font-size:12px; color: white; margin-top:25px;}
    #banner .banner_user a{color:#34f1de;}
    
    #banner .banner_list{ width:497px; height:253px; overflow: hidden;margin:13px 0 0 4px;}
    #banner .banner_list_ul{ width: 2000px;}
    #banner .banner_list_ul li{ width:497px; height:253px; float:left;}
    #banner .banner_bottomline{ width:100%; height:37px; background: rgba(0,0,0,.5); border-top:1px #514b55 solid;position: absolute; bottom: 0; left:0;}
    #banner .banner_bottomline_ul{ text-align: center; margin-top: 11px;}
    #banner .banner_bottomline_ul li{ display: inline-block; width:15px; height:15px; background:url(./images/top.png) no-repeat -603px -299px; cursor: pointer;}
    #banner .banner_bottomline_ul li.active{ background-position: -581px -299px;}
    #banner .banner_bottomline_leftbtn, #banner .banner_bottomline_rightbtn{ width:12px; height:22px; position: absolute; top:5px; background:url(./images/top.png) no-repeat; cursor: pointer;}
    #banner .banner_bottomline_leftbtn{ left:5px;background-position: -542px -296px;}
    #banner .banner_bottomline_rightbtn{ right:5px;background-position: -554px -296px;}
    #banner .banner_bottomline_leftbtn:hover{ background-position: -542px -325pX;}
    #banner .banner_bottomline_rightbtn:hover{ background-position: -554px -325pX;}
    #banner .banner_list_lt{ left:-2px; top:-4px; background-position: -621px -299px;}
    #banner .banner_list_rt{ right:-2px; top:-4px; background-position: -634px -299px;}
    #banner .banner_list_rb{ right:-2px; bottom:-5px; background-position: -634px -312px;}
    #banner .banner_list_lb{ left:-2px; bottom:-5px; background-position: -621px -312px;}

    #banner .banner_right{ width:209px; height:255px; position: relative; margin:12px 0 0 12px;}
    #banner .banner_right_lt, #banner .banner_right_rt, #banner .banner_right_rb, #banner .banner_right_lb{ width:15px; height:15px; background:url(./images/top.png) no-repeat; position: absolute;}
    #banner .banner_right_lt{ left:-4px; top:-4px; background-position: -681px -298px;}
    #banner .banner_right_rt{ right :-4px; top:-4px; background-position: -696px -298pX;}
    #banner .banner_right_rb{ right :-4px; bottom:-6px; background-position: -696pX -313px;}
    #banner .banner_right_lb{ left :-4px; bottom:-6px; background-position: -681px -313px;}
    </style>
</head>
<body>
    <div id="head" class="container-fluid">
        <div class="container">
            <div class="head_logo l">
                <a href="#">腾讯游戏</a>
            </div>
            <div class="head_ad l">
                <a href="#">
                    <img src=". /images/ad.jpg" alt=""> 
                </a>
            </div>
            <div class="head_menu r">
                <div class="head_menu_czsh l">
                    <a href="#">成长守护平台</a>
                </div>
                <div class="head_menu_top l">
                    <a href="#">腾讯游戏排行榜</a>
                </div>
            </div>
        </div>
    </div>
    <div id="main" class="container-fluid">
        <div id="nav" class="container-fluid">
            <div class="container">
                <div class="nav_logo">
                <a href="#">
                    <img src=". /images/inside_logo.png" alt="QQ飞车" title="QQ飞车">
                </a>
                </div>
            </div>
            <dl class="nav_zl">
                <dt></dt>
                <dd><a href="#">新手引导</a></dd>
                <dd><a class="hot" href="#">官方漫画</a></dd>
                <dd><a class="new" href="#">飞车手游</a></dd>
                <dd><a href="#">精美壁纸</a></dd>
                <dd><a href="#">游戏下载</a></dd>
            </dl>
            <dl class="nav_zx">
                <dt></dt>
                <dd><a class="hot" href="#">SSC</a></dd>
                <dd><a href="#">谁是车王</a></dd>
                <dd><a href="#">全民争霸赛</a></dd>
            </dl>
            <dl class="nav_zx">
                <dt></dt>
                <dd><a class="hot" href="#">版本专区</a></dd>
                <dd><a href="#">合作专区</a></dd>
                <dd><a href="#">CDK兑换</a></dd>
            </dl>
        </div> 
    </div>
    <div id="link" class="container">
        <a href="#"></a>
    </div>
    <div id="banner" class="container">
        <div class="banner_left l">
            <div class="banner_download">
                <p>下载游戏</p>
                <p>DOWNLOAD</p>
            </div>
            <div class="banner_user">
                <img src="./images/56x56.jpg" alt="">
                <p>欢迎<a href="#">登录</a>。进入飞车世界</P>
            </div>
        </div>
        <div class="banner_center l">
            <div class="banner_list">
                <ul class="banner_list_ul">
                    <li>
                        <a href="#"><img src="首页图片地址1" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="首页图片地址2" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="首页图片地址3" alt=""></a>
                    </li>
                </ul>
                <div class="banner_bottomline">
                    <ul class="banner_bottomline_ul">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="banner_bottomline_leftbtn"></div>
                    <div class="banner_bottomline_rightbtn"></div>
                </div>
                <i class="banner_list_lt"></i>
                <i class="banner_list_rt"></i>
                <i class="banner_list_rb"></i>
                <i class="banner_list_1b"></i>
            </div>
        </div>
        <div class="banner_right l">
            <a href="#"><img src="./images/bebae86c3d1f64d50a53434ed5458d22-80.jpg" alt=""></a>
            <i class="banner_right_lt"></i>
            <i class="banner_right_rt"></i>
            <i class="banner_right_rb"></i>
            <i class="banner_right_1b"></i>
        </div>
    </div>
</body>
</html>

（CSS部分）

*{ margin: 0;padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: #464646;}
h1,h2,h3{ font-size:16px; }
body{ font-family: Arial ,'宋体';}
.l{ float:left;}
.r{ float:right;}
.clear:after{ content:""; display:block; clear:both;}
.container{ width:980px; margin:0 auto; position: relative;}
.container-fluid{ width:100%;}

.l{ float:left;}
.r{ float:right;}
.clear:after{ content:""; display: block; clear: both; }
.container{ width:980px; margin:0 auto; position: relative;}
.container-fluid{ width: 100%;}

#head{ background:url('../images/head_bg.png') repeat-x;}
#head .container{ height: 41px;}
#head .head_logo{ width:220px; height:41px; background:url( ../images/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{ display: block; width:100%; height:100%; text-indent: -99px; overflow: hidder;}
#head .head_ad{ margin-left: 8px; }
#head .head_menu div{ height:18px; margin-top:13px; background:url( ../images/ost-bg.png) no-repeat;}
#head .head_menu .head_menu_czsh{ margin-right: 26px; padding-left:20px; background-position:left -92px; }
#head .head_menu .head_menu_top{ padding-right:17px; background-position:right -89px; }

（效果展示）
在这里插入图片描述

Whnist

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS自用知识点（第四周）

position特性 css position属性用于指定一个元素在文档中的定位方式。top、right.bottom、left 属性则决定了该元素的最终位置。position取值 static（默认) relative absolute fixed sticky 如果没有定位偏移量，对元素本身没有任何影响不使元素脱离文档流不影响其他元素布局left、 top、 right、 bottom是相对于当前元素自身进行偏移的 1.使元素完全脱离文档流2.使内联元素支持宽高(让内联具备
复制链接

扫一扫