CSS的元素显示模式


前言

了解元素的显示模式可以更好的让我们布局页面


一、什么是元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的页面

元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>.

HTML元素一般分为块元素行内元素两种类型。

二、块元素

常见块元素有<h1>~<h6><p><div><ul><ol><li>等,其中<div>标签是最典型的块元素
块级元素的特点:

  • 比较霸道,自己独占一行
  • 高度、宽度、外边距以及内边距都可以控制
  • 宽度默认是容器(父级宽度)的100%
  • 是一个容器及盒子,里面可以放行内或者块级元素
    注意
    ① 文字类的元素内不能使用块级元素
    <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别不能放<div>
    ③ 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

三、行内元素

常见的行内元素有<a><strong><b><em><i><del><s><ins><u><span>等 ,其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素

行内元素的特点:

① 相邻行内元素在一行上,一行可以显示多个。

② 高、宽直接设置是无效的。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。

注意:

  1. 链接里面不能再放链接
  2. 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

四、行内块元素

在行内元素中有几个特殊的标签——<img/><input/><td>,它们同时具有块元素和行内元素的特点
行内块元素的特点:
① 和相邻行内元素(行内块)在一行上,但是它们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
② 默认宽度就是它本身内容的宽度(行内元素特点)。
③ 高度、行高、外边距以及内边距都可以控制(块级元素特点)。

五、元素显示模式总结

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或者其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度

六、元素显示模式转换

特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围

  1. 转化为块元素:display:block;
  2. 转换为行内元素:display:inline;
  3. 转换为行内块:display:inline-block;

七、一个小工具的使用说明snipaste

Snipaste是一个简单但强大的截图工具,也可以让你将截图贴回到屏幕上.
常用快捷方式:

  1. F1可以截图.同时测量大小,设置箭头、书写文字等
  2. F3 在桌面置顶显示
  3. 点击图片, alt可以取色(按 下shift可以切换取色模式)
  4. 按下esc取消图片显示
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值