精华内容
下载资源
问答
  • HTML行内元素、块状元素、行内块状元素的区别  HTML可以将元素分类方式分为行内元素、块状元素和行内...转换为行内元素  (2)display:block;转换为块状元素  (3)display:inline-block;转换为行内块状元素 ...

    HTML行内元素、块状元素、行内块状元素的区别

      HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:

      (1)display:inline;转换为行内元素

      (2)display:block;转换为块状元素

      (3)display:inline-block;转换为行内块状元素

    复制代码

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="utf-8" />
     6         <title>测试案例</title>
     7         <style type="text/css">
     8             span {
     9                  display: block;
    10                 width: 120px;
    11                 height: 30px;
    12                 background: red;
    13             }
    14             
    15             div {
    16                 display: inline;
    17                 width: 120px;
    18                 height: 200px;
    19                 background: green;
    20             }
    21             
    22             i {
    23                 display: inline-block;
    24                 width: 120px;
    25                 height: 30px;
    26                 background: lightblue;
    27             }
    28         </style>
    29     </head>
    30 
    31     <body>
    32         <span>行内转块状</span>
    33         <div>块状转行内 </div>
    34         <i>行内转行内块状</i>
    35     </body>
    36 
    37 </html>

    复制代码

    1.行内元素

      行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体<b>和<i>标签,还有<sub>和<sup>这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助,很实用。

      行内元素特征:(1)设置宽高无效

             (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

             (3)不会自动进行换行

    复制代码

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="utf-8" />
     6         <title>测试案例</title>
     7         <style type="text/css">
     8             span {
     9                 width: 120px;
    10                 height: 120px;
    11                 margin: 1000px 20px;
    12                 padding: 50px 40px;
    13                 background: lightblue;
    14             }
    15         </style>
    16     </head>
    17 
    18     <body>
    19         <i>不会自动换行</i>
    20         <span>行内元素</span>
    21     </body>
    22 
    23 </html>

    复制代码

    2.块状元素

      块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。

      块状元素特征:(1)能够识别宽高

             (2)margin和padding的上下左右均对其有效

             (3)可以自动换行

             (4)多个块状元素标签写在一起,默认排列方式为从上至下

    复制代码

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="utf-8" />
     6         <title>测试案例</title>
     7         <style type="text/css">
     8             div {
     9                 width: 120px;
    10                 height: 120px;
    11                 margin: 50px 50px;
    12                 padding: 50px 40px;
    13                 background: lightblue;
    14             }
    15         </style>
    16     </head>
    17 
    18     <body>
    19         <i>自动换行</i>
    20         <div>块状元素</div>
    21         <div>块状元素</div>
    22     </body>
    23 
    24 </html>

    复制代码

    3.行内块状元素

      行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

      行内块状元素特征:(1)不自动换行

               (2)能够识别宽高

               (3)默认排列方式为从左到右

    复制代码

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="utf-8" />
     6         <title>测试案例</title>
     7         <style type="text/css">
     8             div {
     9                 display: inline-block;
    10                 width: 100px;
    11                 height: 50px;
    12                 background: lightblue;
    13             }
    14         </style>
    15     </head>
    16 
    17     <body>
    18         <div>行内块状元素</div>
    19         <div>行内块状元素</div>
    20         
    21     </body>
    22 
    23 </html>

    复制代码

      在HTML5中,程序员可以自定义标签,在任意定义标签中,加入display:block;即可,当然也可以是行内或行内块状。

    分类: HTML

    展开全文
  • HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: ...1.行内元素  行内元素最常使用的就是span,其他的只...

    HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:
      (1)display:inline;转换为行内元素

      (2)display:block;转换为块状元素

      (3)display:inline-block;转换为行内块状元素

    1.行内元素
      行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体<b>和<i>标签,还有<sub>和<sup>这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助,很实用。

      行内元素特征:(1)设置宽高无效

             (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间,行内元素尺寸                                  由内含的内容决定,盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,但是 margin                                    却只有水平方向的值,垂直方向并没有起作用。行内元素的水平方向的padding-left,padding-right,margin-                                           left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都                                        不会产生边距效果。padding设置上下左右都有效,即会撑大空间但是不会产生边距效果。

             (3)不会自动进行换行

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            div {
                display: inline;
            }
            .div1 {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                width: 100px;
                height: 100px;
                background-color: #FF8500;
            }
        </style>
    
    </head>
    <body>
        <div class="div1">123</div>
        <div class="div2">13</div>
    </body>
    </html>

    显示:

    (显示的宽高与内容有关,其本身没有width、height)

    2.块状元素
      块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。

      块状元素特征:(1)能够识别宽高

             (2)margin和padding的上下左右均对其有效

             (3)可以自动换行

             (4)多个块状元素标签写在一起,默认排列方式为从上至下

    3.行内块状元素
      行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

      行内块状元素特征:(1)不自动换行

               (2)能够识别宽高

               (3)默认排列方式为从左到右

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            div {
                display: inline-block;
            }
            .div1 {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                width: 100px;
                height: 100px;
                background-color: #FF8500;
            }
        </style>
    
    </head>
    <body>
        <div class="div1">123</div>
        <div class="div2">13</div>
    </body>
    </html>

    显示:

       (宽高与盒子大小有关)

    4 . 行内元素与块级元素有什么不同?

    区别一: 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

    区别二: 块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高

    区别三: 块级:块级元素可以设置margin,padding 行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

    区别四: 块级:display:block; 行内:display:inline; 可以通过修改display属性来切换块级元素和行内元素

     

    展开全文
  • 行内元素:display:inline 特点:在水平方向上排列,它的宽高随内容而定。不可以设置宽高,可以设置行高。设置margin和padding的上下无效...1.虽然行内元素设置行高之后会有位置的变化,但是并没有改变盒子大小。 2...

    行内元素:display:inline

    特点:在水平方向上排列,它的宽高随内容而定。不可以设置宽高,可以设置行高。设置margin和padding的上下无效。
    常见的内联元素有:
    a,b,br,em,font,i,img,input,label,select,small,span,strike(中划线),strong
    注意
    1.虽然行内元素设置行高之后会有位置的变化,但是并没有改变盒子大小。
    2.有些行内元素可以设置宽高,是因为它们是置换元素(拥有内置宽高也可以设置宽高属性)。
    置换元素有:input select textarea button label

        span {
                border: 1px solid #ff8080;
                line-height: 100px;
             }
        <span>111</span>
        <span>222</span>
        <span>333</span>
    

    在这里插入图片描述

    块级元素:display:block

    特点:在垂直方向上排列,独占一行,自动换行
    常见的块元素有:
    div,dl,dd,dt,form,h1-h6,hr,ol,p,ul,table,pre,menu,hr

        <style>
         div {
                border: 1px solid #4cbbfc;
                width: 50px;
                height: 50px;
                text-align: center;
                line-height: 50px;
            }
        </style>
        <div>aaa</div>
        <div>bbb</div>
        <div>ccc</div>
    

    在这里插入图片描述

    行内块元素display:inline-block

    特点:拥有块级元素和行内的性质,既可以在一行排列(从左到右),也可以设置宽高等属性,不自动换行。
    行内块元素的兼容性使用
    兼容性:display:inline-block;display:inline;zoom:1;

    展开全文
  • 块级元素和行内元素,行内块元素

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

    在学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签。而某些不会独占一行,典型如 <span> 标签。其实这是因为 CSS 的标签是有区分元素类型的。

    元素分类

    行内元素

    又称为内联元素,行内元素的大小是靠本身内容的大小,宽高都设置无效。

    常见的特点如下:

    • 与其他行内元素并排
    • 设置宽高无效
    • 默认的宽度就是文本内容的宽度
    • 水平方向的 padding 和 margin 属性可以使用。
    • 只能容纳文本级元素和内联元素
    • 注意
      • a 标签可以放块级元素,但是连接里面不能再放连接

    常见的行内元素:

    标签 作用
    <a> 标签定义超链接
    <abbr> 表示一缩写形式
    <acronym> 定义只取首字母缩写
    <b> 定义字体缩写
    <bdo> 可覆盖默认的文本方向
    <big> 定义大号字体加粗
    <br> 定义换行
    <code> 定义计算机代码文本
    <label> 标签
    <select> 创建单选或多选菜单
    <span> 组合文档中的行内元素
    <small> 定义小号字体

    等等…

    除了 p 之外,所有的文本级标签都是行内元素,p 是块级元素

    块级元素

    块元素通常会独占一行,或者多行,它的宽高,边距等都可以设置。

    通常有这几个特点

    • 独占一行
    • 可以设置宽度,高度,margin,padding
    • 宽度默认所在容器的宽度
    • 可以容纳内联元素和块级元素
    • 注意
      • 一些文字级标签不能放块元素。例如:<p>,<h1>~<h6>,<dt>

    常见的块级元素:

    标签 作用
    <caption> 定义表格标题
    <address> 定义地址
    <dd> 定义列表中定义条目
    <div> 定义文档中的分区或节
    <dl> 定义列表
    <dt> 定义列表中的项目
    <fieldset> 定义一个框架集
    <form> 创建 HTML 表单
    <h1>~<h6> 定义标题
    <hr> 定义一条水平线
    <p> 定义段落
    <table> 定义表格
    <li> 标签定义列表项目
    <ul> 定义无序列表
    <ol> 定义有序列表

    等等…

    行内块元素

    行内块元素从文字上看像块级元素和行内元素结合似的,其实比较特殊,比如<input>,<img>,<td> 可以设置宽高属性,这种就称为行内块元素。

    通常有这几个特点。

    • 默认宽度是内容宽度
    • 宽度,高度,行高,margin,padding 都可以设置
    • 和行内元素同一行,之间会留白

    块级元素和行内元素的转换

    display 属性

    通过 display 属性转换,其中 display 有三个值:

    • inline:
      • 值为 inline 将变成行内元素,比如 div
      • 不能设置宽高,和行内元素并排
    • block:
      • 值为 block 的,比如 span
      • 能设置宽高(填充父级),独占一行。
    • inline-block
      • 值为 inline-block 也就是变成行内块元素

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				display: inline;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: green;
    				display: inline-block;
    			} 
    			.span1{
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    				display: block;
    			}
    			.div3{
    				width: 300px;
    				height: 200px;
    				background-color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			div1
    		</div>
    		<div class="div2">
    			div2
    		</div>
    		<span class="span1">
    			span1
    		</span>
    		<div class="div3">
    			div3
    		</div>
    	</body>
    </html>
    
    

    效果
    image
    正如效果图显示,值为 inline 的时候,div1 的宽高无效,仅仅为内容的宽度和高度。div2 为 inline-block 则生效了,而原本 span 是行内元素,设置宽高无效,而且不独占一行,现在设置的值为 block 便都有用了。

    浮动 float 属性

    浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。

    float 一共有三个值:

    • left
      • 表示左浮动
    • right
      • 表示右浮动
    • none
      • 表示不浮动,默认

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				float: left;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: blue;
    				float: right;
    			}
    			.div3{
    				width: 200px;
    				height: 200px;
    				background-color: green;
    				float: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			
    		</div>
    		<div class="div2">
    			
    		</div>
    		<div class="div3">
    			
    		</div>
    	</body>
    </html>
    

    效果图:
    image

    如图所示,三个 div ,其中 div1(红色) 左浮动,div2(蓝色) 右浮动,所以 div 1 仅靠在左边,div 2 仅靠在右边,而 div3 没有。

    如果是浮动,将会和其他不同,脱离标准文档流,也就是相当于不占用位置了,漂浮起来。浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    浮动的特点

    浮动有几个特点,大概是脱离标准流文档,浮动之间元素相互靠近,收缩。

    • 脱离标准流文档

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				width: 50px;
    				height: 50px;
    				background-color: #0000FF;
    				float: left;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: #008000;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</body>
    </html>
    

    效果图:
    image

    对 div1 进行浮动时,会脱离文档流,若向右浮动,直到它的右边缘碰到框的右边缘,若向左浮动,脱离文档流并向左移动,直到它的左边缘碰到包含框的左边缘。因为这样,就会导致原有的 div2 被浮动的 div1 覆盖。

    这里还有一种情况:

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.span1{
    				width: 50px;
    				height: 50px;	
    				background-color: #FF0000;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<span class="span1"></span>
    	</body>
    </html>
    

    效果图:
    image

    这是因为标签一旦设置浮动,就没有分块状元素和行内元素,所以原本的行内元素也能设置宽高。

    • 浮动之间元素相互贴近

    在浏览器父级的宽度足够,那么浮动元素紧挨。

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.div1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				float: left;
    			}
    			.div2{
    				width: 150px;
    				height: 150px;
    				background-color: blue;
    				position:static;
    				float: left;
    				
    			}
    			.div3{
    				width: 200px;
    				height: 200px;
    				background-color: green;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1"></div>
    		<div class="div2"></div>
    		<div class="div3"></div>
    	</body>
    </html>
    

    效果图:
    image

    如果宽度不够,就有收缩情况,会根据包含的父级元素,如果太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”,如下情况:

    • 浮动收缩

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1 {
    				width: 50px;
    				height: 50px;
    				background-color: blue;
    				float: left;
    			}
    
    			.div2 {
    				width: 150px;
    				height: 150px;
    				background-color: green;
    				float: left;
    			}
    
    			.div3 {
    				width: 250px;
    				height: 250px;
    				background-color: #FF0000;
    				float: left;
    
    			}
    
    			.div4 {
    				width: 250px;
    				height: 1250px;
    				float: left;
    
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div4">
    			<div class="div1">
    				div1
    			</div>
    			<div class="div2">
    				div2
    			</div>
    			<div class="div3">
    				div3
    			</div>
    		</div>
    	</body>
    </html>
    
    

    效果图:
    image

    这里父容器 div 4 的宽度不够,div 3 也就自动下滑了。

    如果不设置宽高,那么宽高也就是文本内容高度和宽度。

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1{
    				background-color: red;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			特性
    		</div>
    	</body>
    </html>
    
    

    效果图:
    image

    浮动的覆盖规则

    这里并不是任何情况下浮动的元素向左或向右移动直至左右两边碰到包含框的两边才停止。如果某个浮动的元素在移动的过程中,碰到了包含内容的框时,也会停止。

    也就是浮动元素在移动的过程中,除非碰到框没有内容,否则框内的内容会自我调整位置以防止被覆盖。比如<p>标签中的文本遇到浮动的框例如图像框,就自我调整位置,使得文字围绕着图像避免被覆盖。还有 <img>,<span>包含文字,等等

    这里块级元素即使被覆盖,文字也会围绕在浮动元素旁,因为浮动本身就是为了让文字围绕在图像旁边。

    记住,永远不是一个盒子单独浮动,要浮动就要一起浮动。另外,有浮动,一定要清楚浮动。

    如下 <span> 标签包含文字,不会被覆盖

    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div1 {
    				width: 50px;
    				height: 50px;
    				background-color: blue;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div1">
    			div1
    		</div>
    		<span class="span1">
    			我是 span
    		</span>
    	</body>
    </html>
    

    效果图:
    image

    清除浮动

    • clean
      • left
        • 当前元素左边不能有浮动元素
      • right
        • 当前元素右边不能有浮动元素
      • both
        • 当前元素两边不能有浮动元素
    • overflow
      • 规定当内容溢出元素框的时候会怎样。
      • visible
        • 默认值,内容会呈现在元素之外。
      • hidden
        • 内容会被修剪,其余隐藏不见
      • scroll
        • 内容会被修剪,显示滚动条显示其余内容
      • auto
        • 如果内容会被修剪,自动 显示滚动条显示其余内容
      • inherit
        • 继承父级的 overflow 属性的值
    展开全文
  • 块级元素和行内元素

    2017-09-10 10:06:50
    当时用一个标签时,第一件事就是弄清楚它是块级元素还是行内元素 块级元素 块级元素会扩展到父元素同宽,body的默认宽度和浏览器窗口一样宽。 这时候你应该理解为什么块级元素会始终占一行了,没错,那就是因为...
  • 块元素、行内元素、行内块元素

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

    2014-09-06 15:48:32
    1,行内元素有哪些? ——非替换元素:a,span,strong,b,abbr,input等; ——替换元素: img,link等; 非替换元素: 2,行内元素有哪些特征? ——不会在内容前后产生“换行符”;水平方向上可以设置内、外边距...
  • 首先直观的了解一下什么是行内元素,块状元素,行内块状元素 顾名思义先来个最简单的理解: 行内元素——在行内排布 块状元素——一块一块地排布 行内块状元素——在行内一块一块的排布 有点懵对吧,上图: &...
  • 元素的分类方式分为行内元素、块状元素和行内块状元素三种,这三者可以通过设置display属性值实现相互转化。 (1)display:inline;转换为行内元素 (2)display:block;转换为块状元素 (3)display:inline-block;转换为...
  • HTML行内元素、块状元素、行内块状元素的区别  HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用...转换为行内元素  (2)display:block;...
  • HTML 行内元素 与 块级元素

    万次阅读 2016-08-15 23:38:22
    行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素...
  • 再html项目中写入 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>...div style="width: 500px;">郑州高新区</div> </body> <
  • 行内元素和块级元素

    千次阅读 2020-05-04 13:09:59
    行内元素和块级元素 HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种,在使用过程中可以通过CSS的display属性相互转换。 行内元素 行内元素对应的CSS样式设置为display: inline;。 特点 元素排在一行 ...
  • 1.块级元素: (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 ...(1)会和相邻的行内元素排成一行。 (2)设置宽、高无效,默认宽高是其自身内容的宽高。 (3)...
  • 行内元素 行内元素是在一行进行展示的元素,在HTML的流式布局范围内,若在可视范围内一行不能全部展示则会自动换行。 行内元素不能设置高宽。 行内元素设置样式display:block即可转换为块级元素。 块级元素 块级元素...
  • 行内元素属性设置

    2019-03-14 11:00:19
    行内元素同样具有盒子模型,那么就可以给行内元素设置不同的 css 属性,比如宽度、高度、内边距和外边距,那么行内元素是否需要设置这些属性呢? 行内元素设置宽度和高度 给行内元素设置宽度和高度是无效的 .span1 {...
  • 行内元素 span 块级元素独占一行. 行内元素可互相排成一行. 块级元素可以设置宽高,行内元素无效. 即使块级元素设置类宽,仍然独占一行. 块级元素 margin padding都有用. 行内元素只有 水平方向有用.垂直方向无效. ...
  • 行内元素,块级元素,行内块级元素及其之间的转化
  • 1.HTML中的块元素、行内元素的说明 根据CSS规范的规定,网页的每一个元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div、form、h1-h6、ol、ul、p、menu等块元素,它的...
  • 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大多为结构性标记 常见块级元素: <center>...</center> 地址文字 <h1>...</h1> 标题一级 <...
  • 行内元素和块级元素 行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而...
  • 【前端面试】行内元素与块级元素

    千次阅读 2017-10-04 16:04:26
    1.分类判断行内元素和块级元素的快捷方法就是判断是否能并列。 块级元素 行内元素 2.不同点(1)块级元素会独占一行,其宽度自动填满其父元素宽度; 行内元素不会独占一行,相邻的行内元素会排列在同一行,直至...
  • <style> a { width: 150px; height: 50px; background-color: pink; /* 把行内元素 a 转换为 块级元素 */ display: block; } div { width: 300px; height: 100px;
  • 行内元素详解

    2019-08-20 09:34:08
    昨天晚上面试问我,行内元素如何设置宽高?我说设置无效,他说那怎样才有效呢?我只说了设置display:block或者display:inline-block,面试官那还有其他方法吗?...1.常用的行内元素 <a> 标签可定义锚 <a...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,330
精华内容 21,732
关键字:

行内元素1px