元素分类

元素区别.png

一、块级元素block element

什么是块级元素？在html中

、

、

、

、

和
• 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点:a{display:block;}

块级元素特点

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

• 元素的高度、宽度、行高以及顶和底边距都可设置。

• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

• 可以容纳其他内联元素或者其他块元素

二、行内元素inline element

行内元素特点

• 和其他元素都在一行上，遇到父级元素边界会自动换行

• 高、行高以及内外边距都不可以改变

• 宽度与内容一样宽，且不可改变

• 行内元素只能容纳文本或者其他行内元素，对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效

三、块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。 display即“显示模式”

块级元素可转换为行内元素:

EX--->div

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度

此时这个div可以和别人并排了。

行内元素转换为块级元素:

EX--->span

display: block;

此时这个span能够设置宽度、高度

此时这个span必须霸占一行了，别人无法和他并排

如果不设置宽度，将撑满

四、使一个元素脱离标准的办法：

• 浮动
• 绝对定位
• 固定定位

4.1 浮动

• 给一个div设置浮动

  
  
  浮动1.png

给box1设置了float: left，于是，box1就脱离了标准流
所以现在box2就是标准文档流中的第一个盒子，所以就渲染在了页面的左上方。

• 给两个div都设置浮动

  
  
  浮动2.png

这就达到了浮动的效果。
此时，两个元素并排了，并且两个元素都能够设置宽度、高度

• 浮动的特性：
  浮动的元素脱标
  浮动的元素互相贴靠
  浮动的元素有“字围”效果
  收缩:一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）

• 清除浮动

加高法：

如果一个元素要浮动，那么它的祖先元素一定要有高度。
有高度的盒子，才能关住浮动。

clear:both;：

clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。

这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。

margin失效的本质原因是：高度为零。

隔墙法：

可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性。

既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。

这便是隔墙法

内墙法：


overflow:hidden;:

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。

我们知道，一个父亲，不能被自己浮动的儿子撑出高度。

但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。

这个现象，不能解释，就是浏览器的偏方。

并且,overflow:hidden;能够让margin生效。