zoukankan      html  css  js  c++  java
  • block,inline和inline-block概念和区别(转)

    总体概念
    1. 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。
    2. 行内元素指的是书写完成后不会自动换行,并且元素没有宽和高。
      块级元素写完后会自动换行,有宽高可以修改。
      还有一种特殊的元素叫做行内块元素。
      大致分类是:
      行内元素有:title  span  br  a   style  em  b  i   strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo
      块级元素有:body  form  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  center  div pre noscript blockquote fieldset address
      行内块元素常见的有: img  input  td select textarea label
    block, inline, inline-block细节对比
    display:block
    1.  block元素可以包含block元素和inline元素,块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素;p 元素,只能包含inline元素,而不能包含block元素,也有一些块级元素既可以包含块级,也可以包含行级元素。
    2. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
    3. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。当只设置了height属性时,则width默认是其父类元素的宽度。
    4. block元素可以设置margin和padding属性。
    display:inline
    1. inline元素只能包含inline元素。
    2. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
    3. inline元素设置width,height属性无效,如果你要改变内联元素的行高即类似文本的行间距,那么你只能使用这三个属性:line-height,font-size,vertical-align。若想给inline元素设置宽高属性,则可使用以下两种方法(下面的方法是我个人收集的,如有不对,希望大家可以指出)
    • 将inline元素转换为块级元素后就都可设置了,即添加CSS样式时,加上”display:block;“这句话。
    • 将该inline元素的position设置为absolute或fixed,这样子它就具有块级元素的属性了。
    1. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果,注意元素范围是增大了,但是对元素周围的内容是没影响的。
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="UTF-8">  
    5.         <title></title>  
    6.         <style type="text/css">  
    7.             *{  
    8.                 margin:0;  
    9.                 padding:0;  
    10.                 list-style:none;  
    11.                 border:0;  
    12.             }  
    13.             .a1{  
    14.                 background:pink;  
    15.                 margin-top:30px;  
    16.                 margin-bottom: 30px;  
    17.                 padding-top: 20px;  
    18.                 padding-bottom: 20px;  
    19.             }  
    20.             .div1{  
    21.                  100px;  
    22.                 height:100px;  
    23.                 background:green;  
    24.             }  
    25.         </style>  
    26.     </head>  
    27.     <body>  
    28.         <class="a1">CSDN</a>  
    29.         <div class="div1"></div>  
    30.     </body>  
    31. </html>  
    运行结果如下左图所示:
    查看元素时,可看到右图的效果,在右图中,紫色部分为内边距,紫色下面的黄色部分是外边距,但它们两者并不起作用,块级元素div仍紧挨着元素a的底部,所以这就是元素范围是增大了,但是对元素周围的内容是没影响的。
    display:inline-block
    1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
    2. 可以设置margin和padding属性。
    文中很多内容都是参考前辈的,添加了一点点自己写的内容。因为自己还是菜鸟,所以写不出像前辈们那么优秀的文章,而且要是仅仅依靠我个人的经验去写,我怕写出来的文章会误导大家,不过我会继续努力的!

    参考网址:https://www.cnblogs.com/KeithWang/p/3139517.html
  • 相关阅读:
    Ubuntu oracle SDK替换OpenJDK
    用update-alternatives管理java版本
    安卓配置
    CS 159: Advanced Topics in Machine Learning: Structured Prediction
    ros bag 代码操作
    vim 方式快捷编辑代码
    文件权限
    操作系统连不上网
    github权限管理
    nmap基本命令使用
  • 原文地址:https://www.cnblogs.com/Caersi/p/8979153.html
Copyright © 2011-2022 走看看