9.css

1.css浮动属性设置与浮动带来的父级边框塌陷问题及解决

display:块级标签元素到行内标签元素的转换
float:浮动属性,是标签元素左右浮动(独立于父标签元素的那种左右移动,看成是漂浮状态的)
clear:(禁止哪侧出现浮动标签元素)
父级边框塌陷问题解决:

第一种方法,增加父级元素的高度
#father{
bored:1px #000 solid;
height:800px;
}
第二种方法,增加一个空的div标签,清除浮动

.clear{ clear:both; margin:0; padding:0; }

第三种方法,在父级元素中加一个 overflow:hidden(自动溢出)
第四种方法(推荐使用),父类标签元素增加一个伪类:after
#father:after{
content:‘’;
display:block;
clear:both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{
            border: #020202 solid 3px;
        }
        /*起到防止父级标签边框塌陷问题*/
        #div:after{
            content:"";
            clear: both;
            display: block;
        }
        div[class="div1"]{
            border: #FF0000 solid 2px;
            display: inline-block;
            float: right;
            /*是该标签元素内容左右都不能浮动,所以自动作为一行显示*/
            /*clear: both;*/

        }
        div[class="div2"]{
            border: #ff0000 solid 2px;
            display: inline-block;
            float: right;
            clear: both;

        }
        div[class="div3"]{
            border: #ff0000 solid 2px;
            display: inline-block;
            float: right;
            clear: both;

        }
        div[class="div4"]{
             border: #FF0000 solid 2px;
            display: inline-block;
            float: right;
            clear: both;

         }
    </style>

</head>
<body>
   <div id="div">
       <div class="div1"><img src="img/logo.jpg" alt=""></div>
       <div class="div2"><img src="img/regbtn.jpg" alt=""></div>
       <div class="div3"><img src="img/verify_code.jpg" alt=""></div>
       <div class="div4">中国共产党成立100周年万岁!</div>
   </div>
</body>
</html>

2.定位

相对定位( position: relative):相对于自己原来的位置进行偏移,仍然在标准文档流中。原来的位置会被保留。
<style>
        body{
           padding:20px;
       }
        div{
            padding: 5px;
            margin: 10px;
            border:1px solid #0000ff;
        }
        #first{
            border:1px solid #0000ff;
            background-color: aqua;
            position:relative;   /*相对定位:上下左右*/
            top:-20px;
            left:20px;
        }
        #second{
            border:1px solid #0000ff;
            background-color: cyan;
            position:relative;
            left:20px;
        }
        #third{
            border:1px solid #0000ff;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
绝对定位(position: absolute):没有父级元素定位的前提下,相对于浏览器定位如果父级元素存在定位,我们通常会相对于父级元素进行偏移在父级元素范围内移动相对于父级或浏览器的位置,进行指定的偏移。绝对定位的话,他不在标准文档流中,原来的位置也不会被保留。(简单记:相对于浏览器定位 如果设置了父标签的定位属性,则是相对于父标签元素位置的定位。)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        #div{
            height: 300px;
            width: 300px;
            margin: 30px;
            /*该标签设置了定位属性,所以字标签的绝对定位是相对于该标签*/
            position: relative;
        }
        .div1{
            height: 200px;
            width: 300px;
            background-color: #0072fd;
        }
        .div2{

        }
        .div3{
            width: 300px;
            height: 30px;
            background-color: #A6A6A6;
            position: absolute;
            left: 100px;
        }
    </style>
</head>

<body>
   <div id="div">
       <div class="div1"></div>
       <div class="div2">浮动弹窗</div>
       <div class="div3"></div>
   </div>
</body>
</html>
固定定位(position: fixed):元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。fixed表示脱离了正常的文档流。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        #div{
            height: 300px;
            width: 300px;
            margin: 30px;
            position: relative;
        }
        .div1{
            height: 200px;
            width: 300px;
            background-color: #0072fd;
        }
        .div2,.div3{
            width: 300px;
            height: 30px;
            position: fixed;
        }
        .div2{
            left: 10px;
        }
        .div3{
            left: 100px;
            background-color: #A6A6A6;
        }

    </style>
</head>

<body>
   <div id="div">
       <div class="div1"></div>
       <div class="div2">浮动弹窗</div>
       <div class="div3"></div>
   </div>
</body>
</html>
z-index属性: z-index:x 其中x(一般选择0-999),x越高,就越优先显示,一般搭配定位属性使用(因为可以将多个标签元素放在同一个地方,然后用z-index设置谁优先显示)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        #div{
            height: 300px;
            width: 300px;
            margin: 30px;
            position: relative;
        }
        .div1{
            height: 200px;
            width: 300px;
            background-color: #0072fd;
        }
        .div2,.div3{
            width: 300px;
            height: 30px;
            position: absolute;
        }
        .div2{
            left: 105px;
            top: 175px;
            z-index: 1;
        }
        .div3{
            left: 0px;
            top: 170px;
            z-index: 0;
            background-color: #A6A6A6;
        }

    </style>
</head>

<body>
   <div id="div">
       <div class="div1"></div>
       <div class="div2">浮动弹窗</div>
       <div class="div3"></div>
   </div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=icon href=/static/dist/favicon.ico> <title>Document</title> <link href=/static/dist/css/chunk-13070ec1.ccda3c25.css rel=prefetch> <link href=/static/dist/css/chunk-1f6eb24a.5552800c.css rel=prefetch> <link href=/static/dist/css/chunk-2450c4ac.37f7ca9b.css rel=prefetch> <link href=/static/dist/css/chunk-24a27c0c.d809b953.css rel=prefetch> <link href=/static/dist/css/chunk-25dec777.b68c08db.css rel=prefetch> <link href=/static/dist/css/chunk-3a7e7ac7.61f67a30.css rel=prefetch> <link href=/static/dist/css/chunk-3ac3afd8.98bc23e9.css rel=prefetch> <link href=/static/dist/css/chunk-3b4a96bb.a0ee3bc1.css rel=prefetch> <link href=/static/dist/css/chunk-42b28a6b.64434a61.css rel=prefetch> <link href=/static/dist/css/chunk-517ab105.39040074.css rel=prefetch> <link href=/static/dist/css/chunk-56490945.643cad5c.css rel=prefetch> <link href=/static/dist/css/chunk-63b82705.d2b7ad58.css rel=prefetch> <link href=/static/dist/css/chunk-716622da.8a497f1a.css rel=prefetch> <link href=/static/dist/js/chunk-13070ec1.cc5aaa8f.js rel=prefetch> <link href=/static/dist/js/chunk-1f6eb24a.bca948d6.js rel=prefetch> <link href=/static/dist/js/chunk-2450c4ac.58e1bc6a.js rel=prefetch> <link href=/static/dist/js/chunk-24a27c0c.0ab7f6d8.js rel=prefetch> <link href=/static/dist/js/chunk-25dec777.2148f1f7.js rel=prefetch> <link href=/static/dist/js/chunk-3a7e7ac7.513dffb8.js rel=prefetch> <link href=/static/dist/js/chunk-3ac3afd8.6c148bd8.js rel=prefetch> <link href=/static/dist/js/chunk-3b4a96bb.73517657.js rel=prefetch> <link href=/static/dist/js/chunk-42b28a6b.1e8780b2.js rel=prefetch> <link href=/static/dist/js/chunk-517ab105.1e512cbc.js rel=prefetch> <link href=/static/dist/js/chunk-56490945.c3e3cef6.js rel=prefetch> <link href=/static/dist/js/chunk-63b82705.f1066fe6.js rel=prefetch> <link href=/static/dist/js/chunk-716622da.244a901e.js rel=prefetch> <link href=/static/dist/css/app.a627b381.css rel=preload as=style> <link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=preload as=style> <link href=/static/dist/js/app.a15d8424.js rel=preload as=script> <link href=/static/dist/js/chunk-vendors.eac65f44.js rel=preload as=script> <link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=stylesheet> <link href=/static/dist/css/app.a627b381.css rel=stylesheet> </head> <body><noscript><strong>We're sorry but iview-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript> <div id=app></div> <script src=/static/dist/js/chunk-vendors.eac65f44.js></script> <script src=/static/dist/js/app.a15d8424.js></script> </body> </html> 帮我整理一下代码
05-05
这是一个 HTML 页面的代码。以下是格式整理后的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=icon href=/static/dist/favicon.ico> <title>Document</title> <link href=/static/dist/css/chunk-13070ec1.ccda3c25.css rel=prefetch> <link href=/static/dist/css/chunk-1f6eb24a.5552800c.css rel=prefetch> <link href=/static/dist/css/chunk-2450c4ac.37f7ca9b.css rel=prefetch> <link href=/static/dist/css/chunk-24a27c0c.d809b953.css rel=prefetch> <link href=/static/dist/css/chunk-25dec777.b68c08db.css rel=prefetch> <link href=/static/dist/css/chunk-3a7e7ac7.61f67a30.css rel=prefetch> <link href=/static/dist/css/chunk-3ac3afd8.98bc23e9.css rel=prefetch> <link href=/static/dist/css/chunk-3b4a96bb.a0ee3bc1.css rel=prefetch> <link href=/static/dist/css/chunk-42b28a6b.64434a61.css rel=prefetch> <link href=/static/dist/css/chunk-517ab105.39040074.css rel=prefetch> <link href=/static/dist/css/chunk-56490945.643cad5c.css rel=prefetch> <link href=/static/dist/css/chunk-63b82705.d2b7ad58.css rel=prefetch> <link href=/static/dist/css/chunk-716622da.8a497f1a.css rel=prefetch> <link href=/static/dist/js/chunk-13070ec1.cc5aaa8f.js rel=prefetch> <link href=/static/dist/js/chunk-1f6eb24a.bca948d6.js rel=prefetch> <link href=/static/dist/js/chunk-2450c4ac.58e1bc6a.js rel=prefetch> <link href=/static/dist/js/chunk-24a27c0c.0ab7f6d8.js rel=prefetch> <link href=/static/dist/js/chunk-25dec777.2148f1f7.js rel=prefetch> <link href=/static/dist/js/chunk-3a7e7ac7.513dffb8.js rel=prefetch> <link href=/static/dist/js/chunk-3ac3afd8.6c148bd8.js rel=prefetch> <link href=/static/dist/js/chunk-3b4a96bb.73517657.js rel=prefetch> <link href=/static/dist/js/chunk-42b28a6b.1e8780b2.js rel=prefetch> <link href=/static/dist/js/chunk-517ab105.1e512cbc.js rel=prefetch> <link href=/static/dist/js/chunk-56490945.c3e3cef6.js rel=prefetch> <link href=/static/dist/js/chunk-63b82705.f1066fe6.js rel=prefetch> <link href=/static/dist/js/chunk-716622da.244a901e.js rel=prefetch> <link href=/static/dist/css/app.a627b381.css rel=preload as=style> <link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=preload as=style> <link href=/static/dist/js/app.a15d8424.js rel=preload as=script> <link href=/static/dist/js/chunk-vendors.eac65f44.js rel=preload as=script> <link href=/static/dist/css/chunk-vendors.3fe6fb1a.css rel=stylesheet> <link href=/static/dist/css/app.a627b381.css rel=stylesheet> </head> <body> <noscript> <strong>We're sorry but iview-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id=app></div> <script src=/static/dist/js/chunk-vendors.eac65f44.js></script> <script src=/static/dist/js/app.a15d8424.js></script> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值