zoukankan      html  css  js  c++  java
  • 替换元素和非替换元素

    元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的。比如:div 与span的方式不一样。

    替换元素:

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

    比如:

    <input type="text" /> 
    

    这是一个文本输入框,换一个其他type,浏览器显示就不一样

    HTML中的"img、input、textarea、select、object"都是替换元素,因为这些元素都没有实际的内容。

    非替换元素:

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

    比如

    <p>wanmei.com</p>
    

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

    除了这两字,还有两种非常属性的元素,显示元素,他分为两种情况,一种是‘块及元素’ ‘block’,还有一种是“行内元素”inline,大家也叫“内联元素”。

    块及元素

    他最明显的特征就是独自占领一行,自动充满父级元素的内容区域,绝不会让别人“侵略”(当然可以通过其他方式去改变他)。

    常见的有:div,p..等等。

    通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况,可以详查浮动这个知识

    行内元素:

    上面说块及元素独自占领一行,行内元素就没这么霸道了,他可以左右都允许有元素,最常见的就是

    通过

    display:'inline'
    

    设置以后都会变成行内元素。

    但是要注意,行内的非替换元素是绝对不可以设置宽高的!即便你设置了,浏览器也会自动忽略。
    而input,img等替换元素,因为它们有其内在尺寸,所以是可以设置其height和width的!

  • 相关阅读:
    linux screen工具
    nginx 启动重启脚本
    Docker入门
    时间管理定律
    贪婪算法
    指针与指针的地址
    双向链表(前插操作,删除操作)
    Trie树检索字符串
    函数调用
    字符串匹配算法
  • 原文地址:https://www.cnblogs.com/nuannuan7362/p/6149741.html
Copyright © 2011-2022 走看看