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。
  • 相关阅读:
    Ubuntu上使用Latex
    Ubuntu18.04 解压文件名乱码的解决方法
    Android 编译 opencv
    android 使用编译好的sdk
    https协议加密原理介绍(一)
    java 面试题目 class.forName和load的区别
    给进程设置环境变量
    Maven 编译jdk配置
    Docker积累
    潜谈单例模式
  • 原文地址:https://www.cnblogs.com/philipding/p/6456063.html
Copyright © 2011-2022 走看看