css元素类型的分类, css 元素类型的转换, css float,css inline-block元素类型的应用
目录
一、元素类型的分类依据和元素类型分类
二、元素类型的转换
三、float
一、元素类型的分类依据和元素类型分类
根据css显示分类，XHTML元素被分为三种类型:
块状元素、内联元素(行内块元素)、空元素
1.块状元素(block element) div p ui ol li dI dt dd h1-h6 table form
A)块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B)默认情况下，块状元素都会占据一行;默认情况下，块状元素会按顺序自上而下排列。
C)块状元素都可以定义自己的宽度和高度。
D)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
2.内联元素(inling element) (或是行内元素)
A)常见的内联元素如: a,span,i,em,strong,b等
B)内联元素的表现形式是始终以行内逐个进行显示;
C)内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状;
D)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效（只能生效左右，不能生效上下）
3.内联块状元素(或是行内块元素)
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点，<img/>、 <input/>标签就是这种内联块状标签。
inline-block元素特点:
A、和其他元素都在一行上;
B、元素的高度、宽度、行高以及顶和底边距都可设置
几乎所有的可替换元素都是行内元素，例如<img>、<input>等等
4.空元素（void-element）
即没有内容的HTML元素，例如：br、meta、hr、link、input、img
按照元素是否可替换分类：
替换元素、非替换元素
1、替换元素
浏览器根据其标签的元素与属性来判断显示具体的内容。
比如：<input type="text" />，这是一个文本输入框，type换一个其他的时候，浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。
2、非替换元素:
(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。
比如<p>xiaowu.xyz</p>
浏览器将把这段内容直接显示出来。
二、元素类型的转换
盒子模型可通过display属性来改变默认的显示类型
1、display属性与属性值
display属性：用于定义建立布局时元素生成的显示框类型
display共有18个属性值
属性值：none | inline | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit
1)block 块状显示: 就是让元素竖排显示。
2)inline 内联显示: 让元素横排显示。
3)当元素设置了float属性后，就相当于该元素具备块状元素显示的特点;
4)inline block 行内块元素显示: 元素的内容以块状显示，行内的其他元素显示在同一行。
(只有这一个元素类型支 持vertical-align属性) img,input
垂直对齐方式{vertical-align:top/bottom/middle/baseline(默认值)/text- top/text bottom;}
5)none: 此元素不会被显示。
6)list- item : 将元素转换成列表。li的默认类型。
三、float
在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，float就具备破坏流的特性。
float的特性
一个元素设置了float属性，会表现出如下特性：
包裹性
块状格式化上下文
破坏文档流
没有margin合并
包裹性
包裹性包含了包裹和自适应两个特性。
包裹指的是一个浮动元素，如果子元素宽度足够小，则浮动元素的宽度就是该子元素的宽度，如下所示：
.
.float { float: left; }
<p class="float">
<span>这是浮动元素的子元素</span>
</p>
自适应指的是如果浮动元素的父元素有设置宽度，并且浮动元素的子元素宽度超出了父元素，则浮动元素的宽度最终表现为父元素的宽度，如下所示：
.father { width: 100px; }
.float { float: left; }
<div class="father">
<p class="float">
<span>这是浮动元素的子元素</span>
</p>
</div>
块状格式化上下文(BFC)
设定了float的元素，其display的最终值会表现为block或者table，具体转换如下表：
.float {
float: left: display: block;
}
.float {
float: left; vertical-align: middle; /* 不起作用 */
}
破坏文档流
这是float最本质的特性，因此float设计的初衷就是破坏文档流。设置float的元素，会导致父元素高度塌陷，我们来看个例子：
.float { float: left; }
<div class="father">
<img src="./card.jpg" alt="" class="float">
</div>
<p> 文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕 </p>
可以看到，父元素的高度为0，但这不是bug，而是float本身就是这样设计的，因此只有让父元素高度塌陷了，后面的元素才有机会浮上来。但是仅仅是这样还是不可以形成图片环绕效果的，不然文字浮上来就只会覆盖在图片上面。这里面还隐藏着一个特性：
行框盒子和浮动元素的不可重叠性
意思是说行框盒子和浮动元素不会发生重叠，因此，下面的文字浮上去之后才不会覆盖在图片之上。即使我们给文字设置margin负值也不会起作用。
没有margin合并
设置了float的元素，由于形成了BFC，因此也就没有了margin合并。
float实现流体布局
前面文字环绕的例子，只要稍微改造一下就可以实现两栏或多栏的自适应布局，代码如下：
.father { overflow: hidden; height: 200px; }
.float { float: left; width: 100px; } .content { margin-left: 120px; }
<div class="father">
<img src="./card.jpg" alt="" class="float">
<p class="content">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</div>
网友评论