精华内容
下载资源
问答
  • 看到一个面试题 关于行内元素span的* {padding: 0;margin: 0;}span {padding: 100px;border: 1px solid red;}12我当时就笑了还有这种题? 送分的?我想的结果:实际结果:我擦! 啪啪啪打脸!为什么padding-top被...

    看到一个面试题 关于行内元素span的

    * {

    padding: 0;

    margin: 0;

    }

    span {

    padding: 100px;

    border: 1px solid red;

    }

    1

    2

    我当时就笑了还有这种题? 送分的?

    我想的结果:

    1460000017762551

    实际结果:

    1460000017762552

    我擦! 啪啪啪打脸!

    为什么padding-top被无视了?

    提出这个疑问后我又被打脸了!

    * {

    padding: 0;

    margin: 0;

    }

    span {

    padding: 100px;

    border: 1px solid red;

    }

    div{

    border: 1px solid red;

    }

    1

    2

    3

    1460000017762553

    其实span是不支持padding-top、padding-bottom,不过奇怪的是既然padding不支持那为什么边框显示是有padding-bottom呢?

    查了好多文章 结果只得到了一句话 行内不可替换元素padding会对边框产生影响!

    我擦 不可替换元素 老子干了不到十年前端没听过啊?

    是的官方英文文档和高程上都有说过

    span、a属于不可替换元素

    input属于可替换元素

    padding、margin针对不可替换元素 padding-top、padding-bottom和margin-top、margin-bottom无效。。。无效。。。

    哈哈 总结一下多读书是有用的!

    您的点赞是我继续下去的动力,谢谢!

    展开全文
  • 行内元素与行内块元素的margin-top问题 对行内元素设置margin-top(bottom)不起作用,margin-right(left)起作用,行内块元素可以设置宽高,设置margin属性也起作用。如果要设置行内元素需转换为行内块元素 行内...

    行内元素与行内块元素的margin-top问题

    对行内元素设置margin-top(bottom)不起作用,margin-right(left)起作用,行内块元素可以设置宽高,设置margin属性也起作用。如果要设置行内元素需转换为行内块元素

    行内元素转换为行内块元素:

    display:inline-block;

    行内元素及行内块元素请看前文笔记

    展开全文
  • 我们知道在做网页布局的时候一般是采用div+css的方式来做页面布局的,div+css布局最重要的是要理解块状元素和行内元素,我们把块状元素,行内元素通过float浮动的方式来把相应的元素摆放到正确的位置上去,那么什么...

    我们知道在做网页布局的时候一般是采用div+css的方式来做页面布局的,div+css布局最重要的是要理解块状元素和行内元素,我们把块状元素,行内元素通过float浮动的方式来把相应的元素摆放到正确的位置上去,那么什么是块状元素?什么是行内元素呢?以及块状元素和行内元素分别有哪些?

    什么是块状元素?

    我用自己觉得最通俗易懂的语言来解释的话就是:块状元素的默认的宽度就是100%,也就是占据了整行,不允许任何一个元素和它并肩摆放,如最常用的就是div元素

    什么是内联元素?

    没有准确的宽度和高度属性且不能改变,它的宽高值取决于这个元素本身的大小。可以多个内联元素摆放在同一行里面,如常用的span元素

    块状元素与内联元素之间的转换

    块状元素为display:block,内联元素为display:inline.二者之间可通过设置display属性值来相互转换,比如我们可以设置一个块状元素div{display:inlie-block;}从而转化为一个内联元素。

    块状元素有哪些?

    网页中常见的块状元素有以下这些:

    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 – 无序列表
    
    

    内联元素有哪些?

    网页中常见的内联元素有以下这些:

    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 – 下划线

    前面介绍了什么是块状元素,什么是内联元素以及常见的块状元素和内联元素有哪些,接下来就讲解一下二者的margin以及padding的区别。

    我们知道块状元素的宽度是默认为100%,即有宽度和高度,而且可以根据要求随意改变的。块状元素的margin和padding值也同样如此。



    内联元素的padding-left,padding-right,margin-left,margin-right可改变width,height,padding-top,padding-bottom,margin-top,margin-bottom为不可改变。

    下图中给class为name的span元素设置了margin-top和padding-top分别为10px但是没有效果



    接下来我们给它设置margin-left和padding-left可看出是有效果的:


    margin-bottompadding-bottom,margin-right,padding-right雷同。

    展开全文
  • 这让我误以为 text标签是行内元素(我也误认为span 也是 行内元素了…),继而误以为是因为 flex 元素行内元素排列导致的,然后测试一番,发现并非如此,margin-top依旧起作用了。 后面重新审查了一遍代码发现...

    flex 和 inline元素

    起因: 在书写wx 小程序中,发现 text 模块的 margin-top 一直没起作用,而我跟着临摹打的效果图却表示 text 的margin-top 确实起作用了。这让我误以为 text标签是行内块元素(我也误认为span 也是 行内块元素了…),继而误以为是因为 flex 元素和 行内块元素排列导致的,然后测试一番,发现并非如此,margin-top依旧起作用了。 后面重新审查了一遍代码发现 container 被我打错了, .container 的类样式并没有起作用,修改完成后发现 text的 margin-top 起作用了。神奇! 然后查询 margin 失效的原因,看到大多数都是因为元素为inline 元素所导致的, 这让我反过来思考, text 是否为行内( inline)元素,将 text标签替换为 view 标签,发现 margint-top 正常,再去查找资料,才知道 行内元素(inline) 是无法设置 margin-top和 margin-bottom的,可是一开始的效果表示了 text的 margin-top 确实是起作用了,会不会是 flex 导致 行内元素的margin-top 起作用了,用了简单的实例测试了一下,发现确实如此。

    测试代码如下:

    CSS样式

        <style type="text/css">
            /* .wrap{
                display: flex;
                flex-direction: column;
                background-color:#666;
            } */
            .c1{
                display: block;
                height: 60px;
                width: 60px;
            }
            .c2{
                display: inline;
                margin-top: 300px;
                background-color: aqua;
            }
            span{
                background-color: aqua;
                margin-top: 300px;
            }
        </style>
    

    HTML代码块

    <body>
        <div class="wrap">
            <div class="c1"></div>
            <div class="c2">12312312312</div>
            <span>1231231</span>
        </div>
    </body>
    

    效果图如下:

    为父元素添加了display:flex
    为父元素添加了diaplay:flex
    没有添加 display:flex
    没有添加 display:flex

    结论:父元素如果使用了 display: flex 能使 行内元素(inline) 的margin-top 起作用, margin-bottom 也起作用了。

    PS: wx idea 里面的范围提示有点毒,明明 text 作为一个行内元素,加了margin-top 应该是没有作用范围的,可还是显示出来了,让我一度误认为 text 为 inline-block 元素,并且margin-top失效,让我意味前面使用了 浮动(float)。而在 chrome 里面的 span 下设置同样的margin-top ,很明显看得出 margin-top 并没有起作用。

    展开全文
  • 如图所示:效果如图所示:如果是此时改成 text-align:right; 那么就能看到效果了 转载于:https://blog.51cto.com/11871779/2097419
  • 看到一个面试题 关于行内元素span的 <style> * { padding: 0; margin: 0; } span { padding: 100px; ...
  • 内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置...行内元素和块级元素行内元素一般是内容的容器,而块级元素一般是其他容器的容...
  • display:block和float对行内元素支持宽高的区别 写这篇文章的原因是由于笔者在写一个小demo的实例布局时,关注到了一个之前没有关注到的问题。display和float浮动都可以将行内元素转换为块级元素,但是他们又有点...
  • 第一:行内元素与宽度宽度不起作用span {width:200px;}没有变化 第二:行内元素与高度高度不起作用span{height:200px;}没用变化 第三:行内元素与padding,marginspan{padding:200px;}影响左右,不影响上下 ,span包裹...
  • 行内元素:span ,a, ,strong , em, del, ins。特点:在一行上显示;不能直接设置宽高;元素的宽和高就是内容撑开的宽高。块元素:div,h1-h6,p,ul,li。特点:独占一行;可以设置宽高;注释:嵌套(包含)下,子块元素...
  • 一、行内元素一个行内元素只占据它对应标签的边框所包含的空间。二、块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。三、行内元素示例...
  • 1、关于行内元素和快元素的说明:根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级...
  • 行内元素 、块级元素 、行内块元素 区别 行内元素 无论内容多少,总是独占一行 设置宽高无效 对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效 不会自动进行换行 行内元素只能容纳文本或者其他行内...
  • 行内元素和块级元素

    2019-04-10 10:49:13
    行内元素和块级元素 行内元素和块级元素区别 块级元素会独占一行,其宽度自动填满其父元素宽度 行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化 一般...
  • HTML行内元素、块状元素、行内块状元素的区别

    万次阅读 多人点赞 2018-01-27 09:42:35
    HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:  (1)display:inline;... 行内元素最常使用的就是s
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性,因此对于上述问题很有可能答不上来或者...
  • 行内元素与块级元素

    千次阅读 2015-08-11 07:51:40
    一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别  行内元素会在一条直线上排列,都是同一行的,水平方向排列  块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2....
  • css-内联(行内元素、块元素margin、padding block元素的特点: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度。&lt;div&gt;, &lt;p&gt;...
  • 1、块级元素和行内元素的区别 1、块级元素独占一行,宽度自动填满其父元素的宽带 行内元素不会独占一行,相邻的行内元素会排列到...3、块级元素可以设置padding,margin属性,行内元素的padding-left和padding-righ...
  • 块元素、行内元素、行内块元素

    万次阅读 多人点赞 2018-06-01 10:36:08
    一、块元素 block element 块元素的特性 独霸一行,总是在新行上开始 宽度缺省是它父级元素的100%,除非设定一个宽度 高度、行高、外边距、内边距都可以设置 可以容纳其他内联元素或者其他块元素 常见的块...
  • 块级元素和行内元素,行内块元素

    千次阅读 2020-02-01 21:03:56
    在学习 CSS 的时候发现,发现有些...又称为内联元素,行内元素的大小是靠本身内容的大小,宽高都设置无效。 常见的特点如下: 与其他行内元素并排 设置宽高无效 默认的宽度就是文本内容的宽度 水平方向的 paddin...
  • 块级元素 标签 内容 address 定义地址 caption 定义表格标题 dd 定义列表中定义条目 div 定义文档中的分区或节 dl 定义列表 dt 定义列表中的项目 fieldset 定义一个框架集 ...
  • 目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效。虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,...
  • 块级元素和行内元素

    2017-09-10 10:06:50
    当时用一个标签时,第一件事就是弄清楚它是块级元素还是行内元素 块级元素 块级元素会扩展到父元素同宽,body的默认宽度和浏览器窗口一样宽。 这时候你应该理解为什么块级元素会始终占一行了,没错,那就是因为...
  • HTML中块级元素与行内元素的区别和转换在写网页代码的...我们经常用的好多标签被分为两种形式:块级元素和行内元素。这两种类型之间是如何区分和转换的?今天我们就一起来了解一下。1.块级元素块级元素:black el...
  • html行内元素有:a、b、br、code、em、font、i、img、input、span、strong、textarea、u等;块状元素有:address、blockquote、...关于行内元素和块状元素的说明根据CSS规范的规定,每一个网页元素都有一个display属...
  • HTML元素大体被分为三种:行内元素、块级元素、行内块级...//行内元素 display:block;//块级元素 display:inline-block;//行内块级元素 1.行内元素 1.1 行内元素列表 b,big,i,small,tt abbr,acronym,cite,...
  • 行内元素的盒模型

    2021-07-01 19:40:56
    a)行内元素支持设置宽度和高度 b)行内元素可以设置padding,但是垂直方向padding不会影响页面 的布局 c)行内元素可以设置border,但是垂直方向的border不会影响页面 的布局 d)行内元素可以设置margin,但是...
  • 行内元素设置padding和margin是否有效 1.行内元素拥有盒子模型么 答案是是的。没错,行内元素跟块级元素一样,同样拥有盒子模型。 2. 行内元素的padding和margin值的设置是否有效 块级元素的padding和margin值的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,144
精华内容 7,657
关键字:

行内元素支持margin