元素分类
2018-11-15 本文已影响12人
iOS_July
元素区别.png
一、块级元素block element
什么是块级元素？在html中
<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。设置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生效。
