1. 块元素block

  • 独占一行的元素

    • 一般使用块元素包含内联元素,用作页面布局
    • <a> 标签可以包含任何除了a标签以外的元素
    • <p> 标签不能包含块元素
    • h1... ...h6
    • <hr />
    • <center></center>
    • <div> 标签不含任何语义,被用于页面布局

2. 内联元素 inline

行内元素        只占自身大小的位置,不会独占一行。通常用于选中文本,设置样式

  • 内容区    不能设置 width 和 height ,设置了没用。
  • 水平方向 内边距,可以设置,会影响布局,正常
  • 垂直方向 内边距,可以设置,不会影响布局,会覆盖原位置其他元素
  • 水平方向的 边框,可以设置,会影响布局,正常
  • 垂直方向的 边框,可以设置,不会影响布局,会覆盖原位置其他元素
  • 水平方向的 外边距,可以设置,且不会重叠,而是求和增加
  • 垂直方向的 外边距不能设置
    • <span></span> 无任何语义,用于选中行内内容,进行样式设置
    • <img></img>
    • <a></a>
    • <iframe></iframe>

3. 行内块元素 inline-block

既有块元素特点,又有内联元素的特点。

既可以设置 width 和 height,又不会独占一行。


值得注意的是:

在 HTML5 中,已经不使用这两个概念了,而是用了更复杂的

__x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block的更多相关文章

  1. __x__(8)0906第三天__乱码问题

    需要知道: 计算机只认 0 1 任何内容,计算机都会以 0 1 去存储 所以 0 1 与内容的编码方式/解码方式需要依照一定的规则,实现 0 1 与内容之间的转换. 字符集:一定的规则,由编码/解码采 ...

  2. __x__(9)0906第三天__常见的标签

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. __x__(10)0906第三天__字符实体(转义字符)

    实体:也叫转义字符,在网页中,一些类似“大于号”和“小于号”这样的字符,无法直接使用,需要用特殊的字符串来表示. 实体语法: “&实体名字;” 或者 “&实体编号;” 注意: 最好使用 ...

  4. __x__(11)0906第三天__图片标签

    图片标签  <img src="images/1.gif" alt="冰河世纪的大松鼠" width="80%" /> Hell ...

  5. __x__(12)0906第三天__<meta>标签

    <meta name=" " content=" " />标签常用功能: 指定浏览器对当前页面的字符集: <!doctype html> ...

  6. __x__(14)0906第三天__<iframe> 内联框架 引入有一个外部html页面

    在现实开发中,不推荐使用内联框架,因为<iframe></iframe>中的内容不会被搜索引擎检索. 在特殊情况中,如内网项目,不用放在互联网上时,可以使用<iframe ...

  7. __x__(15)0906第三天__超链接

    HTML5 中的新属性. 属性 值 描述 charset char_encoding HTML5 中不支持.规定被链接文档的字符集. coords coordinates HTML5 中不支持.规定链 ...

  8. __x__(16)0906第三天__层叠样式表CSS简介

    层叠样式表CSS Cascading Style Sheets 用来为网页创建样式表,通过样式表对网页进行装饰. 所谓层叠,就是将网页想象成一层一层的结构,层次高的将覆盖层次低的. CSS可以为网页的 ...

  9. html5 区块与内联div 与span html块级元素

    HTML <div> 和 <span> HTML 列表 HTML 类 可以通过 <div> 和 <span> 将 HTML 元素组合起来. HTML 块 ...

随机推荐

  1. EF CodeFirst系列(6)---配置1对1,1对多,多对多关系

    这一节介绍EF CodeFirst模式中的1对0/1,1对多,多对多关系的配置,只有梳理清楚实体间的关系,才能进行愉快的开发,因此这节虽然很简单但是还是记录了一下. 1. 1对0/1关系配置 1. 通 ...

  2. SpringBoot(七):SpringBoot整合Swagger2

    原文地址:https://blog.csdn.net/saytime/article/details/74937664 手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文 ...

  3. 液晶流在齐次 Besov 空间中的正则性准则

    在 [Zhang, Zujin. Regularity criteria for the three dimensional Ericksen–Leslie system in homogeneous ...

  4. 分享一个jsonp劫持造成的新浪某社区CSRF蠕虫

    最近jsonp很火,实话说已经是被玩烂了的,只是一直没有受到大家的重视.正好在上个月,我挖过一个由于jsonp造成的新浪某社区CSRF,当时是为了准备一篇文章,之后这篇文章也会拿出来分享. 因为新浪已 ...

  5. python常用校验方法总结

    0x00 校验一个字符串是否是合法IP地址 ipv4举例:利用正则表达式来匹配 def checkip(ip): p = re.compile('^((25[0-5]|2[0-4]\d|[01]?\d ...

  6. ubuntu 16.04 安装 Mask_RCNN 遇到的问题集锦

    源码网页(Mask R-CNN for object detection and instance segmentation on Keras and TensorFlow): https://git ...

  7. 前端基础之jQuery

    JavaScript和jQuery的区别 JavaScript是一门编程语言,我们用它来编写客户端浏览器脚本 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化java ...

  8. tomcat 优化建议

    下面给出的是tomcat的优化建议,如果不同意见请留言. 上配置: tomcat jmx配置访问:修改catalina.sh CATALINA_OPTS="$CATALINA_OPTS -D ...

  9. 干货分享:让你分分钟学会 javascript 闭包(转)

    闭包,是javascript中独有的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述,直 ...

  10. tomcat日志格式中的含义

    %a - 远程IP地址 %A - 本地IP地址 %b - 发送的字节数,不包括HTTP头,或“ - ”如果没有发送字节 %B - 发送的字节数,不包括HTTP头 %h - 远程主机名 %H - 请求协 ...