zoukankan      html  css  js  c++  java
  • CSS的显示模式

    div与span

    div与span有什么区别
    div单独占一行,span不会单独占一行
    div是容器级的标签,而span是一个文本级的标签
    容器级的标签有:div , h , ul , ol , dl , li ...
    文本级的标签有:span , p , buis , del , em , ins ...
    容器级的标签中可以嵌套其它所有标签
    文本级的标签中只能嵌套文字/图片/超链接

    CSS显示模式

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>HTML5+CSS3</title>
    <style>
        * {
            margin:0;
            padding:0;
            font-family: "Microsoft YaHei";
        }
        div {
            display:inline;
        }
        span {
            display:block;
            background:green;
            100px;
            height:100px;
        }
        .cc {
            background:blue;
            200px;
            height:200px;
            display:inline-block;
        }
    </style>
    </head>
    <body>
    <!--
    在HTML中所有的标签分为两类:容器级与文本级
    在CSS中将所有标签分为两类:块级元素与行内元素
    1:什么是块级元素,什么是行内元素?
        块级元素独占一行:div , h , ul , ol , dl , li , dt , dd , p
        块级元素如果没有设置宽度就和父级元素一样宽;如果设置了宽高就和设置的一样宽高
        行内元素不会独占一行:span , buis , strong , em , ins , del
        行内元素如果没有设置宽度默认就和内容一样宽
        行内元素是不可以设置宽度和高度的
    2:行内块级元素
        为了能够让元素既能够不独占一行,又可以设置宽度和高度,就出现了行内块级元素
    3:显示模式的互相转换
        设置元素的display属性:block 块级, inline 行内, inline-block 行内块级
    -->
    <div>这是DIV</div>
    <div>这是DIV</div>
    <span>这是SPAN</span>
    <span>这是SPAN</span>
    <p class="cc">这是P</p>
    <b class="cc">这是B</b>
    </body>
    </html>
    

      

  • 相关阅读:
    JavaScript 为字符串添加样式 【每日一段代码80】
    JavaScript replace()方法 【每日一段代码83】
    JavaScript for in 遍历数组 【每日一段代码89】
    JavaScript 创建用于对象的模板【每日一段代码78】
    html5 css3 新元素简单页面布局
    JavaScript Array() 数组 【每日一段代码88】
    JavaScript toUTCString() 方法 【每日一段代码86】
    位运算
    POJ 3259 Wormholes
    POJ 3169 Layout
  • 原文地址:https://www.cnblogs.com/ginvip/p/7899203.html
Copyright © 2011-2022 走看看