HTML+CSS学习Day08笔记

Day08笔记

一、元素类型

1、css把html标记根据不同的特性划分成了三个大的类型，分别是：块级、内联、内联块元素

2、元素类型特点：

   =>块级元素（block）：独占一行，自上而下排列，可以设置宽和高，一般作为其他元素的容器
   
   =>内联元素（inline）：横向排列，不能设置宽和高
   
   =>内联块元素（inline-block）：横向排列，可以设置宽和高
   
   =>注意点：内联和内联块元素在代码排列中，如果对标记进行换行操作，标记和标记之间默认有间隙

二、元素类型演变：

1、最早的时候元素类型从大的方面划分只有两类，分别是块级和内联元素（内联和内联块统称为内联--行内元素）

2、后面css出现了一个类型叫做inline-block，所以才把元素类型又划分成三个类型，分别是：块级、内联、内联块元素

3、有人把元素类型又重新划分，不是根据类型划分的，根据元素默认带有的样式划分的，分别是：置换元素和非置换元素

   =>置换元素指的是html标记具有css格式化以外的样式，没有通过css设置样式标记本身就具有的样式。置换元素有：input、button、select、textarea、img等等

   =>非置换元素指的是除了置换元素以外的其他html标记

三、元素类型注意事项

1、p标记不能包含块级元素

2、margin和padding的上下值对于内联元素使用上有问题，margin上下值不起作用，padding上值不起作用

四、元素类型转换

1、在实际开发中有时候需要给内联元素设置宽和高或者希望内联块元素自上而下排列，这些都是实际的需求，为了满足需求提出了元素类型转换

2、使用display属性

   属性值：
   
   none 可以把一个显示的元素进行隐藏
   
   block 把一个隐藏的元素可以进行显示  把其他元素类型转成块级元素
   
   inline 把其他元素类型转成内联元素
   
   inline-block 把其他元素类型转成内联块元素
   
   补充的值：
   
   list-item 把其他元素类型转成列表元素
   
   table 把其他元素类型转成表格元素
   
   inline-table 把其他元素类型转成表格内联元素
   
   table-cell 单元格类型 td
/*注意点：内联块元素不能转成内联元素*/
	input{display:inline;}