块元素, 内联元素, 内联块元素块元素(默认为父级宽度的100%,支持全部样式):内联元素(不支持宽高, 不支持margin上下, 不支持padding上下)内联块元素(从其它元素转换而来, disp

块元素(默认为父级宽度的100%,支持全部样式):

  • body
  • h1 , h2, h3, h4, h5, h6
  • p
  • div
  • li (条目)
  • ul(定义无序列表, 子标签li, 带点号)
  • ol(定义有序列表, 子标签li, 带数字)
  • dl (定义列表, 内部子标签为dt, dd, 带缩进)
  • dt (标题)
  • dd (内容)
<p>把大象装冰箱, 总共分几步?(有序列表)</p>
<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>关上冰箱门</li>
</ol>

<p>列出你喜欢的饮料(无序列表)</p>
<ul>
  <li>雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
</ul>

<dl>
    <dt>Python</dt>
    <dd>python是一门高级的动态语言</dd>
    <dt>C</dt>
    <dd>C是一门古老的静态语言</dd>
</dl>

内联元素(不支持宽高, 不支持margin上下, 不支持padding上下)

  • a
  • span
  • em(语气强调,斜体)
  • i(专业词汇, 斜体)
  • b(关键词, 加粗)
  • strong(非常重要, 加粗)
  • input(输入框, 支持全部样式)
  • img(图片, 支持全部样式)

间隙问题: 父级设置字体为0, 子级单独设置字体尺寸 居中问题: 使用text-align: center

内联块元素(从其它元素转换而来, display: inline-block, 支持全部样式! )

  • 没有原生的内联块元素
  • 任何元素都可以转换为内联块元素
  • display: inline-block(内联块元素) inline(内联元素) block(块元素) none(隐藏)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

Golang之(for)用法

地鼠每次选好了一块地,打洞,坚持半个月发现地下有块石头,然后他就想绕路了。。。殊不知绕路只会让它离成果越来越远

17940
来自专栏编程

深入CSS,让网页开发少点“坑”

问题:我怎么才能收到你们公众号平台的推送文章呢? 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的...

196100
来自专栏coding for love

CSS入门5-选择器

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9530
来自专栏前端技术总结

CSS基础:block,inline和inline-block

css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。

3.1K1050
来自专栏不会写文章的程序员不是好厨师

全栈第一步-CSS基础前言CSS基础总结

作为一名后端狗,也有一个全栈梦。前端工程师第一步,CSS的基础得打好。本文仅用于记录上周学习CSS的过程,文中对于CSS知识点可能存在理解错误之处。

9820
来自专栏听雨堂

在Mapx中设置单个图元的样式

        前几天研究了一下,感觉都快忘了。虽然去啃帮助仍然可以把这些东西啃出来,但有点烦。把记忆的东西零星整理一下: Mapx4不支持具体到图元的样式的指...

19670
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

39220
来自专栏葡萄城控件技术团队

深入CSS,让网页开发少点“坑”

 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Sta...

20090
来自专栏cnblogs

CSS3新特性应用之结构与布局

一、自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,...

22090
来自专栏练小习的专栏

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

71860

扫码关注云+社区

领取腾讯云代金券