作者：黒彡白小彩电邦 | 来源：互联网 | 2024-09-26 10:30
这篇文章主要介绍“CSS浮动和定位属性介绍”，在日常操作中，相信很多人在CSS浮动和定位属性介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS浮动和定位属性介绍”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
CSS Display(显示) 与 Visibility（可见性）
display：属性设置一个元素应如何显示。
visibility：属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none 或 - visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了但仍然会影响布局。
display(不占空间)：隐藏。none不显示 block显示
visibility(占空间)：隐藏。 hidden不显示 visitle显示
display:inline：可以把块级元素变成内联元素
http://www.iis7.com/b/wzjk/
display:block：可以把内联元素变成块级元素，不允许有它内部的嵌套块元素。
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h2 , h3 , h4 , h5 , h6 , h7 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将
元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。。。。。。。
CSS Position(定位)
CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
position 属性指定了元素的定位类型。
position 属性的五个值：
static：默认值，没有定位，元素出现在正常的流中，静态定位的元素不会受到 top, bottom, left, right影响。
absolute：绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于，元素和其他元素重叠。
relative：相对定位，相对其正常位置，(相对灵活，按元素自己的位置)，相对定位元素的定位是相对其正常位置。
fixed：固定定位，即使窗口是滚动的它也不会移动，注意：Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持.Fixed定位使元素的位置与文档流无关，因此不占据空间，Fixed定位的元素和其他元素重叠。
sticky：可以把它称之为粘性定位，依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法
z-index：指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
clip:rect：裁剪元素，先有定位
overflow:scroll：内容溢出时，显示隐藏内容
overflow:hidden：内容溢出时，隐藏
overflow:auto：自动处理溢出内容
overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content
overflow-y：指定如何处理顶部/底部边缘的内容溢出元素的内容区域。值：auto，hidden，scroll，visible，no-display，no-content
。。。。。。
CSS float(浮动)
CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
浮动，可以让行内和块变成行内块
浮动，会使元素向左或向右移动，其周围的元素也会重新排列。
浮动，往往是用于图像，但它在布局时一样非常有用
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，文本流将环绕在它左边
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
1.
到此，关于“CSS浮动和定位属性介绍”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程笔记网站，小编会继续努力为大家带来更多实用的文章！
推荐阅读
本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例，帮助开发者更好地理解和应用该方法。 ...
[详细]
蜡笔小新 2024-12-28 10:51:55
本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块，支持嵌入Python代码片段，帮助开发者快速构建动态网页。 ...
[详细]
蜡笔小新 2024-12-27 19:22:16
本文介绍了在Windows环境下使用pydoc工具的方法，并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外，还提供了关于raw_input和open函数的具体用法和功能说明。 ...
[详细]
蜡笔小新 2024-12-26 17:05:56
本文深入探讨了如何通过多种技术手段优化ListView的性能，包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ...
[详细]
蜡笔小新 2024-12-28 10:36:30
本文将介绍如何编写一些有趣的VBScript脚本，这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例，帮助您了解VBScript的基本语法和功能。 ...
[详细]
蜡笔小新 2024-12-28 09:46:23
本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ...
[详细]
蜡笔小新 2024-12-28 04:11:47
1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ...
[详细]
蜡笔小新 2024-12-27 19:32:17
本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先，通过change事件监听用户选择的省份，并动态加载对应的城市列表。其次，详细讲解了使用Validation插件进行表单验证的方法，包括内置规则、自定义规则及实时验证功能。 ...
[详细]
蜡笔小新 2024-12-27 17:10:48
本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法，并提供了多个实际代码示例，帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目，具有很高的参考价值。 ...
[详细]
蜡笔小新 2024-12-27 16:11:49
在前两篇文章中，我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象，分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor，即用于描述 Action 方法参数的对象，并详细介绍其工作原理。 ...
[详细]
蜡笔小新 2024-12-27 15:26:10
前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ...
[详细]
蜡笔小新 2024-12-27 15:19:01
本文深入探讨了 Java 中的 Serializable 接口，解释了其实现机制、用途及注意事项，帮助开发者更好地理解和使用序列化功能。 ...
[详细]
蜡笔小新 2024-12-27 15:06:12
本文由一位拥有6年Android开发经验的工程师撰写，详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ...
[详细]
蜡笔小新 2024-12-26 17:45:48
本文详细介绍了Akka中的BackoffSupervisor机制，探讨其在处理持久化失败和Actor重启时的应用。通过具体示例，展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ...
[详细]
蜡笔小新 2024-12-27 15:04:09
本文详细介绍如何在Vue项目中通过Element UI组件库实现对输入框占位符（placeholder）值的获取，以及数据绑定和查询的基本方法。文章将涵盖v-model双向绑定、el-form表单配置等核心内容。 ...
[详细]
蜡笔小新 2024-12-27 09:10:40
京公网安备 11010802041100号