css定位方式有哪几种?
复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。
float定位(即浮动定位):
这种定位方式很简单,只需规定一个浮动的方向(如:float:left;就表示这个元素向左边摆放),它的定位是相对于父元素容器;
如果该元素设置了浮动,后面紧邻的则会受到浮动的影响,因此需要后面的元素若要不受影响,则要在后面清除浮动(可用clear:both;等方法),在两个相邻元素设置相同浮动的情况下,两元素将按顺序相邻摆放。这种定位使得元素脱离文档流。
position定位:
position定位是指定位置的定位,以下为常用的几种:
1、static(静态定位):
当我们没有指定定位方式的时候,这时默认的定位方式就是static,也就是按照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置,对left、top、z-index等设置值无效,这种定位不脱离文档流;
2、relative定位(相对定位):
该定位是一种相对的定位,可以通过设置left、top等值,使得指定元素相对其正常的位置进行偏移,这种定位不脱离文档流;
3、absolute定位(绝对定位):
这种定位通过设置top、right、bottom、left这些偏移值,相对于 static 定位以外的第一个父元素进行定位(这种定位通常设置父元素为relative定位来配合使用),在没有父元素的条件下,它的参照为body,该方式脱离文档流;
4、fixed(固定定位):
这种定位方式是相对于整个文档的,只需设置它相对于各个方向的偏移值,就可以将该元素固定在页面固定的位置,通常用来显示一些提示信息,脱离文档流;
5、inherit定位:
这种方式规定该元素继承父元素的position属性值。
css定位方式有哪几种?的更多相关文章
- python版本selenium定位方式(不止八种哦)
除了大家熟知的8种定位方式之外 1.id定位:find_element_by_id(self, id_)2.name定位:find_element_by_name(self, name)3.class ...
- css定位方式
CSS表达式 匹配元素说明 xpath * 匹配任何元素 //* div 标签 //div div#eleID by ID //div[@id='eleID'] div.class by clas ...
- CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?
在CSS中关于定位的内容是:position:relative | absolute | static | fixed • static 自动定位,自动定位就是元素在页 面普通文档流中由HTML自动定 ...
- selenium css定位方式
- Selenium学习之==>18种定位方式的使用
Selenium的定位方式一共有18种,单数8种,复数8种,最后两种是前面这16种的底层封装 单数形式8种 # 1.id定位 al = driver.find_element_by_id('i1') ...
- selenium定位方式-获取标签元素:find_element_by_xxx
定位方式取舍# 唯一定位方式.多属性定位.层级+角标定位(离目标元素越近,相对定位越好) # 推荐用css selector(很少用递进层次的定位)# 什么时候用xpath呢? 当你定位元素时,必须要 ...
- selenium的定位方式
1.selenium的定位方式 selenium有18种定位方式,8种单数,8种复数,2种父类 2.8种单数定位方式 from selenium import webdriverimport time ...
- css 定位position总结
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- selenium之css定位
实在记不住,烂笔头就记一下吧. 一. 单一属性定位 1:type selector driver.find_element_by_css_selector('input') 2:id 定位 drive ...
随机推荐
- 源码分析(2)-LinkedHashMap(JDK1.8)
1.概述 LinkedHashMap继承自HashMap:在HashMap基础上,通过维护一条双向链表,解决了HashMap键值对遍历顺序和插入顺序一致的问题. 想了解LinkedHashMap源码, ...
- BrainF**k的编译器
按照语法编写了这个"编译器"(对于解释性语言而言"编译"二字的确很奇怪). 功能: 1."编译".运行一个后缀为 '.bf' ...
- nodejs 换源
解决npm install安装慢的问题国外镜像会很慢 可用 get命令查看registry npm config get registry 原版结果为 http://registry.npmjs.or ...
- Java收徒,高级架构师关门弟子
最近感悟天命,偶有所得,故而打算收徒若干,以继吾之传承. 有缘者,可破瓶颈,走向架构师之峰,指日可待. 拜师要求: 1.工作经验:1年或以上. 2.入门费用:10000元(RMB). 联系方式(联系时 ...
- 深度解密 Go 语言之 sync.map
工作中,经常会碰到并发读写 map 而造成 panic 的情况,为什么在并发读写的时候,会 panic 呢?因为在并发读写的情况下,map 里的数据会被写乱,之后就是 Garbage in, garb ...
- Windows 程序设计(3) 关于字符串
1. 宽窄字节的区别及重要性 1.1 宽窄字节简介: C语言/C++语言,使用的字符串指针就是 char* 类型,C++中的字符串是 string,内部也是对 char* 的封装 窄字节 其实最早的系 ...
- WIN10下如何解决PL2303驱动不可用的问题或者com口显示黄色感叹号usb-to-serial
WIN10下如何解决PL2303驱动不可用的问题或者com口显示黄色感叹号usb-to-serial
- selenium自动化操作
在前面爬虫的相关介绍中,我们介绍了如何抓取静态页面信息.但是,在实际的网页浏览过程中,我们可能会经常碰到各种需要进行交互的操作,典型的如输入信息.点击按钮之类. 对于这种场景,之前的静态页面操作方式已 ...
- vscode启动vue项目出错,给了管理员权限没用
今天在安装vue环境测试项目的时候, 发现vscode调用终端异常,语句无法运行,百度上给的解决方法是给管理员权限 给了以后发现没用,怎么试都没用,然后想到了,重启大法,然后问题就完美解决了
- 也来聊聊 HTTPS.
前言: 网上聊 HTTPS 的文章已经数都数不过来了吧,厚着脸皮,整理下读书笔记,结合平常项目的实践,也来聊聊 HTTPS. 一.为什么需要 HTTPS? 众所周知,HTTP 协议具有无连接.不可靠. ...