HTML+CSS基础入门-第十八天（CSS-布局的属性）

最新推荐文章于 2024-11-06 17:02:24 发布
原创 最新推荐文章于 2024-11-06 17:02:24 发布 · 287 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #布局

定位

  • left：左
  • right：右
  • top：上
  • bottom：下 离页面顶点的距离

positon定位方式

正常定位 relative

代码

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            padding:0;
            margin:0;
        }

        div{
            width:300px;
            height:300px;
            background-color:green;
            position:relative;
            top:10px;
            left:10px;
        }

    </style>

</head>
<body>

    <div>好好学习天天向上</div>

</body>

显示结果

1801

总结

relative正常定位默认位置为左上 可设置定位距离（left，right，top，bottom）设置定位位置。

absolute

根据父元素进行定位

代码

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            padding:0;
            margin:0;
        }

        div{
            width:300px;
            height:300px;
            background-color:green;
            position:relative;
            top:10px;
            left:10px;
        }
        span{
            background-color:yellow;
            position:absolute;
            top:-10px;
            right:0px;

        }

    </style>

</head>
<body>

    <div>
        <span>访问数量：999</span>

    </div>

</body>

显示结果

1802

总结

使用absolute的标签的父元素必须是relative。位置也是相对于父元素来定义。

fixed

根据浏览器父窗口进行定位

代码

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            padding:0;
            margin:0;
        }

        .div{
            width:300px;
            height:300px;
            background-color:green;
            position:relative;
            top:10px;
            left:10px;
        }
        span{
            background-color:yellow;
            position:absolute;
            top:-10px;
            right:0px;

        }
        .fixed{
            background-color:yellow;
            position:fixed;
            top:100px;

        }
    </style>

</head>
<body>

    <div class="div">
        <span>访问数量：999</span>
    </div>
    <div class="fixed">
        <p>联系电话L12898767897</p>
        <p>联系qq：2897658908</p>
        <p>性别：女</p>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>   <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

</body>

显示结果

1803

总结

当你上下滑动页面时，fixed所定义的标签对定位在浏览器的位置，类似于页面中的客服等等。

static

没有定位

代码

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            padding:0;
            margin:0;
        }

        .div{
            width:300px;
            height:300px;
            background-color:green;
            position:relative;
            top:10px;
            left:10px;
        }
        span{
            background-color:yellow;
            position:absolute;
            top:-10px;
            right:0px;

        }
        .fixed{
            background-color:yellow;
            position:static;
            top:100px;

        }
    </style>

</head>
<body>

    <div class="div">
        <span>访问数量：999</span>
    </div>
    <div class="fixed">
        <p>联系电话L12898767897</p>
        <p>联系qq：2897658908</p>
        <p>性别：女</p>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>   <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>   <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</body>

显示结果

1803

结论

所有的定位属性失效

inherit

继承

z-index

层覆盖优先级

代码

把上述代码中“fixed”放到“div”上面

    <div class="fixed">
        <p>联系电话L12898767897</p>
        <p>联系qq：2897658908</p>
        <p>性别：女</p>
    </div>
    <div class="div">
        <span>访问数量：999</span>
    </div>

显示结果

1804

代码

如果不改动代码的前提下吧下面的信息提到页面的顶层

        .fixed{
            background-color:yellow;
            position:fixed;
            top:100px;
            z-index:1;
        }

显示结果

1803

结论

默认z-index为0，z-index越大越显示在浏览器的顶层。

display

显示属性

  • none：层不显示
  • block：块状显示，在元素的后面换行，显示下一块元素
  • inline：内联显示，多个块可以显示在一行内

代码

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            padding:0;
            margin:0;
        }
        p{
            display:none;
        }
        div{
            background-color:red;
            display:inline;
        }

        span{
            background-color:yellow;
            display:block;
        }
    </style>

</head>
<body>
    <p>我是不显示的</p>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
</body>

显示结果

1805

结论

可以实现div和span的互换。
span不可以设置高宽，div可以设置宽高。用block和inline设置之后，span可以设置宽高，div不可以设置宽高。

float clear 浮动属性

  • left：左浮动
  • right：右浮动
    clear 清楚浮动
  • clear：both；

代码

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            margin:0;
            padding:0;

        }

        .div{
            width:960px;
            height:600px
            background-color:#f1f1f1;
            margin:0 auto;
        }
        .left{
            float:left;
            width:260px;
            height:400px;
            background-color:#ccc;

        }
        .right{
            float:right;
            width:700px;
            height:400px;
            background-color:#ddd;

        }
        .bottom{
            width:960px;
            height:200px;
            background-color:red;

        }

    </style>

</head>
<body>
    <div class="div">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>

    </div>

</body>

显示结果

1807

问题描述

无法显示出bottom
原因：与浮动元素紧连的元素会受影响

解决办法1

    .bottom{
            clear:both;
            width:960px;
            height:200px;
            background-color:red;

        }

解决办法2

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            margin:0;
            padding:0;

        }

        .div{
            width:960px;
            height:600px
            background-color:#f1f1f1;
            margin:0 auto;
        }
        .left{
            float:left;
            width:260px;
            height:400px;
            background-color:#ccc;

        }
        .right{
            float:right;
            width:690px;
            height:400px;
            background-color:#ddd;

        }
        .bottom{
            margin-top:10px;
            width:960px;
            height:190px;
            background-color:red;

        }
        .clear{
            clear:both;
        }

    </style>

</head>
<body>
    <div class="div">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
        <div class="bottom"></div>

    </div>

</body>

显示结果

1808

overflow溢出处理

  • hidden 隐藏超出层大小的内容
  • scroll 无论内容时候超出曾大小都添加滚动条
  • auto 超出时自动添加滚动条

代码

<!DOCTYPE html>
<head>
    <title>CSS 布局的属性</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            margin:0;
            padding:0;

        }

        .div{
            width:960px;
            height:600px
            background-color:#f1f1f1;
            margin:0 auto;
        }
        .left{
            float:left;
            width:260px;
            height:400px;
            background-color:#ccc;

        }
        .right{
            float:right;
            width:690px;
            height:400px;
            background-color:#ddd;

        }
        .bottom{
            margin-top:10px;
            width:960px;
            height:190px;
            background-color:red;

        }
        .clear{
            clear:both;
        }
        .jianjie1{
            width:260px;
            height:20px;
            background:red;
            overflow:hidden;

        }
        .jianjie2{
            width:260px;
            height:80px;
            background:red;
            overflow:scroll;

        }
        .jianjie3{
            width:260px;
            height:120px;
            background:red;
            overflow:auto;

        }

    </style>

</head>
<body>
    <div class="div">
        <div class="left">
            <div class="jianjie1">
                    hidden
                 好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上
            </div>
        </div>
        <div class="right">
            <div class="jianjie2">
                    scroll
                 好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上
            </div>
        </div>
        <div class="clear"></div>
        <div class="bottom">
        <div class="jianjie3">
                    auto
                 好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上  好好学习 天天向上
            </div>
        </div>

    </div>

</body>

显示结果

1809

前端 | （一）前端简介 | 尚硅谷前端html+css零基础教程2023最新
知识库搭建ing
07-15 1312
（一）前端简介 | 尚硅谷前端html+css零基础教程2023最新
html中bottom的属性,css中bottom是什么意思？
weixin_32047681的博客
06-07 9462
css中bottom是规定元素底部边缘的属性，该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。下面本篇文章就来给大家介绍一下css bottom属性，希望对大家有所帮助。bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。对于相对定位元素，bottom属性设置单位高于/...
html中bottom的作用,css bottom属性怎么用
weixin_32183107的博客
06-23 5721
css bottom属性用于规定元素的底部边缘，该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果。css bottom属性怎么用？作用：bottom 属性规定元素的底部边缘。说明：该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。如果 "position" 属性的值为 "...
HTML基础
weixin_51008360的博客
03-02 663
html 定义：超文本标记语言 网页的基本结构： <html> <head> <title>网页标题</title> </head> <body> 主体部分... </body> </html> 含义： <html></html>：表示网页的开始和结束 <head></head>：表示网页的头部 <title></title
前端html小技巧（css篇）—表单美化详解
yunduanaoligei的博客
02-23 3840
今天分享下”前端html小技巧（css篇）—表单美化详解“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 一、html submit与bottom按钮基本语法结构 1、html submit按钮 在input标签里设置type="submit"此表单控件可设置为按钮。 submit按钮代码： 代码如下: <input name="" type="submit" value="提交" /> submit按
Html+Css+Javascript从入门到精通.pdf
09-27
**第十八章：JavaScript程序构成** - **流程控制**：使用循环、条件语句等控制程序流程。 - **函数定义**：封装可复用的代码块。 - **事件驱动**：响应用户的交互行为。 - **事件处理**：定义响应事件的动作。 **...
第九章 DIV+CSS布局
whitesandcnm的博客
11-04 1978
DIV + CSS 是一种用于网页布局和样式设计的前端开发技术组合，通常用于替代传统的表格布局。它以结构与样式分离为核心理念，将HTML（结构）与CSS（样式）独立处理，提高网页的可维护性和兼容性。DIV 是 HTML 中的一个标签（），用于定义页面中的分块或容器元素，作为网页布局的基础。它本身没有任何样式，仅仅是一个结构上的容器。CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于控制网页元素的显示方式，包括颜色、字体、间距、布局等。
DIVCSS布局大全---12天学会DIV+CSS教程
06-03
12天学会DIV+CSS从理论到实践的教程，强烈推介。 第一天：选择什么样的DOCTYPE ...第八天：CSS布局入门 第九天：第一个CSS布局实例 第十天：自适应高度 十一天：不用表格的菜单 十二天：校验及常见的错误
html用文本做成submit,html bottom html submit按钮表单控件与CSS美化
weixin_39923110的博客
05-30 1490
html bottom按钮html submit按钮控件html表单按钮控件-html bottom与html submit按钮表单控件与CSS美化，介绍form input bottom按钮和html input submit按钮基本结构与用法，html按钮控件bottom和submit区别，同时DIVCSS5对html按钮美化布局。一般提交按钮使用了html submit和html botto...
定位进阶(HTML)
qq_51810428的博客
09-13 1425
相对定位 绝对定位 固定定位 z-index属性设置层级
html定位
believe123_leaf的博客
10-17 391
将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
CSS同时设置绝对定位top和bottom属性
weixin_47966295的博客
05-19 3065
问题引出 最近在用html+css+js做一个web后台管理系统左边侧边栏时出现了父元素定义为绝对定位时脱标，导致子元素无法撑开父元素高度的问题。 但是希望实现如下效果，左边导航栏将剩余全部位置占满，即使上面只有4个下面也可以占满 代码如下： index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" c
css------定位，必看
m0_61331573的博客
04-10 624
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！T行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-8VC08L4s-1712700597005)]
CSS定位
最新发布
qq_69347371的博客
11-06 1310
定位
HTML---定位
zhoutong2323的博客
12-25 4681
HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。position属性指定了元素的定位方式，常用的取值有static、relative、absolute和fixed。通过设置不同的position值，可以实现元素的不同定位方式。top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时，这些属性参照的是元素自身的位置进行调整；
html里top是向下,css left right top bottom定位
weixin_42495394的博客
06-03 2894
DIV CSS left right top bottom定位这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative此取值方可生效。一、语法结构 - TOPLeft、right、top、bottom后跟数字+html单位。示范结构div{left:20px}div{right:20px}div{top:20px}div{bottom:2...
html bottom 点击,HTML DOMRect bottom用法及代码示例
weixin_30569443的博客
06-22 792
在Web API中，有一个DOMRect接口，它的底部有一个属性，它使我们可以看到DOMRect对象的底部。它返回y +高度坐标值，或者如果高度为负，则返回y。用法:var recX = DOMRect.bottom;返回类型：Double value范例1：当高度为正时DOMRect bottom propertyGeeksForGeeksDOMRect bottom propertyGet b...
Div+CSS布局宝典：从入门到实践
- 第八天深入CSS布局，涉及如何定义DIV、CSS2盒模型的概念，以及如何使用背景图片进行辅助布局。 第9-10天则是实践阶段，通过实例教学： - 第九天的实例演示了如何创建一个基本布局，包括确定布局结构、定义body...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值