html的display属性

最新推荐文章于 2022-11-06 11:53:08 发布
最新推荐文章于 2022-11-06 11:53:08 发布
阅读量2.8w 收藏 150
点赞数 36
分类专栏： web 文章标签： html block inline inline-block
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29630271/article/details/100707533
版权
block块元素（div）
  • 独占一行，设置了宽度后，后面剩余的宽度还是会占一行，只是不显示
  • 在文档流中，块元素会独占一行，自上向下排列
  • 在文档流中，默认宽度是父标签的100%，默认高度被内容撑开
  • 支持所有css命令
  • 属性display可以改变标签的标签的属性
inline内联元素（span）
  • 不独占一行，后面可以继续跟同类型标签
  • 在文档流中，内联元素只占自身大小，从左向右排列，如果一行中不不足以容纳，则会换到下一行，依旧自左向右排列
  • 在文档流中，默认宽度被内容撑开，默认高度被内容撑开，不可设置宽高
  • 支持左右的margin，不支持上下的margin
  • 支持上下左右padding，垂直方向不会影响页面布局
  • 可以设置边框，垂直方向不会影响页面布局
  • 代码换行被解析
  • 属性display可以改变标签的标签的属性
inline-block行内块元素
  • 不独占一行
  • 支持宽高
  • 换行被解析了
  • 不设置宽度的时候宽度由内容撑开
  • 在IE6,IE7下不支持block标签
  • 属性display可以改变标签的标签的属性
none
  • 隐藏标签
  • 不再占有位置
  • visibility: hidden虽然会隐藏元素，但是位置会保留
wsx_iot
关注
  • 36
    点赞
  • 踩
  • 150
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5中display属性,display的属性
weixin_39647180的博客
06-05 2527
在一般的css布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。,display这个属性用于定义建立布局时元素生成的显示框类型。对于 html 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 html 中已经定义的显示层次结构。对于 xml，由于 xml 没有内置的这种层次结构，所有 display 是绝对必要的,要了解display...
display属性详解
最新发布
m0_68845148的博客
11-08 5248
display属性用于指定一个元素在页面中的显示方式display:block(将元素转换为块元素)（将元素转换为行内元素）（将元素转换为行内块元素）（元素将被隐藏）（将元素作为弹性盒子显示）（将元素作为网格容器显示）（将元素作为表格显示）display简单应用在元素类型的转换，首先我们要理解三种元素类型。HTML中标签元素大体被分为三种不同的类型：块元素、行内元素和行内块元素，各自具有不同的特点以及用途。元素分类英文举例独占一行默认宽度设置宽高块元素block。
HTML的运用——display的属性
weixin_48619092的博客
09-07 893
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
display属性详解及用法
橘猫吃不胖的博客
11-06 8996
display属性详解 1 block、inline、inline-block 2 flow-root 3 table、inline-table 4 flex、inline-flex 5 none 6 list-item 7 contents 8 grid、inline-grid
inline-block容器的高度撑开位置
weixin_34150503的博客
11-26 308
block的高度是从最上面撑开的 那么inline-block呢？ 直接上代码 <!doctype html> <html> <head> <meta charset="utf-8"> <style> #test { line-height: 0; font-size: 80...
display基础用法
热门推荐
shenle_v的博客
03-30 1万+
display基础用法，面向萌新，可快速学会
HTML之CSS 布局 - display 属性
11-02
display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
详解css display:box 新属性
09-24
CSS的`display: box`属性是CSS3 Flexbox布局的一部分，它允许开发者更灵活地控制元素及其子元素的布局。这个属性在现代网页设计中已经被`display: flex`所取代，但理解`display: box`的工作原理可以帮助我们更好地...
display属性练习.zip
12-16
最流行的弹性布局方案小程序，供大家下载，希望可以帮到大家。 里面集合了flex的所有属性，可以自由调节，自由组合，自由增加项目。
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格...一、CSS display属性的表格布局相关属性的解释： table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。table-row-group 此元素会作为一个或多个
前端HTML中display属性的使用
个人笔记
02-21 770
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div,span{ background-color: pink; border: 1px solid red; } div{ width: 100px; height: 100
HTML中display属性
yuan_xiangjun的博客
04-02 1424
display属性： 控制元素的显示和隐藏。 块级元素和行内元素的转变。 属性：属性值 none:设置元素不会被显示 inline:元素会被显示为内联元素 block:元素会被显示为块级元素 inline-block:行内块元素 案例1：将音乐播放的控件通过display属性进行隐藏 该浏览器不支持audio标签 案例2：通过display进行元素之间的转换 <!-- 块状元素div转换为行内元素--&gt
html中隐藏图片display,html中的display:none代表什么
weixin_39774219的博客
06-03 2062
html中的display:none代表什么发布时间：2020-06-24 19:41:58来源：亿速云阅读：175作者：元一html中的display:none代表什么？可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。display:none的意思：隐藏元素并脱离文档，流就是隐藏该区域，不占实际空间，但对后台来说真实存在，可以获取被隐藏的元素...
【前端】【html/css】前端学习之路（五）：标签显示模式（display）
SuiKaSan的自学室
06-20 669
标签的类型(显示模式)1.块级元素    HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。1.块级元素（block-level）    每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。总而言之就是比较霸道。常见的块元素有&lt;h1&gt;~&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、&lt...
html中display显示,CSS标签显示模式(display)
weixin_39960116的博客
06-17 279
什么是标签显示模式概念:标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个作用:我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。分类:HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。块级元素(block-level)常见的块元素有~、、、、、等，其中标签是最典型的块元素。块级元素的特点:(1)自己独占一行(...
CSS html标签显示模式（display）
快乐de馒头
01-18 1134
标签显示模式（display） 标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下： 1、块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 霸道 常见的块元素有<h1>~<h6>、<p>、&lt...
Web端display属性
zoucanfa的博客
01-05 7960
定义display属性用于规定元素生成的框类型，影响显示方式值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-
Html5中display常用功能
恬静的男子的博客
10-23 8483
display:block; 将行内元素设置为块状元素 display:inline; 将快状元素设置为行内元素 display:none; 隐藏div a{ display:block; /*将a标签设置为块状元素*/ } } #c{ display:inline; /*将块状元素转换成行内元素*/ } #c{ display:none...
小程序定位引起view高度不能由内容撑开的问题？
weixin_44058522的博客
09-03 2773
注：#getheight为view绑定的id命名 // 获取view的高度 windowWidth: ‘’, scroll_height: ‘’, // 获取系统宽度 getSystemInfo: function() { let that = this wx.getSystemInfo({ success: function(res) { console.log(‘res.windowWidth...
html display属性
04-06
HTML display属性用于设置HTML元素的显示方式，即元素在页面中如何显示。它可以控制元素的布局、大小和位置等方面。 常用的display属性值包括： 1. block：将元素显示为块级元素，即在页面中占据一整行，可以设置宽度、高度、内边距和外边距等属性。 2. inline：将元素显示为行内元素，即元素在文本行内，不会独占一行，只能设置水平方向的内边距和外边距等属性。 3. inline-block：将元素显示为行内块元素，即元素在文本行内，但可以设置宽度、高度、内边距和外边距等属性。 4. none：将元素隐藏，不占据任何空间。 5. flex：将元素显示为弹性盒子容器，可以用来实现复杂的布局。 6. grid：将元素显示为网格容器，可以用来实现复杂的布局。 7. table：将元素显示为表格，可以用来实现表格布局。 8. table-cell：将元素显示为表格单元格，只能用于table元素的子元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值