元素显示模式概述
- 定义:元素显示模式就是元素以什么方式进行显示,比如:< div >独占一行,而< span >一行可以放多个。
- 元素显示模式的分类:
- 块元素
- 行内元素
- 行内块元素
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
块元素的特点:
1、独占一行;
2、可以设置高度、宽度以及内外边距;
3、宽度默认是父级宽度的100%;
4、块级元素可以看作是一个容器或盒子,里面可以放行内元素或块元素
注意:
1、文字类的元素内不能使用块级元素,比如:<h1>~<h6>和<p>等都是文字类块级元素,里面都不能放其他块级元素
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>以及<span>等,其中<span>标签是最典型的行内元素。
行内元素的特点:
1、一行可以显示多个行内元素;
2、不能设置宽度和高度;
3、默认宽度就是本身内容的宽度;
4、行内元素只能容纳文本或其他行内元素
注意:
1、链接里面不能再放其他链接;
2、特殊情况,<a>里面可以放块级元素,但是还是转换为块级元素是最安全的;
3、行内元素水平方向的内外边距可以生效,但竖直方向则没有效果
行内块元素
常见的行内块元素有<img />、<input />以及<td>等。
行内块元素的特点:
1、一行可以显示多个,但相邻行内块元素之间会有空白缝隙;
2、默认宽度是本身内容的宽度;
3、可以设置高度、宽度以及内外边距
元素显示模式的转换
- 转换为块元素:display:block
- 转换为行内元素:display:inline
- 转换为行内块元素:display:inline-block
注意点
1.height继承问题
1、height是不能继承的;
2、元素height的取值情况:
(1)可以不设置。它的高度将由它的子元素来决定
(2)可以设置为100%。它的高度将由该元素的有确定高度的父级元素来决定
(3)可以设置为固定的px
(4)可以设置为auto。它的高度也将由它的子元素来决定
2.weight继承问题
1、常见的拥有继承性的属性有:以text-、font-、line-开头的属性;
2、当元素满足以下条件,就可以默认继承weight:
(1)该元素是块级元素
(2)该元素没有设置定位
(3)该元素没有设置浮动
3、当使用width:100%时,其基准点的确定分为以下几种情况:
(1)对于使用position:relative的子元素或浮动的子元素,其基准点始终是基于其直接父元素而言,跟其父元素是否有定位无关
(2)对于绝对定位postion:absolute的子元素,其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位,则是相对于body而言
(3)对于使用postion:fixed的子元素,其基准点就是body,跟父元素无关
微信公众号定期更新,有兴趣的朋友也可以加个关注!谢谢!