精华内容
下载资源
问答
  • 块级元素,行内元素,行内块元素
    2022-02-10 16:45:54

    常见元素类型有:块级元素、行内元素、行内块元素 。(这里所说的元素,就是指标签)

    一.块级元素:

    块级元素独占一行,不和其他元素并排;可以设置宽高和上下外边距;不设置宽度时默认宽度 100%;可以容纳其他块元素和内联元素;常见的块级元素:div h1~h6 p ul ol li dl dt dd,以及 table form等。

    二.行内元素:

    不霸占位置,可以和其他行内元素或文字内容并排,不支持设置宽高,默认宽高为0,内容撑 开宽高;只能容纳文本和其他内联元素;不能设置上下外边距;常见的内联元素:a span b i strong em del等。

    三.行内块元素

    可以通过 display 属性对元素进行类型转换:

    • display:none; /* 元素不显示 */
    • display:block; /* 元素以块级形式展示 */
    • display:inline; /* 元素以行内形式展示 */
    • display:inline-block; /* 元素以行内形式排列,以块级形式展示 */

    inline-block(行内块元素)的特点:

    块级元素转换后宽高默认为0,且能够水平排放,行内元素转换后支持宽高和上下margin,

    行内块元素和行内元素或者文字 之前的空格和换行会被解析成一个空格字符(通过设置父级字体 大小解决,或者直接删除代码中的间隙内容)

    不支持margin的auto属性,IE6 7不支持.

    另外,img input 等元素属于inline元素,但是拥有inlin-block的特性。

    更多相关内容
  • 当设定新的宽度,如果宽度是100%,并且padding、margin不为零,导致块级元素宽度溢出父元素 3、盒子模型的高度默认由内容决定 4、盒子模型中高度、宽度和内外边距都是可控制 5、可以容纳行内元素和其他块级元素。  ...
  • 块级元素和内联元素的默认宽高

    千次阅读 2019-06-22 18:53:45
    我们先明确一下文档流的...宽度:不受width的限制,文字内容决定的,padding 和 margin 可以改变宽度。 高度:不受height的限制,padding 和margin 也不能改变。可以通过line-height 和 font-size来改变。 二、块...

    我们先明确一下文档流的概念:对于内联元素,是从左到右排列的,
    当宽度不够时换行;对于块级元素,是从上到下排列的,每一个元素都另起一行。

    一、内联元素宽高的确定

    宽度:不受width的限制,有文字内容决定的,padding 和 margin 可以改变宽度。

    高度:不受height的限制,padding 和margin 也不能改变。可以通过line-height 和 font-size来改变。

    二、块级元素宽高的确定

    宽度:
      1、可以自行设置width的值;
      2、不设置宽度时的值为auto,默认宽度是父元素的宽度-自身的border-自身的margin。
      3、需要注意的是如果宽度写了100%,应该是元素内容的宽度(content)等于父元素的宽度,元素的宽度应该等于这个宽度加自身的border,会凸出来一部分。

    高度:
      1、可以自行设置height的值;
      2、默认值为0;
      3、由元素内部的文档流中的元素的高度的总和决定的(里面元素的height+padding+margin有合并的可能),当元素脱离文档流时,不能用于父元素高度的计算;
      4、当块级元素里面是文字时,文字只有一行,高度由line-height决定,文字有多行,会自动换行,但是碰到长度很长的单词时需要手动添加连字符(-)换行,有一个属性与之相关,word-breaking: break all; 超出宽度,不管单词是否结束都换行。

    三、inline-block元素宽高的确定

    宽度:
      1、设置width的值,超出宽度部分的处理方式和div一样,多个inline-block元素处于一行中时和inline元素的效果一样,可以用white-space控制是否换行;
      2、内容决定宽度。
      
      https://www.cnblogs.com/CCCLARITY/p/8270234.html

    展开全文
  • 作者按:又翻出来一篇5年前(2006年12月28日)写的关于盒模型的文章,都不知道参考了哪本书了。...内容提要 透彻掌握CSS可视化模型的原理,可以让我们准确判断某个意外行为到底是因为CSS样式问题,还是CSS解析

    作者按:又翻出来一篇5年前(2006年12月28日)写的关于盒模型的文章,都不知道参考了哪本书了。只能凭印象感谢 Eric Meyer 的《CSS权威指南(第2版)》(The Definitive Guide, 2nd Edition)——因为当时作为练习刚翻译完这本书。

    内容提要 透彻掌握CSS可视化模型的原理,可以让我们准确判断某个意外行为到底是因为CSS样式问题,还是CSS解析引擎问题。本文要讨论的要点是,当margin-leftwidthmargin-right这三个属性分别取auto值或大于0的值,进而形成不同组合的情况下,如何确定块级元素中各个组成部分的宽度。

    块级元素和行内元素

    CSS把处在正常文档流中的不同html元素区分为块级元素(block element)和行内元素(inline element)。一般来说,所谓块级元素就是指当它们显示在浏览器中时,会在自身前后各插入一个空行,而使自身在页面中占据一个相对独立的块状区域的元素。因此,HTML文档中连续的块级元素的典型显示方式就是“堆叠”。块级元素的例子有h1h6divp等。而行内元素则是指以自身所包含的内容决定在页面中占据空间的大小,并且可以与其他行内元素共处一行的元素。行内元素的典型显示方式就是“连接”。行内元素的例子有aimgspaninput等。对于行内元素,又可以进一步分为可替换行内元素和不可替换行内元素,两者的区别在于元素中所包含的内容是否直接显示在页面中。不可替换的行内元素,如a元素中的链接文本会直接显示在网页中;而可替换的行内元素,如img,当它在网页中显示时会被其src属性指向的图像替代。本文讨论的是块级元素,有关行内元素的更多内容请参考其他资料。

    正常文档流 指的是HTML文档元素在进行内容布局时所遵循的从左到右、从上到下的表现方式。这种文档流布局的方式对于某些语言可能会有所不同(比如从右往左阅读的语言)。HTML中的大多数元素都处在正常的文档流中,而一个元素要脱离正常流的唯一途径就是浮动或定位。

    块级元素的宽度

    块级元素的宽度是指块级元素内容区、左右内边距、左右边框和左右外边距的宽度之和。而块级元素内容区的宽度由该元素的width属性来表示(或设置)。

    enter image description here

    图1简单的盒模型示意图

    有一个简单的规则,就是块级元素的宽度总是等于其父元素内容区的宽度。如果一个div元素的父元素是body,那么这个div元素的宽度就等于body的宽度,也就是浏览器中窗口的宽度。一个处在正常文档流中的块级元素,其宽度是由七个部分共同决定的。可以称为块级元素的水平“七属性”,它们分别是:

    • margin-left
    • border-left
    • padding-left
    • width
    • padding-right
    • border-right
    • margin-right

    enter image description here

    图2 块级元素的水平“七属性”

    如图2所示,块级元素在水平方向上的宽度是由七个CSS属性共同决定的。例如,一个div元素中包含一个p元素。而div元素的宽度是500px,那么这个p元素内容区的宽度(width)加上其左右内边距、左右边框和左右外边距之和就等于500px。这个计算过程用公式表示,就是:

    margin-left + 
    border-left + 
    padding-left + 
    width + 
    padding-right + 
    border-right + 
    margin-right 
    = 500px

    自动水平属性如何决定块级元素的宽度

    在块级元素的水平七属性中,只有三个属性可以使用auto(自动)值,如图3所示。

    enter image description here

    图3 可以取auto值的水平属性

    也就是说,只有margin-leftwidthmargin-right这三个属性可以使用auto值。这正是本文要讨论的核心问题,即在上述三个属性分别取不同的auto值和长度值,形成不同组合的情况下,相应块级元素盒子中各部分的宽度是如何确定的?

    在掌握了各种组合的可能性和相应结果的基础上,我们就可以在遇到意外的情况时,对到底是CSS样式的问题,还是CSS解析引擎的问题作出正确的判断。并根据判断来决定是修改CSS样式、向浏览器提供商报告bug,还是采取过滤或hack手段来解决问题。

    现在举例子说明,假设有如下简单的html代码:

    <div>
        <p> </p>
    </div>

    而相应有8种可能的CSS规则:

    1. p { margin-left:auto;width:auto;margin-right:auto; }
    2. p { margin-left:50px;width:auto;margin-right:auto; }
    3. p { margin-left:auto;width:auto;margin-right:50px; }
    4. p { margin-left:50px;width:auto;margin-right:50px; }
    5. p { margin-left:auto;width:200px;margin-right:auto; }
    6. p { margin-left:50px;width:200px;margin-right:auto; }
    7. p { margin-left:auto;width:200px;margin-right:50px; }
    8. p { margin-left:50px;width:200px;margin-right:50px; }

    将这8种可能的CSS规则应用到上面的标记以后,会得到如图3所示的结果(图中为父元素div添加了边框,而为了表示内容区的宽度,也为p元素添加了背景)。

    enter image description here

    图4 自动宽度的8种可能性

    下面,我们就来逐一分析这8种情况:

    第一种情况:

    规则是 p { margin-left:auto;width:auto;margin-right:auto; }

    即,三个属性全都取auto值。如图3所示,结果是p元素的内容区的宽度和父元素div的宽度相等。根据前面的公式(此例未考虑左右边框和内边距,假设它们全取默认值0)我们知道,此时的margin-left:automargin-right:auto等同于margin-left:0margin-right:0。或者说此时的左右外边距都等于0。

    第二种情况:

    规则是 p { margin-left:50px;width:auto;margin-right:auto; }

    即,把左外边距明确设置为50像素,widthmargin-right的值仍然是auto。如图3所示,结果是p元素的内容区宽度等于div元素的宽度减去50像素。也就是说,此时左外边距是50像素,而margin-right:auto相当于margin-right:0,即右外边距为0。

    第三种情况:

    规则是 p { margin-left:auto;width:auto;margin-right:50px; }

    与第二种情况类似,只不过是把右外边距而不是左外边距明确设置为50像素。图3所示的结果告诉我们,此时右外边距是50像素,而左外边距为0。(以上三种情况,值为auto的外边距都被重置为默认值0)

    第四种情况:

    规则是 p { margin-left:50px;width:auto;margin-right:50px; }

    这次是把左、右外边距都明确地设置为50像素,而只有width属性是auto。如图3所示,结果是p元素内容区的宽度等于div的宽度减去(50+50=)100像素。也就是说,50像素的左、右外边距是有效的。p元素内容区在左右外边距之间以自动适应的宽度值补足了div元素的宽度。

    第五种情况:

    规则是 p { margin-left:auto;width:200px;margin-right:auto; }

    这次把左、右外边距都设置为auto,而把width明确地设置为200像素。如图3所示,结果是p元素的内容区宽度就是设置的200像素,而且,由于左右外边距同为auto,使得p元素在div元素中水平居中。这种情况也是网页布局中最常用的居中块级元素居的主要手段。

    第六种情况:

    规则是 p { margin-left:50px;width:200px;margin-right:auto; }

    这次margin-leftwidth分别明确设置成了50px和200px,只有右外边距的值是auto。从图3中可以看到,结果是p元素的内容区就是设置的200像素,而左外边距也是设置的50像素。但右外边距此时在前两个部分之后以自动适应的宽度值补足了div元素的宽度。

    第七种情况:

    规则是 p { margin-left:auto;width:200px;margin-right:50px; }

    与第六种情况相似,但这次是左外边距在后两个部分之前以自动适应的宽度值补足了div元素的宽度。

    第八种情况:

    规则是 p { margin-left:50px;width:200px;margin-right:50px; }

    这是一种典型的情况,即三个属性都明确地设置相应的值。从图3的结果中我们看到,只有左外边距和p元素内容区的宽度是设置的值。右外边距虽然也明确设置了50像素的值,但实际情况就像是使用了auto的第六种情况一样。实际上,在三个属性都明确设置了值,但其中一个值在没有解的情况下--即在不能满足三者之和等于div元素宽度的情况下--在从左往右阅读的语言中,会把右外边距重置为自动适应的宽度值,也就是auto

    小结

    通过对以上8种可能情况的逐一分析,我们可以得出如下结论:

    1. width属性的值设置成auto的情况下,块级元素内容区的宽度取决于左右外边距是否明确设置了值。如果左右外边距值都是auto,则左右外边距的值都会被重置为默认的值0;如果左右外边距中只有一个值是auto,则该值被重置为0,另一个值有效;如果左右外边距都设置了明确的值,两个值都将有效,此时元素内容区的宽度就是父元素的宽度减去左右外边距后的值。需要说明的是,左右外边距的默认值是0,这意味着如果没有在CSS规则中声明margin-left或者margin-right,它们就会使用默认值0。
    2. width属性的值设置为大于0的值的情况下,块级元素内容区的宽度就是由width属性设置的值。此时,左右外边距的值如果都是auto,则会使块级元素在其父元素中居中;如果左右外边距中只有一个值是auto,则明确设置的值有效,auto值会自动适应剩余的宽度;如果左右外边距都设置了明确的值,那么在从左往右阅读的语言中,会把右外边距的值重置为auto

    (注:本文所说“设置明确的值”,是指设置了大于0的值)

    展开全文
  • 如果让我谈“如何水平居中”,我的认知就是“行内元素或行内块元素要靠父元素的text-align:center,块级元素要靠自己的左右margin为auto”,可以说是简单粗暴、能解决大部分问题的认知了。但是,现在想象一下这样的...

    如题,昨天我遇到了这个问题,现在决定写下来,是因为没有在别人的博客里面看到完整的这个思路,所以想做个记录,万一有小伙伴有同样的需求呢?

    先来讲一个我已经知道的知识,自适应宽度居中的问题。

    如果让我谈“如何水平居中”,我的认知就是“行内元素或行内块元素要靠父元素的text-align:center,块级元素要靠自己的左右margin为auto”,可以说是简单粗暴、能解决大部分问题的认知了。但是,现在想象一下这样的场景:你有一个块级容器,里面要展示一张图片,图片是动态的,甚至的大小都不固定,现在我们要求这个块级元素要水平居中,而且大小由里面图片的宽度来确定。

    现在我来梳理一下这个场景:首先,容器是块级的,具有独占一行的特性,也就是不能脱离标准文档流;其次,容器的宽度并不固定,是由图片的大小来决定的,也就是说容器的宽度不能写死;那么问题来了,处于标准流的块级元素,如果不写死宽度,width默认为auto,也就是会占据父容器的剩余空间,根本不可能随着里面图片的宽度来改变宽度!而且,这样一个宽度占满了父级剩余空间的元素,要怎么去水平居中呢?写死容器的宽度为某值,可以做到水平居中,可是里面图片的宽度又是不确定的!

    《CSS揭秘》这本书里提到了一个很好的解决方案:设置块元素的宽度为“最小内容”——width: min-content;也就是说,由块级元素的最小内容的宽度来决定块级元素的宽度——对于英文字母来说,最小内容是最大的连续的字母组成的宽度(因为英文需要空格才能换行),对于中文来说,最小内容就是一个汉字的宽度(因为中文可以随时换行,日文韩文也是类似的),对于图片来说,最小内容就是图片的宽度(因为图片的宽度不可分割,图片不可能换行)

    展示一下我自己敲的demo和示例截图:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        p {
          line-height: 1.5;
        }
        /* figure要宽度等于图片宽度,然后水平居中的效果 */
        /* 块级元素水平居中很容易,但是块级元素宽度默认是占满了父级宽度,宽度无法自适应。
        这里解决了既要保持元素是块级的,又要宽度自适应的问题。 */
        figure {
          /* 基本样式 */
          padding: 10px;
          border-radius: 5px;
          border: 1px solid #ddd;
    
          /* 回退样式,写死最大宽度 */
          max-width: 500px;
          /* 水平居中,并且最大宽度为最小内容的宽度,也就是图片的宽度,因为文字可以随意换行。
          因为最大宽度被写死,所以默认的宽度占满父级就不生效了 */
          margin: auto;
          max-width: min-content;
    
        }
        /* 图片继承最大宽度,让图片不会出框 */
        figure > img {
          /* 如果min-content是生效了,则这里的inherit不会生效。
          因为如果生效了,则这里的图片最大宽度就是500,而我这里的图片宽度520 */
          max-width: inherit;
        }
      </style>
    </head>
    <body>
      <figure>
        <img src="img/kid.jpg" alt=""/>
        <p>这里的文字不重要,重要的是宽度确实由图片来决定了,换一张图片也是居中的。还准备了回退样式
    
    。</p>
      </figure>
    </body>
    </html>

    width: min-content的方法我也会用在两端有圆角,左右内边距确定,宽度不确定(由里面的文字撑大)的场景:这里除了要设置宽度为min-content以外,还要注意设置white-space: nowrap;阻止换行,否则会出现宽度为一行文字的悲剧。

    这里再描述一下,昨天我遇到的问题——一个水平导航,由ul和li组成的,里面是一个个a标签。这个导航要在占满全屏的父容器水平居中。因为导航的宽度由里面的链接来撑大,而且不足版心的宽度,所以我认为宽度不能写死,也要实现水平居中。这个问题使用width: min-content;white-space: nowrap;不能解决(这会变成里面的宽度等于单个链接文字的宽度,一行一个链接,竖着往下排。因为里面的li太多了,并不是一个整体的),简直急死我了。

    所以,想让这个ul水平居中,就需要使用margin左右auto,也必须让它不脱离标准流,可是它的宽度也不能写死,最后我找到了解决办法,这里简单讲一下:display: table;//元素还是块级元素,但是宽度并不占满父级剩余空间,而是由内容撑大   margin: 0 atuo; //块级元素水平居中   另外可以有float:none;让元素不脱离标准流

    展开全文
  • 1)块级元素 特点: 1.总是从新的一行开始 2.高度、宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大多为结构性标记 常见块级...
  • 块级元素(block)特性: •总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; •宽度(width)、高度(height)、内边距(padding)和外边距...块级元素主要: 复制代码代码如下: address , blockquot
  • 行内元素 块级元素

    2021-09-08 14:40:51
    如果不给宽度块级元素就默认为浏览器的宽度,即就是100%宽; 特点 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。 2.元素的高度、宽度、行高和顶...
  • 块级元素和行内元素,行内块元素

    千次阅读 多人点赞 2020-02-01 21:03:56
    在学习 CSS 的时候发现,发现有些...又称为内联元素,行内元素大小是靠本身内容大小,宽高都设置无效。 常见的特点如下: 与其他行内元素并排 设置宽高无效 默认的宽度就是文本内容宽度 水平方向的 paddin...
  • 块级元素和行内元素

    2021-03-23 13:37:02
    常见的块级元素有: <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>,<hr>等 块级元素的特点: 块级元素会独占一行,所以块级元素会新起一行。 高度,行高,外边...
  • 常见块级元素:address、div、dl、form、h1-h6、menu、ol、ul、li、p、table、header、nav、footer、article、section等常见内联元素:a、br、font、img、input、label、select、span、textarea、b、small块级元素...
  • 每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性 常见元素:div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr 特点: 块级元素会独占一行 高度,...
  • 透彻理解块级元素宽度

    千次阅读 2014-10-30 12:06:38
    作者按:又翻出来一篇5年前(2006年12月28日)写的关于盒模型的文章,都不知道参考了哪本书了。...内容提要 透彻掌握CSS可视化模型的原理,可以让我们准确判断某个意外行为到底是因为CSS样式问题,还是CSS解析引擎
  • 详谈CSS中块级元素宽度

    千次阅读 2013-12-25 18:40:47
    1.块级元素和行内元素 CSS把处在正常文档流中的不同html元素区分为块级元素(block element)和行内元素(inline element)。一般来说,所谓块级元素就是指当它们显示在浏览器...块级元素的例子h1到h6、div、p等。
  • 根据CSS规范的规定,每一个网页元素都一个display属性,用于确定该元素的类型,每一个元素都默认的display属性值,比如div元素,它的默认display属性值为“block”,成为块级元素 display: block; 常见块级元素...
  • 面试官:请说一下行内元素哪些,块级元素有哪些 行内元素:a b span img input select strong; 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p; 空元素,即没有内容的HTML元素。空元素是在开始标签...
  • 对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素等的时候,才深刻明白自己也就...
  • 一、写在前面 行内元素和块级元素以及行内块级元素...1、它的宽度有内容决定,高度有内容字体大小决定。 2、它不可以设置宽高。 3、它可以和其他行内元素位于同一行。 例如:<span>,<label>,<i>,<
  • 1、关于行内元素和快元素的说明:根据CSS规范的规定,每一个网页元素都一个display属性,用于确定该元素的类型,每一个元素都默认的display属性值,...div这样的块级元素,就会自动占据一定矩形空间,可以通过...
  • 块级元素宽度默认值为100%,而不是auto;因此其宽度不会根据子元素内容动态适应。 如何实现父级元素宽度动态适应其子元素。 方法一 display:inline; 给块级元素设置inline-block值。 { display: inline-block; } ...
  • CSS中的块级元素、行内元素和行内块元素

    万次阅读 多人点赞 2019-05-21 14:09:11
    元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。...接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。 块级元素 block 块级元素,顾...
  • 行级元素(行盒:inline) 常见行内元素:span、a、(img、textarea、button、input)、label、select、canvas、audio、video,b, i, ...4、行级元素内不能嵌套块级元素 5、水平方向排列 面试题: 如果行级与行级元素
  • 1、块级元素 *每个块元素通常都会独占一行或者是多行,可以单独设置高、宽以及对齐属性 *常见块元素: div 、p、h1-h6、form、ul、ol、dd、dt、li、table、tr、td、th、hr *特点: ·块级元素会独占一行 ·...
  • 一、行内元素和块级元素 ...它的宽度内容决定,高度有内容字体大小决定; 它不可以设置宽高; 它可以和其他的行内元素位于同一行; 例如:<span>、<label>、<i>、<e>等。 1
  • 每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。 常见的块级元素有:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 等 行内元素 行内元素...
  • 实践 1.HTML 行内元素 与 块级元素 行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素 只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和...
  • 三大元素块级元素、内联元素以及块级内联元素的具体作用,和其中的一些标签的用处、语法和属性,通过style可以改变大部分标签的属性,学会通过img在网页中插入图片并能更改大小,利用input标签中的type属性来改变...
  • 块级元素: 常见的块级元素有:<div>、<table>、<form>、<p>...1.块级元素会单独占有一行,默认垂直向下排列。...2.块级元素宽度,高度,页边距,边缘空白,大小都是可以调控的。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,982
精华内容 11,192
关键字:

没有宽度的块级元素有内容大小怎么计算

友情链接: emp.zip