复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点。下面我们来看一下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定位方式有哪几种?的更多相关文章

  1. python版本selenium定位方式(不止八种哦)

    除了大家熟知的8种定位方式之外 1.id定位:find_element_by_id(self, id_)2.name定位:find_element_by_name(self, name)3.class ...

  2. css定位方式

    CSS表达式 匹配元素说明 xpath * 匹配任何元素 //* div 标签 //div div#eleID by ID //div[@id='eleID']  div.class  by clas ...

  3. CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?

    在CSS中关于定位的内容是:position:relative | absolute | static | fixed • static 自动定位,自动定位就是元素在页 面普通文档流中由HTML自动定 ...

  4. selenium css定位方式

  5. Selenium学习之==>18种定位方式的使用

    Selenium的定位方式一共有18种,单数8种,复数8种,最后两种是前面这16种的底层封装 单数形式8种 # 1.id定位 al = driver.find_element_by_id('i1') ...

  6. selenium定位方式-获取标签元素:find_element_by_xxx

    定位方式取舍# 唯一定位方式.多属性定位.层级+角标定位(离目标元素越近,相对定位越好) # 推荐用css selector(很少用递进层次的定位)# 什么时候用xpath呢? 当你定位元素时,必须要 ...

  7. selenium的定位方式

    1.selenium的定位方式 selenium有18种定位方式,8种单数,8种复数,2种父类 2.8种单数定位方式 from selenium import webdriverimport time ...

  8. css 定位position总结

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  9. selenium之css定位

    实在记不住,烂笔头就记一下吧. 一. 单一属性定位 1:type selector driver.find_element_by_css_selector('input') 2:id 定位 drive ...

随机推荐

  1. Java实现第九届蓝桥杯螺旋折线

    螺旋折线 题目描述 如图p1.pgn所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. 例如dis(0 ...

  2. OpenJudge - 2977:生理周期

    原题链接 总时间限制: 1000ms 内存限制: 65536kB 描述 人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天 ...

  3. 弄懂Java的自增变量

    首先我们来看一段代码: public static void main(String[] args){ int i = 1; i = i++; //第一行 int j = i++; //第二行 int ...

  4. springboot使用自定义异常

    sprinboot使用自定义注解 创建自定义异常类,继承RuntimeException public class MyException extends RuntimeException {   p ...

  5. EIGRP-14-EIGRP的命名模式

    从IOS 15.0(1)M版本开始,工程师可以在路由器上使用命名模式(Named Mode)配置EIGRP进程.按照IPv4和IPv6,通过AS号来配置EIGRP进程的做法称为经典模式(Classic ...

  6. LR字符串处理函数-lr_save_int

    int lr_save_int(int value,const char * param_name); value:要分配给参数的整数值.  param_name:参数的名称.  lr_save_in ...

  7. 附016.Kubernetes_v1.17.4高可用部署

    一 kubeadm介绍 1.1 概述 参考<附003.Kubeadm部署Kubernetes>. 1.2 kubeadm功能 参考<附003.Kubeadm部署Kubernetes& ...

  8. 3.kubernetes的CNI网络插件-Flannel

    目录 1.1.K8S的CNI网络插件-Flannel 1.1.1.集群规划 1.1.2.下载软件.解压.软链接 1.1.3.最终目录结构 1.1.4.拷贝证书 1.1.5.创建配置 1.1.6.创建启 ...

  9. js中each函数的用法

    官方说明: jQuery.each(object, [callback]) 概述 通用例遍方法,可用于例遍对象和数组. 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任 ...

  10. vue 生命周期:

    vue  生命周期: 1. beforeCreate()创建组件;        2. created() 创建完成;        3. beforeMounte() 组件被挂裁前;        ...