HTML元素定位

一切皆为框

div、h1 或 p 元素常常被称为块级元素(block element)。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”(inline element),这是因为它们的内容显示在行中,即“行内框”。

块元素的盒子模型(box model of block element)

块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width),高(height)和边距(margin,
padding),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

行内元素行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有a,
em ,strong等。

行的块元素:如果我们即想让一个元素可以设置宽度高度,又想让它以行内形式显示,这时我们可以设置display的值为inline-block.

块级元素转行内元素

display:inline;

行内元素转块级元素

display:block;

元素转行内块元素(inline-block)

display:inline-block;

参考:

http://www.w3school.com.cn/css/css_boxmodel.asp

http://www.jb51.net/css/68729.html

时间: 2024-12-03 06:10:24

HTML元素定位的相关文章

CSS教程——元素定位

css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example:#div-1 { position:static;}2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example:#div-1 { position:r

css元素定位

css 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 { position:static;} 2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px: example: #div-1 { position

一个JavaScript操作元素定位元素的实例

 操作元素定位元素,用js来实现是个不错的选择,下面有个示例,需要的朋友可以看看 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <!DOCTYPE html>  <h

java selenium元素定位大全_java

页面元素定位是自动化中最重要的事情, selenium Webdriver 提供了很多种元素定位的方法.  测试人员应该熟练掌握各种定位方法. 使用最简单,最稳定的定位方法. 阅读目录 自动化测试步骤 定位方法大全 如何定位 通过ID查找元素: By.id() 通过Name查找元素:By.name() 通过TagName查找元素: By.tagName() 通过ClassName 查找元素 By.className 通过LinkText查找元素 By.linkText(); 通过PartialL

Selenium webdriver 学习总结-元素定位

webdriver提供了丰富的API,有多种定位策略:id,name,css选择器,xpath等,其中css选择器定位元素效率相比xpath要高些,使用id,name属性定位元素是最可靠,效率最高的一种办法. 1.工具选择:在我们开发测试脚本的过程中各个浏览器给我们也提供了方便定位元素的工具,我比较喜欢使用firefox的firebug工具,也是目前很多开发测试人员比较热衷的选择,原因是firefox是唯一能够集成selenium IDE的浏览器,并且firebug给用户提供了丰富的扩展组件,我

CSS中HTML元素定位Position参数可选值详解

position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 语法: position : static | absolute | fixed | relative 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" static 元

不得不说--自动化测试元素定位与用例设计

  关于自动化测试,经常被问到元素的定位 与 如何设计用例. 很多时间我也帮不了你解决实际的问题,只能从个人脚本谈谈如何看待这些问题.   不得不说之元素定位   虽然,本章写了十几篇文章来讲元素的定位与操作,对于碰到的一些常见功能,如何通过技巧来定位它们,但是在实际的自动化脚本开发中,不管是新手还是具有一定经验的老手,我们面临最多的问题仍然是元素的定位问题. 有时间元素定位非常简单,例如,我们只要知道这个元素有的id和name 就可以轻松的来定位到它:有时间元素的定位却非常的令人非常头疼,尽管

css元素定位_CSS/HTML

css元素定位 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example:#div-1 { position:static;} 2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px: example:#div-1 { positi

jQuery实现ToolTip元素定位显示功能示例_jquery

本文实例讲述了jQuery实现ToolTip元素定位显示功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

一个JavaScript操作元素定位元素的实例_javascript技巧

操作元素定位元素,用js来实现是个不错的选择,下面有个示例,需要的朋友可以看看 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-操作元素定位元素</title> <style> div#