zoukankan      html  css  js  c++  java
  • 块级元素和行内元素的区别 (block vs. inline)

    块级元素 (display: block)

    • 独占一行,多个block元素会各自新起一行。默认情况下,block元素的宽度会填满父元素的宽度。
    • 可以设置width, height属性。但是,即使设置了width属性,仍然独占一行。
    • 可以设置margin, padding。

    行内元素 (display: inline)

    HTML元素分为替换元素和非替换元素。

    • 替换元素是指浏览器根据其标签的元素与属性来判断显示具体的内容。例如img,input等。
    • HTML中大多数元素是不可替换元素,他们将内容直接告诉浏览器。
    • 宽度随内容变化而变化。
    • 多个inline元素会排在同一行里,直到一行排不下,才会换一行。
    • 可以设置水平方向上的margin, padding,并且会影响布局。
    • width, height属性无效。(特指非替换元素,替换元素有效)
    • margin-top, margin-bottom属性无效。(特指非替换元素,替换元素有效)
    • padding-top, padding-bottom设置背景后可以看见内边距区域有增加,对于行内非替换元素,不会影响行高,不会撑开父元素。而对于替换元素,则撑开了父元素。

    display: inline-block

    该属性使得HTML元素的特点介于inline与block之间:

    • 宽度随内容决定。
    • 可以设置width, height, margin, padding。
  • 相关阅读:
    C语言实现链表
    获取两个数之间的随机数-java
    C#继承机制 多级继承
    C#继承机制 访问与隐藏基类成员
    C#继承机制 C#中的继承符合下列规则
    C#装箱与拆箱的研究
    C#箴言之用属性来访问类的私有成员
    C# 创建和初始化集合对象
    C# 常用函数和方法集汇总
    C# 多态与new关键字
  • 原文地址:https://www.cnblogs.com/philipding/p/6456063.html
Copyright © 2011-2022 走看看