• 热身赛-任骏飞19分吴前18分 男篮蓝队主场击败伊朗 2019-09-16
  • 埃隆·马斯克 特斯拉8月将推出“全自动驾驶”功能 2019-09-15
  • 九江召开乡村振兴战略春风行动总结会议 林彬杨出席并讲话 2019-09-15
  • 十三届全国人大一次会议在北京闭幕 2019-09-09
  • 重庆黔江举行119消防文艺汇演活动 2019-09-07
  • 长子县全面推进“四好农村路”建设 2019-09-07
  • “海博会”宁夏旅游喜获最佳设计奖和最佳人气奖--旅游频道 2019-09-03
  • 紫光阁中共中央国家机关工作委员会 2019-08-29
  • 江西省“放管服”改革再出实招 2019-08-27
  • 今年一季度保险消费投诉高位运行 监管部门严查 2019-08-27
  • 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-08-17
  • 纸质书电子书何必分高低 2019-08-17
  • 山东栖霞聚焦扶贫领域精准监督 现场质询跟踪督办 2019-08-16
  • 开发者回顾《最终幻想12》的游戏制作过程 2019-08-13
  • 中欧班列整车进口专列抵达西安港 2019-08-13
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    在一般的CSS布局制作时候,我们常?;嵊玫絛isplay对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例、图演示讲解方法来学习和了解DIV CSS display。

    目录
    1. CSS display使用
    2. display的值有哪些
    3. css display block显示
    4. css display none隐藏
    5. css display inline

    一、香港买马资料大全 display使用     -   TOP

    以下为香港买马资料大全运用dispaly,说明这里dispaly值任意

    CSS代码:
    .divcss5{display:none}

    Html对应运用:
    <div class="divcss5">我是测试内容</div>
    根据以上可以自己香港买马资料大全下,看看使用结果

    常用display
    1、div{display:block} 有换行作用。
    案例:图片做背景,隐藏图片上文字//www.ziixf.tw/jiqiao/j55.shtml

    2、div{display:None } 隐藏对象及对象内容。
    案例:CSS隐藏HTML内容 //www.ziixf.tw/jiqiao/j55.shtml

    3、div{display:Inline } 在一排显示。
    代表案例,对li列表默认一排显示li{display:Inline }

    二、display的值有哪些     -   TOP

    Css display值与解释-(详细可见CSS手册CSS display手册
    参数:

    block :块对象的默认值。用该值为对象之后添加新行
    none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    inline :内联对象的默认值。用该值将从对象中删除行
    compact :分配对象为块对象或基于内容之上的内联对象
    marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
    inline-table :将表格显示为无前后换行的内联对象或内联容器
    list-item :将块对象指定为列表项目。并可以添加可选项目标志
    run-in :分配对象为块对象或基于内容之上的内联对象
    table :将对象作为块元素级的表格显示
    table-caption :将对象作为表格标题显示
    table-cell :将对象作为表格单元格显示
    table-column :将对象作为表格列显示
    table-column-group :将对象作为表格列组显示
    table-header-group :将对象作为表格标题组显示
    table-footer-group :将对象作为表格脚注组显示
    table-row :将对象作为表格行显示
    table-row-group :将对象作为表格行组显示

    三、css display block     -   TOP

    Display:block是我们常用的,block也是Display默认的值。
    解释:该对象随后的内容自动换行。
    css display block实例

    CSS代码:

    1. .divcss5{display:block} 

    Html对应运用代码:

    1. <span class="divcss5">我的后面文字会换行</span>我是被前面的divcss5对应CSS属性换行。 
    2. <span>不会被换行,因为我没有被设置display:block</span> 

    对应结果截图:
    div+css display
    说明这里使用span作实例,一个被设置CSS样式,一个未设置,自己可以对比被设置DIV display:block样式的对象随后的内容被换行。

    四、css display none隐藏内容     -   TOP

    此display的none值,我们也常常使用,用于隐藏对象内容,被隐藏的对象也不会占用自身固有宽度高度空间。
    详情可见CSS隐藏讲解://www.ziixf.tw/jiqiao/j55.shtml

    五、css display inline     -   TOP

    Display:inline,我们常常在li中使用它。功能是让li排成一排(称:删除行)。
    接下来我们以一个未设置li列表与一个设置css Display inline样式对比实例演示演示。

    Css代码
    ul.divcss5 li{display:inline}
    解释:ul.divcss5对应li css样式属性为display:inline

    Html对应代码:

    1. <ul> 
    2.     <li>我父级ul没有divcss5样式</li> 
    3.     <li>我是独行</li> 
    4.     <li>我是独行</li> 
    5. </ul> 
    6.  
    7. <ul class="divcss5"> 
    8.     <li>我父级ul有divcss5样式</li> 
    9.     <li>我站成一排</li> 
    10.     <li>我在divcss5下li站成一排</li> 
    11. </ul> 

    演示结果图:
    div css display none inline
    说明:设置css为display:inline的li对象,li被排成一排,而未设置的li列表对象仍然继承原来自身独占一行的CSS样式。

    以上是香港买马资料大全为大家整理和展示的关于CSS display常用的属性对应display none、display inline、display block值的详细讲解与实例,希望对你有帮助。同时有什么问题或疑问请到DIVCSS5的CSS论坛发贴讨论、求助。

    如需转载,请注明文章出处和来源网址://www.ziixf.tw/rumen/r291.shtml

    香港买马资料大全 www.ziixf.tw 如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    香港买马资料大全文章修订日期:2018-08-14 17:37 原创:香港买马资料大全
    本文香港买马资料大全 www.ziixf.tw DIVCSS5版权所有。

  • 热身赛-任骏飞19分吴前18分 男篮蓝队主场击败伊朗 2019-09-16
  • 埃隆·马斯克 特斯拉8月将推出“全自动驾驶”功能 2019-09-15
  • 九江召开乡村振兴战略春风行动总结会议 林彬杨出席并讲话 2019-09-15
  • 十三届全国人大一次会议在北京闭幕 2019-09-09
  • 重庆黔江举行119消防文艺汇演活动 2019-09-07
  • 长子县全面推进“四好农村路”建设 2019-09-07
  • “海博会”宁夏旅游喜获最佳设计奖和最佳人气奖--旅游频道 2019-09-03
  • 紫光阁中共中央国家机关工作委员会 2019-08-29
  • 江西省“放管服”改革再出实招 2019-08-27
  • 今年一季度保险消费投诉高位运行 监管部门严查 2019-08-27
  • 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-08-17
  • 纸质书电子书何必分高低 2019-08-17
  • 山东栖霞聚焦扶贫领域精准监督 现场质询跟踪督办 2019-08-16
  • 开发者回顾《最终幻想12》的游戏制作过程 2019-08-13
  • 中欧班列整车进口专列抵达西安港 2019-08-13
  • 官方黑龙江时时彩 河内5分彩控 福利彩票开奖结果看 幸运飞艇网站注册送彩金 安徽时时选号技巧 福彩20选5复式计算器 28杠下载 北京pk视频直播 天天彩是正规的吗 手机电玩骗局