zoukankan      html  css  js  c++  java
  • CSS中display属性

          一开始觉得挺简单的,要么是块的,自己在这个桌上吃饭了了,别人就不能在这个桌上吃饭了,要么是内联的,自己在这个桌上吃饭,只要桌上有空座,别人还是可以坐到这儿的。等到了使用的时候发现并没有那么简单啊~

       一、HTML元素分类

        1、内联元素(inline)

           ①元素显示方式:“文本方式”,1个接着1个,不单独占一个桌吃饭。

           ②内嵌元素也必须是内联元素:如<a></a>,不能在里面嵌套<div></div>等块级元素。

           ③常见的标签有:<a>,<input>,<lable>,<img>等。

       2、块元素(block)

           ①元素显示方式:每个元素独自占有一行,相当于前后都带有换行符,一个人占一个桌。

           ②内嵌元素可以是内联或块级元素。

           ③常见的标签:<h1>--<h6>,<div>,<hr>等等。

      二、HTML元素布局展示

        1、默认展示(未添加width 和 height 属性)

            ①HTML元素在浏览器展示的方式是:从上到下,从左到右。

            ②内联元素是根据浏览器的宽度以及自身的width来填充。若当前行剩余空白区域不够就会换下一行。

            ③块级元素根据内联元素的展示方式展示大概区域。当浏览器宽度减少时,会自动扩充会计元素的height属性的值,以容纳内嵌元素的展示。

       2、块级元素增加width属性

            浏览器的宽度小于Div的宽度时,height不会变,出现滚动条。

       3、结论

           ①当块级元素未设置width属性时,浏览器宽度的变更,会压缩块元素内嵌元素的排版。

           ②设置块级元素的width属性时,浏览器的width属性值变更,不会影响到块级元素里的内嵌元素的布局,内嵌元素受父级块级元素的影响。

           ③举例:导航条(导航条里有多个a标签,可放在一个div里,并给div附加width属性,以免浏览器缩小,造成导航排版乱掉。)

      三、CSS display 属性

           主要的值:

              none:此元素不被显示

              block:此元素按块级元素显示:前后自带换行符(内联元素→块级元素)

              inline:按内联元素显示,一个挨着一个。块元素→内联元素

     

           ! 文章参照于@polk6

     

  • 相关阅读:
    log4j 配置
    membership数据库的架构
    JQuery常用方法一览
    标准http状态码[英文注释版本]
    PowerDesigner教程系列(一)概念数据模型
    ASP.NET配置文件Web.config 详细解释
    C# 特性(Attribute)
    [原创]bind DNS IP列表的精确获取
    【原创】WEP 密码破解
    【收录】Nginx 状态监控
  • 原文地址:https://www.cnblogs.com/maxiaobao/p/5093942.html
Copyright © 2011-2022 走看看