css的元素显示模式

一.什么是元素显示模式

作用：网页的标签非常多，不同地方会用到不同范例的标签，相识他们的特点可以更好的结构我们的网页。
 元素显示模式就是元素(标签)以什么方式举行显示，好比<div>自己占一行，好比一行可以放多个
<span>。
html元素可以分为块元素和行内元素。
二.块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素。
特点

• 自己独占一行
  
• 高度、宽度、外边距以及内边距都可以控制。
  
• 宽度默认是容器(父级宽度)的百分百。
  
• 是一个容器以及盒子，内里可以放行内大概块级元素。
  

2.1独占一行

2.2设置高度宽度 

 2.3宽度默认

当你没有设置宽度时，宽度默认与父级容器这里就是body一样大，所以占满整个屏幕。

2.4可以放行内元素也可以是块元素 

块元素是一个大的盒子，内里可以装其他元素
留意 

• 文字类的元素内不能利用块级元素
  
• <p>标签重要用于存放文字，因此<p>内里 不能放块级元素，特殊是不能放<div>
  
• 同理，<h1>~<h6>等都是文字类块级标签，内里也不能放其他块级元素
  

例子

 

看着没啥问题，但是打开检查一看就出现了问题

 三.行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<span>等，其中<span>标签是最具典型的行内元素，有的地方也将行内元素称为内联元素。
3.1相邻行内元素在一行

3.2高宽直接无效

3.3默认宽度就是它自己内容的宽度 

 

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

留意

•  链接内里不能再放链接
  
• 特殊环境链接<a>内里可以放块级元素，但是<a>转换一下块级模式最安全
  

四.行内块元素

在行元素内有几个特殊的标签——<img>、<input>、<td>,他们同时具有块元素和行内元素的特点，有些资料称为行内块元素
1.和相邻元素在一行但有空隙(行内元素特点) 

 2.默认宽度就是它自己内容的宽度(行内元素特点)

3.高度，行高，外边距以及内边距可控制(块级元素特点)

五.元素显示模式的转换

5.1转换为块元素

特殊环境下，我们需要元素模式的转换，简单明白:一个模式的元素需要别的一种模式的特性
好比想要增加链接<a>的触发范围。

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

由于我们知道a链接是行内元素，但有时候想要增加用户的点击范围就需要block。
他便具有了块级元素的特点。 
此时便可以给他设置宽高

 

5.2转换为行内元素

display: inline
例子

转换

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。