zoukankan      html  css  js  c++  java
  • span 元素无法设置宽度问题

    span 元素为行内元素,没有width属性,需要转换为块级元素才可以设置width;

    拓展:html元素分为块级元素,行内元素、可变元素。

    行内元素与块级元素直观上的区别

    1 、行内元素会在一条直线上排列,都是同一行的,水平方向排列

        块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

    2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

    3.行内元素与块级元素属性的不同,主要是盒模型属性上

    行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

    行内元素转换为块级元素

            display:block (字面意思表现形式设为块级)

                        display值:

    描述
    none 此元素不会被显示。
    block 此元素将显示为块级元素,此元素前后会带有换行符。
    inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block 行内块元素。(CSS2.1 新增的值)
    list-item 此元素会作为列表显示。
    run-in 此元素会根据上下文作为块级元素或内联元素显示。
    compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
    table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
    inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
    table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
    table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
    table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
    table-row 此元素会作为一个表格行显示(类似 <tr>)。
    table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
    table-column 此元素会作为一个单元格列显示(类似 <col>)
    table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
    table-caption 此元素会作为一个表格标题显示(类似 <caption>)
    inherit 规定应该从父元素继承 display 属性的值。

    引用 http://blog.csdn.net/sykent/article/details/7738408

     
     
  • 相关阅读:
    用HTML5的Audio标签做一个歌词同步的效果
    关于AJAX的跨域问题
    java 计算器后台实现
    springboot 学习(一) 配置mybatis ,全局日期处理
    Java不可见字符处理
    eclipse 常用插件
    Spring data jpa 返回map 结果集
    Oracle数据中表值插不进去问题(转)
    利用Eclipse的JPA自动生成注解实体
    对象-Map 相互转换
  • 原文地址:https://www.cnblogs.com/huxdiy/p/5645422.html
Copyright © 2011-2022 走看看