iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >CSS中DIV标签如何实现定位单元的控制
  • 698
分享到

CSS中DIV标签如何实现定位单元的控制

2024-04-02 19:04:59 698人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关CSS中DIV标签如何实现定位单元的控制,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。你对CSS中DIV标签的用法是否了解,DIV的起始标签和

这篇文章将为大家详细讲解有关CSS中DIV标签如何实现定位单元的控制,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

你对CSS中DIV标签的用法是否了解,DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

DIV

DIV在编程中又叫做整除,即只得商的整数。DIV元素是用来为html文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

定位单元的控制

(width、height、visiblility)
除了控制定位单元的左上角位置,你还可以控制单元的宽度和高度,及单元在页面的可视性。

宽度:

定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制,即设定要素的宽度。

DIV{position:absolute;left:200px;top:40px;width:150px}

浏览器接到这项规则时,它将文字按照规则规定的效果显示,还将段落的***水平尺寸限制在150象素。
宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位,或使用比例值设定宽度,比例值指相对于母体要素的比例。IE4中,这项属性还可用于图像。你可以通过宽度设置人为地拉宽或压缩图像。

高度:

理论上讲,高度应该和宽度的设置类似,只不过是在垂直方向上:

DIV{position:absolute;left:200px;top:40px;height:150px}

这里我用了“理论上讲”,因为有些浏览器不支持高度属性。

可视性:

利用CSS,你可以隐藏要素,使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。
H4{visibility:hidden}

选项:

visible使要素可以被看见

hidden使要素被隐藏

inherit指它将继承母体要素的可视性设置。

值inherit为缺省值。这使单元继承父单元的可见性。所以,如果某一段是隐藏的,则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如,段内的EM单元被指定为可见,这时如果该段被隐藏,则段内的所有其它内容都将消失,而唯有EM单元中的文本是可见的。

当一个要素被隐藏后,它仍然要占据浏览器窗口中的原有空间。所以,如果你将文字包围在一幅被隐藏的图像周围,那么,其显示效果将是文字包围着一块空白区域。此新闻
这条属性在编写语言和使用动态HTML时很有用,比如你可以使某段落或图像只在鼠标滑过时才显示。

关于“CSS中DIV标签如何实现定位单元的控制”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: CSS中DIV标签如何实现定位单元的控制

本文链接: https://www.lsjlt.com/news/81403.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS中DIV标签如何实现定位单元的控制
    这篇文章将为大家详细讲解有关CSS中DIV标签如何实现定位单元的控制,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。你对CSS中DIV标签的用法是否了解,DIV的起始标签和...
    99+
    2022-10-19
  • 如何理解DIV定位单元中三大元素的控制
    如何理解DIV定位单元中三大元素的控制,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。你对DIV定位单元的控制方式是否熟悉,这里和大家分享一下,...
    99+
    2022-10-19
  • 如何探究DIV定位单元的控制三大元素用法
    如何探究DIV定位单元的控制三大元素用法,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。和大家重点讨论一下DIV定位单元的控制,除了控制定位单元...
    99+
    2022-10-19
  • CSS如何实现定位元素居中
    这篇文章主要讲解了“CSS如何实现定位元素居中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS如何实现定位元素居中”吧!绝对定位元素的居中实现如果要问如...
    99+
    2022-10-19
  • DIV CSS如何实现表单输入单元的文字设置
    小编给大家分享一下DIV CSS如何实现表单输入单元的文字设置,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!DIV CSS表单输...
    99+
    2022-10-19
  • DIV CSS如何实现表单输入单元的边框设置
    这篇文章主要介绍DIV CSS如何实现表单输入单元的边框设置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!DIV CSS表单输入单元的边框设置:更改传统的表单单元边框,会让你的主页生...
    99+
    2022-10-19
  • 如何使用CSS实现定位元素居中
    本文将为大家详细介绍“如何使用CSS实现定位元素居中”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“如何使用CSS实现定位元素居中”能够给你意想不到的收获,请大家跟着小编的思路...
    99+
    2022-10-19
  • css如何实现绝对定位元素居中
    这篇文章将为大家详细讲解有关css如何实现绝对定位元素居中,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。绝对定位元素居中(水平和垂直方向)emo {    ...
    99+
    2023-06-26
  • 如何实现meta标签中viewport来控制设备屏幕的css属性
    这篇文章主要介绍了如何实现meta标签中viewport来控制设备屏幕的css属性,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   &l...
    99+
    2022-10-19
  • 用定制标签库和配置文件实现对JSP页面元素的访问控制 (转)
    用定制标签库和配置文件实现对JSP页面元素的访问控制 (转)[@more@]      用定制标签库和配置文件实现对JSP页面元素的访问控制  控制客户端访问是开发一个基于B/S的架构的系统的开发者必...
    99+
    2023-06-03
  • 如何利用div+css实现鼠标经过背景高亮的导航菜单
    这篇文章主要介绍“如何利用div+css实现鼠标经过背景高亮的导航菜单”,在日常操作中,相信很多人在如何利用div+css实现鼠标经过背景高亮的导航菜单问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2022-10-19
  • css如何使用定位实现盒子的居中
    这篇文章主要介绍了css如何使用定位实现盒子的居中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。使用定位实现盒子的居中  .outer{  ...
    99+
    2022-10-19
  • CSS在固定宽高的div内如何实现垂直居中
    这篇文章将为大家详细讲解有关CSS在固定宽高的div内如何实现垂直居中,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。需求案例案例是这样的,一个外层div,高宽是固定的,但...
    99+
    2022-10-19
  • 如何实现Oracle查询sql错误信息的控制和定位
    小编给大家分享一下如何实现Oracle查询sql错误信息的控制和定位,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!环境准备使用O...
    99+
    2022-10-18
  • HTML中的select标签如何实现单选和多选
    这篇文章主要为大家展示了“HTML中的select标签如何实现单选和多选”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML中的select标签如何...
    99+
    2022-10-19
  • 基于Django的Admin后台如何实现定制简单监控页
    这篇文章主要介绍基于Django的Admin后台如何实现定制简单监控页,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!我们使用Django的Admin二次定制一个图形化界面,首先我们把语言设置为中文简体.修改:&nbs...
    99+
    2023-06-21
  • 如何实现不定宽高div内图片垂直居中的css样式
    这篇文章主要讲解了“如何实现不定宽高div内图片垂直居中的css样式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何实现不定宽高div内图片垂直居中的cs...
    99+
    2022-10-19
  • CSS如何实现水平垂直居中的绝对定位居中技术
    本篇内容介绍了“CSS如何实现水平垂直居中的绝对定位居中技术”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
  • web开发中如何实现绝对定位元素的水平垂直居中
    小编给大家分享一下web开发中如何实现绝对定位元素的水平垂直居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.css实现居中...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作