zoukankan      html  css  js  c++  java
  • block元素和inline元素的特点

    一、block元素的特点

    1、处于常规流中时,如果width没有设置,会自动填充满父容器

    2、可以设置height/width及margin/padding

    3、处于常规流中时,布局在前后元素位置之间(独占一个水平空间)

    4、忽略vertical-align

    二、inline元素特点

    1、水平方向上根据direction依次布局

    2、不会在元素前后进行换行

    3、受white-space控制

    4、margin/padding在垂直方向上无效,在水平方向上有效

    5、width/height对非替换行内元素无效,宽度由元素内容决定;

    6、非替换行内元素的行框高由line-height确定,替换行内元素的行框高由height,margin,padding,border决定

    7、浮动或绝对定位时会转换成block

    8、vertical-align生效

    三、补充

    替换元素

    替换元素是浏览器根据其标签元素与属性来判断显示具体的内容。

    比如:<input type="text" /> ,type="text"表明这是一个文本输入框,换成其他的时候,浏览器显示就不一样,<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。

    非替换元素

    (X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。

    比如:<p>wanmei.com</p>

    浏览器将把这段内容直接显示出来。

  • 相关阅读:
    ES6学习笔记(七)-对象扩展
    ES6学习笔记(四)-数值扩展
    ES6学习笔记(三)-正则扩展
    ES6学习笔记(二)-字符串的扩展
    ES6学习笔记(一)-变量的解构赋值
    webpack打包踩坑之TypeError: Cannot read property 'bindings' of null
    CSS之Flex 布局
    iscsi
    DHCP
    DNS
  • 原文地址:https://www.cnblogs.com/aaron-shu/p/4100277.html
Copyright © 2011-2022 走看看