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. spring事务解析

    1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...

  2. MyCat（一） - 初体验

    前提: 1.安装JDK 2.安装MySQL 3.搭建了MySQL主从 1.下载MyCat,官网:http://www.mycat.io/ wget http://dl.mycat.io/1.6-REL ...

  3. monit配置文件

    监控模式:(MONITRING MODE) Monit支持三种监控模式, active--Monitj监控一个服务,为了防止一系列问题,Monit会执行以及发送警报,停止,启动,重启,这是一个缺省的模 ...

  4. [Sublime] Sublime Text 3126 lincense

    —– BEGIN LICENSE —– Michael Barnes Single User License EA7E- 8A353C41 872A0D5C DF9B2950 AFF6F667 C45 ...

  5. PowerBI与Visio

    前言 如何在Power BI中使用Visio, 刚好最近微软推出了适用于Power BI 的 Visio自定义可视化对象预览,分享给大家. 我们先看一下效果:    通过自定义可视化对象,将Visio ...

  6. 11.13git和redis

    2018-11-13 15:46:40 git完结 redis完结, 还剩一点路飞项目!!!做完回学校!!!! 越努力,越幸运!永远不要高估自己! 关于 redis具体使用可以参考: http://w ...

  7. 11.5vue(5)完结

    2018-11-5 19:03:50 老师用了五天把vue昨晚,前后端分离!就是 后端给前端接口,前端用vue,建个项目,然后用vuex接受数据!全在前端显示 后端不涉及任何前端页面!前端用vue把页 ...

  8. Nestjs 增加全局前缀

    文档 const app = await NestFactory.create(AppModule); app.setGlobalPrefix('v1'); // http://localhost:5 ...

  9. 性能测试yslow

    YSlow YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会 ...

  10. HTTP状态码--含义

    以下是HTTP状态码(HTTP Status Code)及其解释 1xx(临时响应) (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. (切换协议) 请 ...