一切皆为框

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML元素定位的更多相关文章

  1. selenium元素定位篇

    Selenium webdriver是完全模拟用户在对浏览器进行操作,所有用户都是在页面进行的单击.双击.输入.滚动等操作,而webdriver也是一样,所以需要我们指定元素让webdriver进行单 ...

  2. Uiautomator--Uiselector元素定位

    一.UiSelector作用 按照一定的条件(例如控件的text值,资源id),定位界面上的元素.UiSelector对象的最终目的是去构造一个UiObject对象. 二.元素定位 1.根据text定 ...

  3. selenium使用笔记(三)——元素定位

    selenium进行自动化测试的一个很重要的东西那就是元素定位,如果元素都没法定位就无法操作它,也就无法进行自动化测试了.网上对于元素定位有很多的介绍,很详细很详细的,但是依然有很多新手总是会遇到无法 ...

  4. java selenium (五) 元素定位大全

    页面元素定位是自动化中最重要的事情, selenium Webdriver 提供了很多种元素定位的方法.  测试人员应该熟练掌握各种定位方法. 使用最简单,最稳定的定位方法. 阅读目录 自动化测试步骤 ...

  5. CSS元素定位6-10课

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

  6. python学习之——selenium元素定位

    web自动化测试按步骤拆分,可以分为四步操作:定位元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告. 其中定位元素尤为关键,此篇是使用webdriver通过页面各个 ...

  7. python + selenium相关事件和元素定位

    女友由于工作上的失误,将公司RDM中的某一字段的2000条数据给删除了.....就算是重新添加字段,但是与其他数据的关联性已经不在了.由于每天的数据修改量大,有关部门不愿意恢复数据库,因此只能一条条的 ...

  8. Selenium定位一 --单个元素定位方法

    Selenium-Webdriver 提供了强大的元素定位方法,支持以下三种方法. 单个对象的定位方法 多个对象的定位方法 层级定位 定位单个元素在定位单个元素时,selenium-webdriver ...

  9. Selenium2+python自动化6-八种元素元素定位(Firebug和firepath)

    前言 自动化只要掌握四步操作:获取元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇主要讲如何用firefox辅助工具进行元素定位. 元素定位在这四个环节中是至 ...

  10. Selenium Webdriver元素定位的八种常用方式

    楼主原创,欢迎学习和交流,码字不容易,转载请注明出处,谢谢. 在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素 ...

随机推荐

  1. compiler related

    1. 词法分析 词法分析器根据词法规则识别出源程序中的各个记号(token),每个记号代表一类单词(lexeme).源程序中常见的记号可以归为几大类:关键字.标识符.字面量和特殊符号.词法分析器的输入 ...

  2. mysql数据库存放位置

    在mysql 命令行里执行 show variables like '%datadir%';

  3. Docker(八):私有仓库

    有时候使用Docker Hub这样的公共仓库可能不太方便,用户可以创建一个本地仓库供私人使用. 在安装了Docker之后,可以获取官方的registry镜像来运行,docker-registry是官方 ...

  4. 组合模式Composite Pattern(转)

    什么是组合模式呢?简单来说组合模式就是将对象合成树形结构以表示“部分整体”的层次结构,组合模式使用户对单个对象和组合对象使用具有一致性. 组合模式(Composite Pattern)有时候又叫部分- ...

  5. 基于c语言中调试工具的用法汇总(不包含gdb)【转】

    转自:http://www.jb51.net/article/36829.htm 是不是只有编译的时候才知道程序写了错误?有没有在未编译的时候就让机器帮你检查错误的工具呢? 答案是:有!! splin ...

  6. mdev的基本工作原理【转】

    转自:http://www.cnblogs.com/hnrainll/archive/2011/06/10/2077435.html 分析过mdev(udev的BusyBox简化版)源码的都知道mde ...

  7. hdu 2739(尺取法)

    Sum of Consecutive Prime Numbers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 22876 ...

  8. 爬虫学习笔记(六)PyQuery模块

    PyQuery模块也是一个解析html的一个模块,它和Beautiful Soup用起来差不多,它是jquery实现的,和jquery语法差不多,会用jquery的人用起来就比较方便了. Pyquer ...

  9. HDU 1060 Leftmost Digit【log10/求N^N的最高位数字是多少】

    Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  10. centos7最新 mysq5.6 安装

    安装教程  1.下载mysql的repo源   wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 可能遇见的问题: ...