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. axios设置application/x-www-form-urlencoded

    this.$axios({ method: 'post', url: 'http://www.17huo.com/tusou/deeplorSearch.html', headers: { 'Cont ...

  2. vue2.0 在微信端如何使用本地IP访问项目

    我们会遇到这样的需求,在PC端开发vue脚手架项目,希望在微信端随时浏览页面(如果打包再发布到服务器又太麻烦),怎么办? 思路很简单:保证手机和电脑在同一个IP下,用同一个IP访问项目,这样就可以了: ...

  3. 程序中的@Override是什么意思？

    @Override是Java5的元数据,自动加上去的一个标志,告诉你说下面这个方法是从父类/接口 继承过来的,需要你重写一次,这样就可以方便你阅读,也不怕会忘记 @Override是伪代码,表示重写( ...

  4. [原]Jenkins(二十) jenkins再出发之Error: Opening Robot Framework log failed

    错误缘由:使用plugin [public robot framework test results] 生成的HTML文件都无法正常打开.   解决方案: Connect on your jenkin ...

  5. 下载m3u8视频

    分两种情况 同时支持m3u8和mp4文件 某些视频同时支持m3u8和mp4视频文件,将m3u8改成mp4后直接: wget -c http://www.xxx.com/xxxx.mp4 只有m3u8视 ...

  6. vs2008 使用百度编辑器

    准备工作 百度编辑器官方下载,并将文件放到项目根目录下. 因为vs2008 只到Framework 3.5,所以需要将4.0的东西去掉. 1)下载.net framework 3.5版的 Newton ...

  7. rabbitmq - java client lib一二事

    由于不可抗因素, 需要给对接方撸一个client的demo.基于比较老的jdk. 所幸找到了这里:http://www.rabbitmq.com/releases/rabbitmq-java-clie ...

  8. nginx_ssl证书双向认证以及负载均衡配置

    #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...

  9. create database link

    如果本地的tnsnames.ora中未建立数据库连接,那么就是用1,否则就是用2 1:create database link geelyin96 connect to geelyin identif ...

  10. 算法基础_递归_给定m个A，n个B，一共有多少种排列

    问题描述: 给定m个A,n个B,一共有多少种排列 解题源代码: /** * 给定m个A,n个B,问一共有多少种排列 * @author Administrator * */ public class ...