display属性应用和详细讲解

首先我们要知道display是显示的意思，分别有四种属性值分别为：

display：block;（转换为块元素）

display：inline;（转换为行内元素）

display：inline-block;（转换为行内块元素）

display：none;（元素不会被显示）

接下来我们就要理解什么是块元素，行内元素以及行内块元素。

元素模式	元素排列	设置样式	默认宽度	包含
块元素（block）	一行只能放一个块元素	可以设置高度宽度	容器100%	容器可以包含任意标签
行内元素（inline）	一行可以放多个行内元素	不可以直接设置宽高	它本身容器的宽度	容纳文本或其他行内元素
行内块元素是（line-block）	一行放多个行内块元素	可以设置宽高	它本身容器的宽度

注意：行内块元素能满足块元素和行内块元素的使用，既可以设置宽高还能同行使用。

接下来演示一下使用： display：block;（转换为块元素）

接下来演示一下使用：display：inline;（转换为行内元素）

接下来演示一下使用： display：inline-block;（转换为行内块元素）

display：none;（元素不会被显示）会被隐藏感兴趣的小伙伴可以自己测试一下博主对错。

（以上存有个人意见以及学习的知识存在错误希望提出共同成长）

display属性应用和详细讲解相关推荐

display属性_Numpy知识点(1)讲解实操安装/属性/数组创建/运算
# 1.安装包# pip install numpy #原生python安装# conda install numpy #Anaconda的安装 # 使用Numpyimport numpy as np ...
Iframe用法的详细讲解(属性、透明、自适应高度)和html中滚动条属性设置
Iframe 用法的详细讲解(属性.透明.自适应高度)和html中滚动条属性设置 scrollbar属性.样式详解 1． overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overfl ...
php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
2023年美赛C题Wordle预测问题一建模及Python代码详细讲解
相关链接 (1)2023年美赛C题Wordle预测问题一建模及Python代码详细讲解 (2)2023年美赛C题Wordle预测问题二建模及Python代码详细讲解 (3)2023年美赛C题Wordl ...
Vue模仿todo超详细讲解（附源码）
Vue模仿todo超详细讲解(附源码) 一.todo基本DOM结构二.todo功能需求分析 1.新增任务 2.点击变成完成状态 3.点击删除 4.双击进入编辑以及修改保存 5.底部的状态筛选 6.l ...
30 道 Vue 面试题，内含详细讲解！
1.说说你对 SPA 单页面的理解,它的优缺点分别是什么? SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML.JavaScript 和 CSS ...
Iframe 用法的详细讲解
Iframe 用法的详细讲解把iframe解释成"浏览器中的浏览器"很是恰当 <iframe frameborder=0 width=170 height=100 marg ...
Vue 注意事项，内含详细讲解
前言转自[https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091937&idx=1&sn=1d08ebe7 ...
vue-cli 目录结构详细讲解
https://juejin.im/post/5c3599386fb9a049db7351a8 vue-cli 目录结构详细讲解目录结构预览 ├─build//保存一些webpack的初始化配置, ...

display属性应用和详细讲解

display属性应用和详细讲解相关推荐

最新文章

热门文章