1.行级元素/内联元素 inline

特点:

1)内容决定元素所占位置(所占大小),不独占一行

2)元素之间存在默认大小的间隙

3)不可以通过CSS改变宽高

span strong em a del

2.块级元素 block

特点:

1)独占一行

2)可以通过CSS改变宽高

div p ul li ol form address

3.行级块元素 inline-block

特点:

1)内容决定大小

2)可以通过CSS改变宽高

3)不独占一行

4、行、块、行快之间关系

行、块、行快级标签的由默认属性决定,也可以修改

凡是带有inline的元素,都有文字属性,之间会有HTML默认的空格

sapn{

display:inline;    //原来默认属性

display:block;    //变为block属性,行变块

}

div{

display:block;    //原来默认属性

display:inline;    //变为inline属性,块变行

}

img{

display:inline-block;

}

5、图片拼接,处理图片之间的空格

注意:凡是带有inline的元素,都有文字属性,之间会有HTML默认的空格

img为行快标签,一定带有inline属性,内容之间必定会有HTNL默认空格

HML代码

<body>

<img src="fy.jpg">

<img src="fy.jpg">

<img src="fy.jpg">

<img src="fy.jpg">

</body>

方法一:不正确,当页面压缩时会改变,不准

img{

border:0;

width:100px;

height:200px;

    margin-left:-6px;    //元素与元素之间的空隙

}

方法二:

HTML(六)--总结的更多相关文章

  1. 如何一步一步用DDD设计一个电商网站(六)—— 给购物车加点料,集成售价上下文

    阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的 ...

  2. MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息

    MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...

  3. 【原】AFNetworking源码阅读(六)

    [原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...

  4. CRL快速开发框架系列教程六(分布式缓存解决方案)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  5. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  6. 我的MYSQL学习心得(六) 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  7. 我的MYSQL学习心得(十六) 优化

    我的MYSQL学习心得(十六) 优化 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  8. ASP.NET MVC Model绑定(六)

    ASP.NET MVC Model绑定(六) 前言 前面的篇幅对于IValueProvider的使用做个基础的示例讲解,但是没并没有对 IValueProvider类型的实现做详细的介绍,然而MVC框 ...

  9. redis成长之路——(六)

    redis配置 为了码农在代码上只关心业务以及代码上的统一性,wenli.drive.redis内部使用配置来完成那些不同的场景,也就是说随便填填配置就能适应不同的场景! 当然配置多了码农也会受不了, ...

  10. SQL Server-聚焦EXISTS AND IN性能分析(十六)

    前言 前面我们学习了NOT EXISTS和NOT IN的比较,当然少不了EXISTS和IN的比较,所以本节我们来学习EXISTS和IN的比较,简短的内容,深入的理解,Always to review ...

随机推荐

  1. Python -- jpype JVM的第三方库使用

    Python -- jpype 安装 jpype 如图:直接执行 命令:pip install jpype 可见失败,提示没有版本信息 可以使用 pip  search jpype 查看相关版本信息 ...

  2. iterm2 + zsh + oh-my-zsh +autojump

    iterm2  + zsh  +  oh-my-zsh +autojump 升级你的命令行工具,这个我折腾了好久,才明白了各个之间的关系. 1.先下载一个item2 首先你需要下一个iterm2,不要 ...

  3. 第 7 章 多主机管理 - 046 - 创建 Machine

    创建 Machine Machine 就是运行 docker daemon 的主机. “创建 Machine” 指的就是在 host 上安装和部署 docker. 创建第一个 machine: hos ...

  4. 在dos输入pybot显示不是内部命令,或者显示chromedriver.exe要加入到path中?

    在dos输入pybot显示不是内部命令,或者显示chromedriver.exe要加入到path中? 一直使用robot framework编写脚本,结果有一天输入 pybot XXXX.robot ...

  5. compile FFMPEG under windows

    这个文章应该算是中文版最好的了.但是还有一些需要修正. 特别是winsock2的处理 win10 msys2 vs2015 ffmpeg3.2.2 编译 这个英文版的才是最好的 Building ff ...

  6. HTML第八章总结

    Expanding your vocabulary 总述 在上一章节介绍了 CSS 的基础之后,这一章节更加具体地展开关于 CSS 的各种 rules 能够达成的效果.比如 字体:font-famil ...

  7. Django的缓存

    由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显, 最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中, ...

  8. vue开发移动端项目 过渡动画问题

     App.vue:  <div id="app"> <div class="content"> <transition :name ...

  9. 字符串加密解密(Base64)

    var Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwx ...

  10. .NET 高效开发之不可错过的实用工具(第一的当然是ReSharper插件)

    工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节 ...