1、display属性的值与作用
常用的值有none、inline、block、inline-block
(1)none
1)表示该元素不会显示,并且该元素的空间也不存在,可理解为已删除;
2)visibility:hidden只是将元素隐藏,但不会改变页面布局,但也不会触发该元素已经绑定的事件;
3)opacity:0,将元素隐藏,不会改变页面布局,但会触发该元素绑定的事件。
(2) inline
1)内联元素,与其他元素在一行;
2)不可设置宽高;
3)margin-top与margin-bottom无效,但margin-left与margin-right有效;
4)padding-left与padding-right同样有效,但是padding-top与padding-bottom不会影响元素高度,会影响背景高度;
5)常见的有<a>、<span>、<br>、<i>、<em>、<strong>。
(3)block 独占一行
块级元素,常见的有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img
块级元素与行内元素的区别:
(1)块级元素会独占一行,默认情况下其宽度自动填充满其父元素的宽度;
行内元素不会独占一行,相邻的行内元素会排在同一行,直到排不下自动换行
(2)块级元素可以设置width、height属性;
行内元素的width、height属性无效
(3)块级元素可以设置margin、padding属性;
行内元素的水平方向的margin、padding有效,垂直方向无效。
(4)inline-block
1)行内块元素,即是内联元素,又可设置宽高以及行高及顶和底边距;
2)常见的有<img>、<input>。
inline-block与float的区别:
(1)中间是否有间隙
float:left;
display:inline-block;
很显然,由于属性display:inline-block而在一行的块级元素中间会出现间隙,而浮动则不会。
解决设置为行内标签之间的间隙问题: display:inline-block
由于html的闭合标签是一个换行符,所以会产生一个空白符,默认为4px,所以在元素之间会产生间隙。
解决方法:
- 写代码时两个行内元素标签不换行。(不留回车符)
- 把父元素的font-size设为0,再单独设置子元素的字体大小
- 设置负边距。margin-left:-4px;
- 改为浮动元素:float:left;
(2)当兄弟元素高度不同时,对齐方式也不同
float顶端对齐;inline-block底部对齐。
float:left;
display:inline-block;
display:inline-block属性没有脱离文档流,会与普通文档流中的元素一样采取底端对齐方式。
可以添加vertical-align:middle;使两元素垂直居中对齐。
2.position属性的值和作用
position属性有四个可选值,分别为static、relative、absolute、fixed。
(1)static
默认值,元素出现在正常的文档流中,不会受left、top、right、bottom的影响。
(2)relative
相对定位,相对自身位置定位,可通过设置left、top、right、bottom的值来设置位置;
并且它原本所占的空间不变,即不会影响其他元素布局;
经常被用来作绝对元素的容器块。
(3)absolute
绝对定位,相对于最近的除static定位以外的元素定位,若没有,则相对于html定位;
脱离了文档流,不占据文档空间;
若设置absolute,但没有设置top、left等值,其位置不变(和没有设置position的位置一样);
若设置absolute,会影响未定义宽度的块级元素,使其变为包裹元素内容的宽度。
(4)fixed
固定定位 相对于浏览器窗口定位,脱离文档流,不会随页面滚动而变化。
1、relative。
定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:
黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。
2、absolute。
定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。如图2:
可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。
3、relative与absolute的主要区别:
首先,是上面已经提到过的在正常流中的位置存在与否。
其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。
加分项
- 所有的定位如果left、top、right、bottom属性都为默认值,则为默认定位
- absolute定位会脱离文档,浮动起来,多个层重叠可以使用z-index属性改变层叠顺序
- absolute定位忽略padding,相对位置为相对定位容器的左上角内边框,