07-元素显示模式

描述

• 作用：网页的标签非常多，在不同的地方会用到不同类型的标签。了解它们的特点可以更好的布局网页。

• 元素显示模式就是标签（元素）以什么方式进行显示。

• HTML一般分为块元素和行内元素两种类型

一、块元素

• 常见的块元素有<h1>-<h6>,<p>,<ul>,<li>,<ol>,<div>等等，

特点

• 独占一行

• 高度、宽度、外边距以及内边距都可以控制

• 宽度默认是容器（父元素）的100%，高度由内容撑开

• 是一个容器及盒子，里面可以放行内或者块级元素

注意

• 文字类的元素内不能使用块级元素（如p标签和h标签）

二、行内元素（内联元素）

• 常见的行内快有<a>,<strong>,<b>,<em>,<i>,<span>等。其中<span>标签是最典型的行内元素。

描述

• 内联元素设置高和宽不起作用

• 内联元素设置水平内边距起作用，而且影响布局

• 内联元素设置垂直内边距起作用，但是不影响布局，

  • 因为行内元素字的位置是固定不变的，所以设置上内边距的时候他也会跑到下面来和设置的下内边距和并，并且不会在垂直方向上挤走其他的盒子，而是以覆盖的方式显示

• 内联元素设置左右边框起作用，而且影响布局

• 内联元素设置上下边框起作用，而且不影响布局

• 影响和不影响布局区分：影不影响其他元素的位置也就是看其他元素的位置变不变化，

• 内联元素设置水平外边距起作用，而且影响布局

• 内联元素设置垂直外边距不起作用

特点

• 相邻行内元素在一行上每一行上可以显示多个

• 宽高由内容撑开，直接设置是无效的。

• 默认宽高就是它本身内容的宽度

• 行内元素只能容纳文本或者其他行内元素

注意

• 链接里面不能在放链接

• 特殊情况链接<a>里面可以放块级元素，但是给<a>转化一下块级模式最安全

• (可以设置行高)

行内块元素（行内元素的一种）

• 在行内元素中的特殊的标准——</img>,</input>,<td>,他们同时具有块元素和行内元素的特点。被称为行内快元素

特点

• 和相邻的行内元素（行内块）可以在一行上显示，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）

• 默认宽度就是它本身内容的宽度（行内元素特点）

• 高度，行高，宽度，外边距以及内边距都可以控制（块级元素特点）

元素显示模式的转换

特殊情况下，我么需要元素模式的转换，简单理解:一个模式需要另外一种模式的特性。不如想增加链接<a>的触发范围（设置宽高，转换为行内块）

• 转换为块元素：display:block;

• 转换为行内元素：display:inline;

• 转换为行内块：display:inline-block;

• display:n,显示、展示

display属性

• (1)diaplay属性可以设置元素的类型

• 可选值

  • inline:将元素设置为内联元素（行内元素），widht和height失效，内容大小即为元素大小

  • block:将元素设置为块级元素，可设置宽和高，独占一行

  • inline-block:将元素设置为行内块元素，可以设置高和宽，不独占一行，在一行显示

  • none：将元素设置为不显示并且位置也不占用。隐藏元素

元素的显示隐藏

描述：

• 元素的显示与隐藏，类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

• 本质，让一个元素在页面中隐藏或显示出来

（1）、方法一

display属性：用于设置一个元素应如何显示

• display：none；隐藏对象

• display：block；除了转换块级元素之外，同时还有显示元素的意思

• display隐藏元素后，不在占有原来的位置（脱离文档流），应用广泛

（2）、方法二

visibilty属性：用于指定一个元素应可见还是隐藏

• visibility:visible;元素可视

• visibility:hidden;元素隐藏

• visibility隐藏元素后，继续占有原来的位置

（3)、方法三

overflow溢出：默认子元素在父元素中，如果子元素的大小超过了父元素，则默认在父元素之外显示，超出的部分称为“溢出”

• 溢出的内容可以通过overflow属性进行显示设置

• 可选值

  • visible：溢出部分全部显示，默认值，不剪切内容也不添加滚动条。

  • hidden：隐藏溢出部分内容，不显示超过对象尺寸的内容

  • scroll：溢出部分使用滚动条显示，总是显示滚动条

  • auto:溢出部分使用滚动条，水平垂直都能使用，根据情况自动显示滚动条