【HTML/CSS】定位方式及区别

1 文档流

文档流是浏览器默认的排版方式
文档流的排版方式是块级元素垂直排布，行内元素和行内块元素水平排布。

2 脱离文档流

脱离文档流是不按照文档流的排版方式进行排版，脱离后，元素不在布局中，不在流中占有位置，处于漂浮状态，后面的文档流中的元素会补上去。

会造成脱离文档流的情况：

浮动：给元素添加float属性，且属性值不为none。
定位：设置position为absolute和fixed。fixed会固定在窗口上，absolute会随着滚动条滚动

元素脱离文档流存在的问题：

会导致父元素高度塌陷可以
通过将父子元素放置在同一个BFC中解决，或者使用清除浮动

3 定位方式

static：默认定位值，元素出现在正常的流中，会忽略top,bottom,left,right,z-index的设置
relative：相对定位，不会脱离文档流，在文档流中占有位置，可以通过top,bottom,left,right的设置相对于其正常**（原先本身）**位置进行定位。可通过z-index进行层次分级。
absolute：绝对定位，会脱离文档流，相对static定位以外的第一个父元素定位。
fixed：固定定位，相对于浏览器窗口进行定位。

4 使用场景

设置水平居中

position:absolute;
left:50%;
transform:translateX(-50%)

设置垂直居中

position:absolute;
top:50%;
transform:translateY(-50%)

【HTML/CSS】定位方式及区别相关推荐

xpath获取标签的属性值_论xpath与css定位方式
例1:<input id="kw" name="wd" class="s_ipt" value="" maxlen ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
class 第一个元素_selenium之元素定位方式
# Xpath定位方式,非常常用,很试用于项目结构长期不会变化的项目可以使用以下Xpath来定位元素# 1.绝对路径定位# 2.使用元素属性定位# 3.层级与属性结合# 4.使用逻辑运算符# 5.使 ...
哪种css实现方式优势更突出_css和div的优势有哪些？
CSS+DIV是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定 ...
Selenium使用CSS定位总结
大部分人在使用selenium定位元素时,用的是xpath定位,css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁 css的定位方法和上一篇的xpath定位方法,两篇学习 ...
Selenium八种定位方式
八种定位方式分别是:id.name.class name.tag name .link text.partial link textxpath.css selector. 元素标签或者元素属性:id. ...
selenium之css定位详解
css定位 css概述: 1.css(Cascading Style Sheets)是一种语言,它用来描述HTML和XML的元素显示样式. 2.css语言中有css选择器,在selenium中也可以使 ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...

【HTML/CSS】定位方式及区别

1 文档流

2 脱离文档流

3 定位方式

4 使用场景

【HTML/CSS】定位方式及区别相关推荐

最新文章

热门文章