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. Codeforces 920F - SUM and REPLACE

    920F - SUM and REPLACE 思路1: 线段树(982 ms) 每个点最多更新6次 代码: #include<bits/stdc++.h> using namespace ...

  2. js怎么把一个数组里面的值作为一个属性添加到另一数组包含的对象里(小程序)

    上面这个需求我说的似乎不太明白,之前也是没有碰到过,也是最近在搞小程序,涉及到小程序前后台数据交互,展示的部分!!不太明白没关系等会我给大家举个例子,就明白了说起来有点拗口,一看就明白了,其实如果是原 ...

  3. lua --- 逻辑运算符小结

    lua中的逻辑运算符,认为只有false.nil为假,其他的都为真(包括0.空串) a and b    -- 如果a为false,则返回a,否则返回b a or b   -- 如果a为true,则返 ...

  4. Linux中apt与apt-get命令的区别与解释

    2019-01-15 14:35:39 随着 apt install package 命令的使用频率和普遍性逐步超过 apt-get install package,越来越多的其它 Linux 发行版 ...

  5. 拒绝采样 Rejection Sampling

    2018-12-09 16:40:30 一.使用Rand7()来生成Rand10() 问题描述: 问题求解: 这个问题字节跳动算法岗面试有问到类似的,有rand6,求rand8,我想了好久,最后给了一 ...

  6. Interval 间隔问题

    2018-09-07 09:03:14 一.Merge Intervals 问题描述: 问题求解: public List<Interval> merge(List<Interval ...

  7. 练习:将值是null的数据删除掉(剔除):com.fasterxml.jackson.annotation.JsonInclude;包

    练习:将值是null的数据删除掉(剔除):com.fasterxml.jackson.annotation.JsonInclude;包 例如,有数据是null,不想展示 { "statusC ...

  8. idea ----> 学习笔记

    使用的是社区版的idea 1. 2.关键点之二:配置artifacts.参照 <使用IDEA2017创建java web+Maven项目>http://blog.csdn.net/love ...

  9. Python实现Plugin(插件化开发)

    https://www.cnblogs.com/terencezhou/p/10276167.html

  10. LeetCode--429--N叉树的层序遍历

    问题描述: 给定一个N叉树,返回其节点值的层序遍历. (即从左到右,逐层遍历). 例如,给定一个 3叉树 : 返回其层序遍历: [ [1], [3,2,4], [5,6] ] 说明: 树的深度不会超过 ...