专栏首页一番码客前端基础-CSS基础(八)

前端基础-CSS基础(八)

本文目录

元素的分类

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

元素的分类

<!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;` 隐藏元素。

相对定位

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

绝对定位

<!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 : 在页面滚动时有可能看不到,参考系为整个页面。

浮动

<!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>

其他属性

<!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

本文分享自微信公众号 - 一番码客(efonfighting),作者:Efonfighting

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript DOM之元素查找与CSS样式设置

    efonfighting
  • 前端基础-CSS基础(七)

    efonfighting
  • 【JavaScript小项目】任务清单

    efonfighting
  • 18.CSS

    选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

    zhang_derek
  • 网页结构与表现原则

    网页的结构与表现原则总的来说为: 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML与CSS契合度(精简页面结构) 我们可以通过一个微博用户发言信息列...

    就只是小茗
  • 前端切图|点击按钮div变色

    祈澈菇凉
  • CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

    一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline For...

    张果
  • Day6:html和css

    达达前端
  • 从概念到成功落地,技术大咖分享云基础架构最前端技术

    “ “第七届中国云计算标准和应用大会”作为国内云计算领域的重要会议之一,得到了国家工信部、国标委等指导单位的高度重视和大力支持,旨在对中国云计算产业标准制定与应...

    企鹅号小编
  • Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦。 一、内嵌滚动条 1....

    上海-悠悠

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动