元素类型

Posted 2020-11-28 wjsblog

一、元素类型的分类

根据css的显示，把html的标签分为了三大类型
  
            元素类型分类1： 
  块状元素
  内联元素（包含内联块元素）
  可变元素

           元素类型分类2：
  块状元素
  内联元素 
  内联块元素（css2.1）
                         争议：内联块元素 是自己属于一种元素类型      还是      属于内联元素类型？ 

  1、块状元素：（默认情况下）
   a、块状元素是独占一行，即使他的右边有很大的空间，也不会让后面的元素上来和他并排显示的。
   b、块状元素是可以直接定义自身的宽高的。
   c、严格遵循盒模型的显示规则的，即都可以应用padding、margin、border这些属性。
   d、块状元素一般是可以当做容器来使用，里面可以放文本，也可以放其他的块状元素和内联元素。（但是：p标签和h1-h6,他们也属于块状元素，但是他们的标签里面不能容那其他的块状元素包括自己本身也不可以。） 

             常见的块状元素：
  div -最常用的块级元素
  dl - 和dt-dd 搭配使用的块级元素
  form - 交互表单
  h1 -h6- 大标题
  hr - 水平分隔线
  ol – 有序列表
  p - 段落
  ul - 无序列表
  li
  fieldset - 表单字段集
  colgroup-col - 表单列分组元素
  table-tr  表格及行-单元格
  ......

 2、 内联元素（行内元素，内嵌元素）（默认情况下）
  a、像文本一样，自左向右一次排列。知道边缘或者碰到br标签时，才会折行。
  b、不能直接定义宽度和高度的。他们的宽高是以自身的内容的大小、多少来决定的。
  c、内联元素也遵循盒模型的显示规则，也可以设置padding、margin、border这些属性，但是部分元素在显示的时候会有特殊情况，会显示的不正确；
  d、补充：所有不是块状的可见元素，都可以称之为是内联元素。

 

 内联元素之间的空隙的解决方法
 1、让内联元素之间没有空格和回车
 2、给内联元素添加浮动属性，但是可能会影响后面的布局
 3、给父元素添加font-size:0;再给子元素添加回原本的font-size值即可。

        常见的内联元素：
  a –超链接（锚点）                              
  b - 粗体(不推荐)
  br - 换行                            
  i - 斜体
  em - 强调                            
  img - 图片                        
  input - 输入框              
  label - 表单标签                 
  span - 常用内联容器，定义文本内区块
  strong - 粗体强调
  sub - 下标  
  sup - 上标
  textarea - 多行文本输入框
  u - ins下划线
  select - 项目选择 
  ......

3、可变元素：根据上下文的关系，来决定当前元素是内联还是块状元素。（button）

二、元素类型的转换

display属性 ：盒子模型可通过display属性来改变默认的显示类型

      1）block：  元素类型为块状元素，（大部分的块状元素类型的display值都是block。）
           特点：他能让元素的类型转变成块状元素，从而拥有块状元素的特点。

      2）inline:   元素的类型为内联元素，（大不部分的内联元素的display值都是inline。）
           特点： 能让元素的类型转换成内联元素，从而拥有内联元素的特点。

      3）list-item:此元素会作为列表显示。(他是的li的元素类型的值，加了display：list-item以后，会让元素转换成列表类型) li

      4）none： 隐藏元素（让元素不显示在浏览器里）

      5）inline-block：行内块元素 (input img )
           特点：极具有块状元素的特点，又有内联元素的特点
           特点：inline-block  支持 使用垂直对齐的属性/*vertical-align: top/middle/bottom/baseline*/
         

  注：行内块元素，也是属于内联元素。

     内联元素添加了浮动之后，会隐性转换元素类型为块元素，可以设置宽高。
     如果是块状添加浮动之后，块元素的宽高在没有设置的前提下，会跟内容一样大。

三、display属性应用

通过display：inline-block；和vertical-align：middle；实现元素垂直居中的方法：
 方法一：
  1、给他的父元素text-align:center;
  2、先设置当前元素的元素类型设置为inline-block和vertical-align: middle;
  3、给他添加vertical-align: middle;  让他实现垂直居中对齐；
  4、添加“标尺”，也就是给他添加一个同辈的元素并且和你这个p标签之间是不能有空格和回车的，在给设置这个元素的类型为vertical-align:middle;width:0;height:100%;display:inline-block
 

 方法二：
  结构：

<div class="boxWrap">
   <div class="box2">
            <p>今天要吃饺子和元宵，饺子是龙耳 ，元宵就是龙蛋，面就是龙须，剃龙头今天要吃饺子和元宵，饺子是龙耳 ，元宵就是龙蛋</p>
   </div>
</div>
   
  1、给boxWrap 添加margin：0 auto   ;实现水平居中
  2、给box2  转成display：table-cell;使其元素类型转为跟td 一样的元素类型，拥有td一样的特性，td不支持margin，并且可以直接应用vertical-align属性。
  3、再给box2添加vertical-align: middle;，让p实现垂直居中效果
  4、如果再让p水平居中的话，可以给box2在加上text-align:center；同时p标签的元素类型转换为display：inline-block;

       行内块元素：属于内联元素里的元素类型，它是一种特殊的内联元素。

四、置换与非置换元素

代入：

input也是内联元素，但是他可以直接设置宽高以及padding-top/bottom,margin-top/bottom。原因是因为他是特殊的内联元素，他的元素类型是inline-block；

img也是内联元素，但是img也可以直接设置这些值，我们把他称之为置换元素。（img的元素类型是inline）

置换元素：img、input、select......

 

 

 

置换元素（替换元素）：浏览器根据元素的标签和属性，来决定元素具体显示的内容。  img、input
非置换元素（不可替换元素）：将内容直接告诉浏览器，将其显示出来。