css元素定位

<style type="text/css">

body{

    margin: 15px;

    font-family: "Adobe 宋体 Std L";

    font-size:12px;

}

.father{

    background-color: black;

    border: 1px solid #111111;

    padding: 25px;

}

.son{

    padding: 10px;

    margin:5px;

    background-color: aliceblue;

    border:1px dashed;

    float:left;

}

.son2{

    padding: 5px;

    margin: 0px;

    background-color: #111111;

    border:1px dashed #111111;

}

</style>

<style type="text/css">

body{

    margin: 5px;

    font-family: "Adobe 宋体 Std L";

    font-size: 13px;

}

.block1{

    padding-left:10px;<!--列距-->

    margin-right:10px;

    float:left;<!--浮动在左边上层-->

}

.h3{

    background-color: aliceblue;;

    border: 1px dashed #233333;

    clear:left;<!--清除浮动-->

}

</style>

<style type="text/css">

#block{

    background-color: ];

    border:1px dashed #000000;

    padding: 10px;

    position:absolute;<!--绝对定位，脱离了父标签-->

    <!--position:relative<!--相对于自身原来的距离，在父块-->

    left:20px;<!--相对于页面body的距离-->

    top:40px;

}

</style>

<body>

<div id = "father">

    <div id = "block">absolute</div>

    <div id = "block1">relative</div>

</div>

</body>

z-index调整定位时重叠块的上下而为之，当块设置了position属性时，该值便可设置各块之间的重叠高低关系，默认值为0

<style type="text/css">

#block1{

    ... position: absolute;

    left: 20px;

    top:20px;

    z-index: 1;<!--高低值-->

}

#block2{

    ... position: absolute;

    left:10px;

    top:23px;

    z-index: 0;<!--高低值0-->

}

</style>

 

复习-css元素定位的更多相关文章

  1. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  2. 【WEB自动化】【第一节】【Xpath和CSS元素定位】

    目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...

  3. CSS元素定位6-10课

    <精通CSS.DIV网页样式与布局>视频6-10课总结图: 元素定位 (1)float:left/right; 左浮动:脱离普通文档流向左浮动(即向左对齐):float属性必须应用在块级元 ...

  4. CSS元素定位

    使用 CSS 选择器定位元素 CSS可以通过元素的id.class.标签(input)这三个常规属性直接定位到,而这三种编写方式,在HTML中编写style的时候,可以进行标识如: #su       ...

  5. css元素定位样式

    曾经写网页,学css整体上不难,但就是元素定位,始终一知半解,直到今天,本着实践出真知的理念,经过认真测试,总结出了如下结论. css 定位: positionstatic : 默认静止定位,元素在正 ...

  6. css选择器用法，使用css定位元素，css和xpath元素定位的区别

    css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...

  7. html 元素定位position-relative, absolute, fixed, static

    看到这个,你有什么想法? Difference between static and relative positioning 如果你能完全看明白,那几本上css 元素定位的东西基本都会了.本文也不用 ...

  8. python3+selenium3自动化1——元素定位

    1.selenium的webdriver提供了八种基本的元素定位方法 打开浏览器 driver = webdriver.Chrome() driver.get('https://www.baidu.c ...

  9. css元素position定位和z-index

    网页元素定位 1.注意点: 1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高.此时最好通过padding等来控制高度. 2)对于同一个元素,不要讲float ...

随机推荐

  1. [原]Django-issue(1)---postgresql数据库连接密码错误

    环境: Django==1.9.13 psycopg2==2.7.5 Python 3.6.5 postgresql 1.18.1 配置django的时候出现问题 检查setting,问题点:由于安装 ...

  2. VMPlayer Ubuntu 16.04 Copy and Paste with Host 主机与宿机之间的复制粘贴

    使用Ubuntu的虚拟机时如果不能主机之间进行复制粘粘,会非常非常的不方便,所以我们需要安装vmware tools,使用如下的代码(注意第二句一定要有,不然还是不能复制粘贴): sudo apt-g ...

  3. nginx_ssl安装

    Nginx的安装依赖于以下三个包,意思就是在安装Nginx之前首先必须安装一下的三个包,安装顺序为我写的顺序: c.1 SSL功能需要openssl库,下载地址:http://www.openssl. ...

  4. 关于c++深拷贝与浅拷贝

    首先看一段代码: #include<iostream> #include<cstring> #include<malloc.h> using namespace s ...

  5. PHP7.1安装xdebug

    一.前言1. Xdebug 简介Xdebug 是一个开放源代码的 PHP 程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况.当前最新版本为 Xdebug 2.5.0. ...

  6. jquery和js检测浏览器窗口尺寸和分辨率

    jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...

  7. 常用C++面试总结

    指定对齐值:#pragma pack(n),n=1,2,4,8,16改变系统的对齐系数struct和union都是由多个不同的数据类型成员组成, 但在任何同一时刻, union中只存放了一个被选中的成 ...

  8. UUID、GUID、SID、SUSID

    1. UUID: (Universally Unique Identifier) 通用唯一标识符, 是一个标识符标准用于软件架构,由开放软件基金会(OSF)作为分布式计算环境(DCE)的一部分而制作的 ...

  9. （二）juc线程高级特性——CountDownLatch / Callable / Lock

    5. CountDownLatch 闭锁 Java 5.0 在 java.util.concurrent 包中提供了多种并发容器类来改进同步容器的性能. CountDownLatch 一个同步辅助类, ...

  10. oracle日期格式化

    TO_CHAR(t.CAMERA_CREAT_TIME, 'YYYY-MM-DD HH24:MI:SS') as point_registerdate,TO_CHAR(t.CAMERA_MODIFY_ ...