• 技术文章 >web前端 >css教程

    css中的基本术语

    无忌哥哥无忌哥哥2018-06-28 16:57:17原创919
    1.文档流: 页面元素的默认排列方式,根据元素在html文档中的顺序依次排列,从左到右、从上到下;

    2.块元素: 默认占一行,沿垂直方向排列,可以设置宽度和高度,例如:<div>,<p>,<h2><form>...;

    3.行内元素: 默认在一行内沿水平方向排列,宽宽和高度由内容决定,不能设置,例如<span><a><em>...;

    4.替换元素: 元素内容由标签的属性来设置,标签其实就是一个占位符,例如<img src=""><input type="">

    5.非替换元素: 元素内容就包含中当前的标签中,例如<p>,<h1>,<link>

    6. 如何区分替换与非替换元素呢?

    6-1.替换元素因为元素内容来自外部资源,所以大多仅需要一个标签就可以,因为单标签比较多,但也有例外,例如:

    <video><script><video>...这些标签大多具有src,指明要引入的资源路径.如果标签中有内容要么无效,

    要么仅仅是一个资源的引入。

    6-2.非替换元素,它的内容由用户直接写在标签中,例如<p>,<h3>等文本类标签,是最常见的非替换元素

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>css中的基本术语</title>
    </head>
    <body>
    <!--div和p标签写在前面就先显示,因为是块标签,所以都独占一行垂直排列-->
    <div>div标签是最简单最常用的块标签</div>
    <!--打开浏览器的开发者工具(调试工具),查看元素样式,可以看到他的display属性: block-->
    <p>div标签是最简单最常用的块标签</p>
    <!--a标签写在了后面就在后面显示,因为为行内标签,所以在一行中水平排列-->
    <a href="index.html"><em>首页</em></a> | <a href="news.html">公司新闻</a> | <a href="about">关于我们</a>
    <hr>
    <!--以上的p,div标签是非替换元素,它的内容由当前文档提供,因为外部资源的大小具有不可控性,所以默认为行内元素-->
    <img src="../images/1.jpg" width="100" alt="">
    <input type="text">
    </body>
    </html>

    以上就是css中的基本术语的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:Bootstrap栅格布局的列排序实例 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 聊聊怎么利用CSS实现波浪进度条效果• 手把手教你使用CSS实现酷炫六边形网格背景图• 实例详解CSS渐变锯齿问题如何解决!• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景
    1/1

    PHP中文网