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. 22状态模式State

    一.什么是状态模式 State模式也叫状态模式,是行为设计模式的 一种.State模式允许通过改变对象的内部状态 而改变对象的行为,这个对象表现得就好像修改 了它的类一样. 二.状态模式的应用场景 状 ...

  2. Nessus中文报告自动化脚本

    前言 Nessus扫描完成,总要花挺多时间去整理报告,为此写了一个小脚本,用于自动化生成中文漏洞报告. 解析导出的html报告,自动翻译成中文,并提供修复建议,减少整理报告的时间,提升工作效率. gi ...

  3. python使用requests发送application/json报文数据

    def client_post_jsondata_requests(request_url,requestJSONdata): #功能说明:发送json请求报文到指定的地址并获取请求响应报文 #输入参 ...

  4. 恒生UFX交易接口基本介绍说明

    1.恒生UFT和UFX有什么区别? UFT是一个极速交易系统,UFX是一个统一接入系统.交易系统很显然是可以进行股票交易的,UFX是所有后台交易系统的接入系统,不管后台是什么样子的交易系统都是可以通过 ...

  5. 安装redis时Newer version of jemalloc required错误解决

    问题: [root@localhost redis-4.0.0]# make cd src && make allmake[1]: Entering directory `/root/ ...

  6. iOS WebView中视频横屏播放返回导航栏在状态栏下面

    iOS9以上系统横屏播放UIWebView中的视频返回后会出现以下问题:1.如图,UIWebView中包含一个视频:   1 2.播放web内容中的视频,并横屏观看:   2 3.直接在横屏状态下返回 ...

  7. git使用——推送本地文件到远程仓库

    捣鼓了一下午之后总结如下:   1.首先可以照着这个链接里面博主给出的详细方法进行操作和配置: http://www.open-open.com/lib/view/open1454507333214. ...

  8. mysql数据库转成oracle踩过的坑

    1.使用count这种组函数,那么必须配合group by使用,获取的字段要么出现在组函数内要么出现在group by中2.oracle使用union不仅要字段名一致并且数据类型也要一致3.REGEX ...

  9. 七牛免费SSL证书申请全流程

    购买证书 在七牛ssl 首页点击购买 购买限免证书 补全订单信息 免费证书,随意填写,问题不大 购买成功,查看订单详情,获取 TXT 值信息 添加 DNS TXT 验证 根据上一步,查看证书订单详情, ...

  10. __super:: 使用

    它会调用 基类的函数方法实现. __super::Close(); __super::Find();