首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS】布局属性display

拿到一张设计稿,最先想到就是如何布局。 垂直布局?水平布局?悬浮?层叠样式? 今天我们来复习一下CSS原生布局属性——display。...display 试一试 display:block; 块级元素(block):独占一行,对宽高属性值生效;如果不给宽度,块级元素就默认为浏览器宽度,即就是100%宽。...其他display属性(不常用); 值 描述 list-item 此元素会作为列表显示 run-in 此元素会根据上下文作为块级元素或内联元素显示 compact CSS 中有值 compact,不过由于缺乏广泛支持...,已经从 CSS2.1 删除 marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 删除 table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符...: inherit} 本例样式表把段落元素设置为内联元素。

1.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    display属性值有哪些_验证控件display属性

    大家好,又见面了,我是你们朋友全栈君。 1、 display:flex 属性 display:flex 是一种布局方式。它即可以应用于容器,也可以应用于行内元素。...是W3C提出一种新方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器支持。...Flex是Flexible Box缩写,意为”弹性布局”,用来为盒状模型提供最大灵活性。设为Flex布局以后,子元素float、clear和vertical-align属性将失效。...: -webkit-flex; display: flex; /* 设置flex布局*/ -webkit-flex-wrap: wrap; flex-wrap: wrap;...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    2.2K20

    CSS】元素显示与隐藏 display visibility overflow 属性区别

    元素显示与隐藏 display属性 display:none 此元素不会被显示。 display:block 此元素将显示为块级元素,此元素前后会带有换行符。...display隐藏元素后,不占有原有位置 visibility 属性 visibility:visible 默认值。元素是可见。 visibility:hidden 元素是不可见。...visibility隐藏元素后,保留原有位置 overflow 属性 visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见。...scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。...inherit 规定应该从父元素继承 overflow 属性值。

    2.4K40

    【前端】CSS : display

    div 如果在样式添加属性 {display: inline;} 效果:添加属性inline后,两个出现在同一行 ? div inline 注:发现div1和div2之间出现奇怪间隔。...inline-block inline-block既具有block宽高特性又具有inline同行元素特性 (CSS 2.1 新增) 例: .display4 { display: inline-block...使用基于表格CSS布局,使我们能够轻松定义一个单元格边界、背景等样式, 而不会产生因为使用了table那样制表标签所导致语义化问题。...默认值为auto,表示继承父元素align-items属性,如果没有父元素,则等同于stretch。 (跟之前在RNflex-box相似,就不详细描述了。...结语 在熟悉display使用之后,日常布局基本都能解决。 (多数布局都可以通过flex解决) 参考 CSS display 属性详解 有错误之处,感谢指出,接收批评

    1.8K10

    CSS中用 opacity、visibility、display 属性将 元素隐藏 对比分析

    可以看出,使用 opacity 和 display 属性时,父元素对子元素影响很明显,子元素设置 opacity 和 display 属性是不起作用,显示效果和父元素一样,而使用 visibility...总的来说,使用 visibility 和 display 属性,自身事件不会触发,而使用 opacity 属性,自身绑定事件还是会触发。...所以,visibility 和 display 属性是不会影响其他元素触发事件,而 opacity 属性 如果遮挡住其他元素,其他元素就不会触发事件了。...是否产生重绘(repaint) 重绘 当页面一些元素需要更新属性,而这些属性只是影响元素外观,风格,而不会影响布局时候,比如background-color。则称为重绘。...给 span 元素绑定事件,点击它时候,才会把黄色块div元素,渲染到DOM树上,然后改变黄色块div元素 opacity 属性,opacity 是支持 transition ,而在这段代码,并没有起作用

    1.7K10

    关于opacity、visibility、display属性一道CSS面试题

    说到这,你也许会想到用display属性,但是不可以,首先,display不支持过渡,也就是说,用了他,淡入淡出效果就没有了,而且他还会产生会回流和重绘,所以这里,我们给他用 visibility 属性就可以了...这样我们就实现了,需要效果。 对比分析 问题解决了,我们来分析一下,opacity、display、visibility这三个属性。 说之前,我们先讲两个概念,回流和重绘。...每个页面至少需要一次回流,就是在页面第一次加载时候。 重绘 当页面一些元素需要更新属性,而这些属性只是影响元素外观,风格,而不会影响布局时候,比如background-color。...这篇文章重点还是说最开始提到那个问题,而对于 opacity、visibility、display 这三个属性并没有进行非常详细对比分析,所以后来又写了一篇文章。...CSS中用 opacity、visibility、display 属性将 元素隐藏 对比分析

    1.2K30

    (2019)面试题:CSS display和position属性值有哪些?

    问题 CSS display和position属性值有哪些? Hello,欢迎来到我博客,每天一道面试题,我们共同进步。...解答 编辑器提示 我们就先不说查阅文档之类,来看看vscode提示: display ? position ?...我们来说 display none inline inline-block block table相关属性值 table table-caption table-cell table-column table-column-group...定位原点relative是相对于它在正常流默认位置偏移,它原本占据空间任然保留;absolute相对于第一个position属性值不为static父类。...页面上很多效果都是父相(relative)子绝(absolute)来实现。 position:inherit。规定从父类继承position属性值,所以这个属性也是有继承性

    1.5K00

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券