zoukankan      html  css  js  c++  java
  • css div嵌套层中button的margin-top不起作用解决方法

    首先声明本人资质尚浅,本文只用于个人总结。如有错误,欢迎指正、共同提高。

    -----------------------------------------------------------------------------------

        其实不仅仅是button,所有行内元素都存在这个问题(如span),这个问题的本质区别在于 block,inline和inlinke-block细节;

    1. block元素会独占一行,默认情况下,block元素宽度自动填满其父元素宽度;

      2. inline元素不会独占一行,且设置width,height属性无效。另外,重点就是 inline元素的margin和padding属性,水平方向的padding, margin都产生边距效果,但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果;

      3.  inline-block 简单来说就是使其既具有block的宽度高度特性又具有inline的同行特性。顾名思义就是在不换行但拥有块元素其他的性质。

      所以针对如题的问题可以明了的总结为:行内元素设定margin-top是无效的,可以设定成块之后脱离文档流来解决,如:

     float、position:absolute、display: inline-block/table-cell(或其他 table 类型)、overflow: hidden/auto、父层div加position: absolute等等。

     

    附:

    1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table

       行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite,  
                       
    内联元素(inline element)
    a - 锚点
    b - 粗体(不推荐)
    br - 换行
    em - 强调
    font - 字体设定(不推荐)
    i - 斜体
    img - 图片
    input - 输入框
    label - 表格标签
    select - 项目选择
    small - 小字体文本
    span - 常用内联容器,定义文本内区块
    strike - 中划线
    strong - 粗体强调
    sub - 下标
    sup - 上标
    textarea - 多行文本输入框
    tt - 电传文本
    u - 下划线
    
    
    
    
    
    
    内联元素(行内元素)内联元素(inline element)
    * a - 锚点
    * abbr - 缩写
    * acronym - 首字
    * b - 粗体(不推荐)
    * bdo - bidi override
    * big - 大字体
    * br - 换行
    * cite - 引用
    * code - 计算机代码(在引用源码的时候需要)
    * dfn - 定义字段
    * em - 强调
    * font - 字体设定(不推荐)
    * i - 斜体
    * img - 图片
    * input - 输入框
    * kbd - 定义键盘文本
    * label - 表格标签
    * q - 短引用
    * s - 中划线(不推荐)
    * samp - 定义范例计算机代码
    * select - 项目选择
    * small - 小字体文本
    * span - 常用内联容器,定义文本内区块
    * strike - 中划线
    * strong - 粗体强调
    * sub - 下标
    * sup - 上标
    * textarea - 多行文本输入框
    * tt - 电传文本
    * u - 下划线
    * var - 定义变量

    块元素(block element)
    * address - 地址
    * blockquote - 块引用
    * center - 举中对齐块
    * dir - 目录列表
    * div - 常用块级容易,也是css layout的主要标签
    * dl - 定义列表
    * fieldset - form控制组
    * form - 交互表单
    * h1 - 大标题
    * h2 - 副标题
    * h3 - 3级标题
    * h4 - 4级标题
    * h5 - 5级标题
    * h6 - 6级标题
    * hr - 水平分隔线
    * isindex - input prompt
    * menu - 菜单列表
    * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
    * noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)
    * ol - 排序表单
    * p - 段落
    * pre - 格式化文本
    * table - 表格
    * ul - 非排序列表

    可变元素
    可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    * applet - java applet
    * button - 按钮
    * del - 删除文本
    * iframe - inline frame
    * ins - 插入的文本
    * map - 图片区块(map)
    * object - object对象
    * script - 客户端脚本

    如有错误,欢迎评论指正、共同提高。[握手]    

    欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/juneling ]

  • 相关阅读:
    解决在QEMU上仿真STM32F429时出现的若干问题
    CentOS 7.1, 7.2 下安装dotnet core
    [尝鲜]妈妈再也不用担心 dotnet core 程序发布了: .NET Core Global Tools
    程序员节应该写博客之.NET下使用HTTP请求的正确姿势
    [开源 .NET 跨平台 Crawler 数据采集 爬虫框架: DotnetSpider] [五] 如何做全站采集?
    [开源 .NET 跨平台 Crawler 数据采集 爬虫框架: DotnetSpider] [一] 初衷与架构设计
    ubuntu15.10 或者 16.04 或者 ElementryOS 下使用 Dotnet Core
    解决 docker on windows下网络不通
    Orchestrator中 errant 的判断
    golang 中时间差的计算
  • 原文地址:https://www.cnblogs.com/juneling/p/6068620.html
Copyright © 2011-2022 走看看