美文网首页
HTML5样式标签的display属性分类

HTML5样式标签的display属性分类

作者: CJ_景元 | 来源:发表于2017-10-09 10:10 被阅读32次

HTML标签中可以简单的划分为两类元素,一种是 块级元素 (block),一种是 行内元素 (inline)

块级元素


<div> 是最常见的HTML标签,它是一个典型的块级元素。它的内容会独立占领至少一行,哪怕内部只有一个字符。
HTML5时代,为了追求标签语义化,制定了新的类似<div>的标签,比如 <section><nav> 等等,他们的 display 默认属性都一致。

    section,nav,article,header,footer.aside... { 
        display:block;
    }
    //HTML5新增的区块元素

HTML5里,还有几种新标签同样是区块元素,但是兼容性不好,所以不推荐使用。

    details,dialog,summary {
        display:block; 
    }
    //IE和Chrome都不支持,不建议使用

行内元素


行内元素就更加常见了,比如<a>,<img>,<span>等等,它们在网页当中不会占领一行,但是会根据内容来进行扩张,某些元素可以指定 widthheight 属性,设置元素的宽度和高度。
我们也可以改变 display 属性来把使元素能指定大小。

    a {
        display:inline-block;   
        width:15px;  
        height:10px;  
    }

相关文章

  • HTML5样式标签的display属性分类

    在HTML标签中可以简单的划分为两类元素,一种是 块级元素 (block),一种是 行内元素 (inline)。 ...

  • css第二节第八天

    1、display属性样式 块级标签( - , , , , )独占行,行内标签( , , , , , , )共用...

  • day5 第二部分

    样式分类 1, 行内样式:a) <标签名 其他标签属性……. style=”css属性1:值1;css属性2:...

  • 2018.03.14前端学习第三课笔记

    给元素加样式 <标签 属性名=“属性”> style标签添加样式,如下: 分离内容和样式、元素分类和命名 标签选择...

  • 「HTML 」语法

    HTML标签 书写规范标签属性 全局属性 标签分类 标签关系 注释标签 HTML5新语义标签兼容性低版本IE显示问...

  • 表格样式与display属性

    表格样式: display属性

  • CSS第二节

    CSS的标签模式设置Display属性 display可以控制标签的显示模式。 display:none | in...

  • web前端开发基础班课堂笔记第四天

    1、标签选择器 元素选择器标签名{ 属性1:属性值;属性2:属性值;}所有某一类集体更改样式按标签名分类 1.1、...

  • day02

    A我今天学了什么 1.html标签的分类 1.块标签(display:block) 2.内联标签(display:...

  • HTML5语法,标签, 属性

    @(HTML5)[HTML5 语法, HTML5标签, HTML5属性] [TOC] 一 、HTML5语法,标签,...

网友评论

      本文标题:HTML5样式标签的display属性分类

      本文链接:https://www.haomeiwen.com/subject/rnisextx.html