display用法

  • 介绍

  • 常用属性

一、介绍

display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，在页面应用上是很常见的，也很方便，比如在适应页面上可以使用display:flex; 默认可以在一行显示 子级就可以使用 flex:1; 进行平均平摊


120CFDB9-6A9D-4F25-AE37-4CF107F5FE92.png

二、常用属性

1. display:inline-block(行内块) 这个属性就是可以把当前的元素改变成行块内元素
  • 和其他行内元素在同一行
  • 默认宽度为内容宽度

  • 可以设置宽高及内外边距


    3415E441-6170-43BD-AB24-9E743283A6D8.png

    这里的 childDiv 他是块元素 然后改变成为了行内块元素

2. 同上 display:inline(行内) 这个属性就是可以把当前的元素改变成行内元素
  • 和其他元素都在一行上，只有一行排不下才换行
  • 设置宽高无效，宽度只与内容有关
  • 设置内外边距只对左右起作用，对上下无效
  • 行内元素只能容纳文本或者其他行内元素
3. 同上 display:block(块) 这个属性就是可以把当前的元素改变成块元素
  • 总是从新行开始且独占一行，默认宽度自动填满其父元素宽度
  • 可以设置宽高及内外边距
  • 可以容纳内联元素及其他块元素
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容