理解CSS浮动float、定位position
时间:2018-11-13
本文章向大家介绍web前端css定位position和起浮float,需要的朋友可以参考一下
div、h1或p元素常常被称为块级元素。这意味着这些元素显现为一块内容,即“块框”。与之相反,span和h3等元素称为“行内元素”,这是由于它们的内容显现内行中,即“行内框”。
在这种状况下,这个框称为无名块框,由于它不与专门界说的元素相关联。
块级元素的文本行也会发作相似的状况。假设有一个包括三行文本的阶段。每行文本构成一个无名框。无法直接对无名块或行框运用款式,由于没有能够运用款式的地方(留意,行框和行内框是两个概念)。可是,这有助于了解在屏幕上看到的全部东西都构成某种框。
CSS定位机制
CSS有三种基本的定位机制:普通流、起浮和肯定定位。
除非专门指定,不然全部框都在普通流中定位。也就是说,普通流中的元素的方位由元素在X(HTML)中的方位决议。
块级框从上到下一个接一个地摆放,框之间的笔直间隔是由框的笔直外边距计算出来。
行内框在一行中水平安置。能够运用水平内边距、边框和外边距调整它们的间隔。可是,笔直内边距、边框和外边距不影响行内框的高度。由一行构成的水平框称为行框(LineBox),行框的高度总是足以包容它包括的全部行内框。不过,设置行高能够添加这个框的高度。
在下面,咱们会为您详细解说相对定位、肯定定位和起浮。
CSS position特点
经过运用position特点,咱们能够挑选4中不同类型的定位,这会影响元素框生成的方法。
position特点值的意义:
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创立一个或多个行框,置于其父元素中。
relative
元素框偏移某个间隔。元素仍坚持其未定位前的形状,它本来所占的空间仍保留。
absolute
元素框从文档流完全删去,并相对于其包括块定位。包括块可能是文档中的另一个元素或者是初始包括块。元素原先在正常文档流中所占的空间会封闭,就好像元素本来不存在相同。元素定位后生成一个块级框,而不管本来它在正常流中生成何种类型的框。
fixed
元素框的体现相似于将position设置为absolute,不过其包括块是视窗自身。
提示:相对定位实际上被看作普通流定位模型的一部分,由于元素的方位相对于它在普通流中的方位。
CSS定位特点
CSS定位特点答应你对元素进行定位。
特点描绘
position把元素放置到一个静态的、相对的、肯定的、或固定的方位中。
top界说了一个定位元素的上外边距鸿沟与其包括块上鸿沟之间的偏移。
right界说了定位元素右外边距鸿沟与其包括块右鸿沟之间的偏移。
bottom界说了定位元素下外边距鸿沟与其包括块下鸿沟之间的偏移。
left界说了定位元素左外边距鸿沟与其包括块左鸿沟之间的偏移。
overflow设置当元素的内容溢出其区域时发作的工作。
clip设置元素的形状。元素被剪入这个形状之中,然后显现出来。
vertical-align设置元素的笔直对齐方法。
z-index设置元素的堆叠次序。
CSS为定位和起浮供给了一些特点,运用这些特点,能够树立列式布局,将布局的一部分与另一部分堆叠,还能够完结多年来一般需求运用多个表格才干完结的使命。
定位的基本思想很简单,它答应你界说元素框相对于其正常方位应该呈现的方位,或者相对于父元素、另一个元素乃至浏览器窗口自身的方位。明显,这个功用十分强壮,也很让人吃惊。要知道,用户署理对CSS2中定位的支撑远胜于对其它方面的支撑,对此不该感到奇怪。
另一方面,CSS1中初次提出了起浮,它以Netscape在Web开展初期添加的一个功用为根底。起浮不完满是定位,不过,它当然也不是正常流布局。咱们会在后边的章节中清晰起浮的意义。
全部皆为框
p、h1或p元素常常被称为块级元素。这意味着这些元素显现为一块内容,即“块框”。与之相反,span和h3等元素称为“行内元素”,这是由于它们的内容显现内行中,即“行内框”。
您能够运用display特点改动生成的框的类型。这意味着,经过将display特点设置为block,能够让行内元素(比方元素)体现得像块级元素相同。还能够经过把display设置为none,让生成的元素底子没有框。这样的话,该框及其全部内容就不再显现,不占用文档中的空间。
可是在一种状况下,即便没有进行显式界说,也会创立块级元素。这种状况发作在把一些文本添加到一个块级元素(比方p)的最初。即便没有把这些文本界说为阶段,它也会被当作阶段对待
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 原创 | 学会这三个命令,你就不再是git只会用三板斧的菜鸟了
- 构建Flink第一个应用程序
- 第35期:从 DFS 学习二叉树!(适合小白)
- ROS自平衡车案例学习(机器人操作系统+现代控制理论融合)
- Git 不能提交空目录?我也是醉了!
- 相关矩阵、特征、预测、股市!(附代码)
- CentOS7下编译安装libmodbus库
- 你还以为使用 StringBuffer 就万事大吉了?
- Windows10中VS2017环境下使用libmodbus库Modbus TCP读取设备的数据
- 记一次生产服务器进程突然消失问题排查!
- 0812-7.1.3-如何使用Ranger给HBase授权
- Redis集群方案对比:Codis、Twemproxy、Redis Cluster
- 这就是你日日夜夜想要的docker!!!---------Docker镜像制作与私有仓库建立
- 排障集锦:九九八十一难之第十八难!-----System has not been booted with systemd as init system (PID 1). Can‘t operat
- 深入了解 Flex 属性