CSS之元素显示模式的分类(块元素、行内元素、行内块元素)及转换 Height和Weight的继承问题

23 篇文章 1 订阅

元素显示模式概述

  • 定义:元素显示模式就是元素以什么方式进行显示,比如:< div >独占一行,而< span >一行可以放多个。
  • 元素显示模式的分类:
  1. 块元素
  2. 行内元素
  3. 行内块元素

块元素

常见的块元素有<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,跟父元素无关



微信公众号定期更新,有兴趣的朋友也可以加个关注!谢谢!
在这里插入图片描述

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值