前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端基础-CSS基础(八)

前端基础-CSS基础(八)

作者头像
efonfighting
发布2019-12-24 11:58:32
3700
发布2019-12-24 11:58:32
举报
文章被收录于专栏:一番码客

本文目录

元素的分类

相对定位绝对定位浮动其他属性参考

元素的分类

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                display: inline-block;
            }
            span{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                display: block;
            }
        </style>
    </head>
    <body>
        <p>p</p>
        <span>span</span>
    </body>
</html>
  • 块级元素,独占一行:pdivh1-h6ullioldldtdd
  • 行内元素,行款足够在一行显示,不够时再折叠:spanaem
  • 可以指定display属性,时块级元素和行内元素进行转换。
    • `display: inline;` 把块级元素展现为行内元素。
    • `display: block;` 把行内元素展现为块级元素。
    • `display: inline-block;` 把块级元素展现为行内元素,但保留块级元素的属性。
    • `display: none;` 隐藏元素。

相对定位

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        div{
            position: relative;
            top: 20px;
            left: 30px;
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        </style>
    </head>
    <body>
        <div>

        </div>
    </body>
</html>
  • 注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        div{
            position: absolute;
            top: 20px;
            left: 20px;
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        </style>
    </head>
    <body>
        <div>

        </div>
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
    </body>
</html>
  • fixed : 元素在页面上始终可见,参考系为浏览器;
  • absolute : 在页面滚动时有可能看不到,参考系为整个页面。

浮动

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            一旦有一个元素指定了浮动,后面的的元素也要指定浮动
        -->
        <style type="text/css">
            .div1{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                position: relative;
                float: left;
            }

            .div2{
                width: 100px;
                height: 100px;
                border: 1px solid blue;
            }

            .cls{
                /*指定如何清除浮动*/
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            div1
        </div>

        <div class="cls">

        </div>

        <div class="div2">
            div2
        </div>
    </body>
</html>

其他属性

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            img{
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <p>这是一张图</p>
        <img src="img/小区说事.png" />
    </body>
</html>

参考

  • 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 一番码客 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 元素的分类
  • 相对定位
  • 绝对定位
  • 浮动
  • 其他属性
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档