栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

关于css 行元素和块元素 相互转换 居中

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

关于css 行元素和块元素 相互转换 居中

一、块级元素  行内元素

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

                     显示出来的效果为:               
some text                 some text

Some more text.

    Some more text.

在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。

块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。但是,这有助于理解在屏幕上看到的所有东西都形成某种框。

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度

块状元素也可以通过代码display:inline将元素设置为内联元素

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

常用的块状元素有:

、...、

      、、、

      常用的内联元素有:

      、、
      、、

      常用的内联块状元素有:

      内联块状元素(inline-block就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),标签就是这种内联块状标签。

      inline-block 元素特点:

      1、和其他元素都在一行上;

      2、元素的高度、宽度、行高以及顶和底边距都可设置。

      二、水平居中  

      行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;

      对于块级元素有以下几种居中方式:

      1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范;

      2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高;

      3.设置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,利用相对布局的方式居中.上面三种方式各有优劣,依使用情景具体选择.

      三、垂直居中  

      1.对于知道高度的元素可以设置上下padding相等;

      2.设置line-height和height相等

      3.利用vertical-align,但是这属性只在tr,td中适用,故可将元素放置入table中在居中

      源码

       代码如下:

      XML/HTML Code复制内容到剪贴板
      1.   
      2.   
      3.   
      4.   
      5. hehe

          
      6.   
      7.   
      8.   
        
    •   
    •   
    •   
    •   
    •   
    •   
    •   
    •   
    •   
    •   
    •   
    •   
    •   
    •   
      
  1.   
  2.   
  3.   
  4.   
  5.   
  6.   
  7.   
  8.   
  9.   
  10.   
  11.   
  12.   
  13.   
  14.   
  15.   
  16.   
  17.   
  18.   
  19. nihao 
  20.   
  21.   
  22.   
  23.   
  24. 你好 
  25.   
  26.   
  27.   
  28.   
  29.   
  30.   
  31.   
  32. 我要來場說走就走的旅行   
  
  •   
  •   
  •   
  •   
  •   
  • 一弦一柱思華年
      
  • css样式

    CSS Code复制内容到剪贴板
    1.   
    2. .father   
    3. {   
    4. width:500px;   
    5. }   
    6. .inlineCenter   
    7. {   
    8. text-align:center;   
    9. float:left;   
    10. }   
    11. .blockCenter   
    12. {   
    13. width:100px;   
    14. margin-left:auto;   
    15. margin-right:auto;   
    16. text-align:"center"  
    17. }   
    18. .tableclass   
    19. {   
    20. margin-left:auto;   
    21. margin-right:auto;   
    22. }   
    23. .ulclass   
    24. {   
    25. list-style:none;   
    26. margin:0;   
    27. padding:0;   
    28. }   
    29. .ulclass li   
    30. {   
    31. float:left;   
    32. display:inline;   
    33. text-align:center;   
    34. }   
    35. .ulclass li a   
    36. {   
    37. text-align:center;   
    38. float:left;   
    39. background:#316AC5;   
    40. color:#fff;   
    41. }   
    42. .ulclass li a:hover   
    43. {   
    44. background:#fff;   
    45. color:#316AC5;   
    46. }   
    47. .relativeCenterFather   
    48. {   
    49. float:left;   
    50. position:relative;   
    51. left:50%   
    52. }   
    53. .relativeCenterChild   
    54. {   
    55. float:left;   
    56. position:relative;   
    57. left:-50%;   
    58. }   
    59.   
    60. .wrap   
    61. {   
    62. background:#000;   
    63. width:500px;   
    64. color:#fff;   
    65. height:100px;   
    66. line-height:100px;   
    67. }   
    68.   

    以上这篇关于css 行元素和块元素 相互转换 居中就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持考高分网。

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/215693.html
    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号