精华内容
下载资源
问答
  • 如果需要让块元素用于元素的特点,可以把display:inline-block 或者 inline; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <...

    1.block属性:块级元素,可以将行级元素变成块级元素

     如果需要让块元素用于行元素的特点,可以把display:inline-block 或者 inline;

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<span class="text">2222</span>
    		<span class="text">333</span>
    	</body>
    	<style type="text/css">
    		.text{
    			display: block;   /*如果注释掉,是行级元素,宽高不生效*/
    			height: 100px;
    			width: 200px;
    			background-color: blue;
    		}
    	</style>
    </html>
    

    2. inline属性:可以将块元素变成行元素,普通行元素设置宽高是不生效的,如果想要对行元素设置宽高,可以把display:inline-block 或者 inline;

    每个块级元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排不下,才换新的一行,宽度随元素的内容而变化

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div class="div">222</div>
    		<div class="div">333</div>
    		<div class="div1">444</div>
    	</body>
    	<style type="text/css">
    		.div{
    			display: inline; 
    		}
    		.div1{
    			display: inline-block;
    			background-color: bisque;
    		}
    	</style>
    </html>
    

     

    展开全文
  • CSS内嵌元素和块元素的区别

    千次阅读 2016-04-13 15:05:52
    举例:  请把下面二代码放进body标签里: ... 这二个div占据了二空间,叫做块级元素(block)。  再把下面二代码也放进body标签里:  span1  span2  浏览器的呈现效果:  span1 span1  这两个sp
    
    

    举例:
        请把下面二行代码放进body标签里:
        <div style=”border: 1px solid red;”>div1</div>
        <div style=”border: 1px solid red;”>div1</div>
        浏览器的呈现效果:
        div1
        div1
      这二个div占据了二行空间,叫做块级元素(block)。
      再把下面二行代码也放进body标签里:
        <span style=”border: 1px solid red;”>span1</span>
        <span style=”border: 1px solid red;”>span2</span>
      浏览器的呈现效果:
        span1 span1
      这两个span并列在一行,叫做内联元素(inline)。

    块级元素和内嵌元素的区别:
      · 块级元素 用来搭建网站架构、布局、承载内容,如:div、ul、li、dl、dt、dd、h1-h6、p、address……
           内联元素 用在文本之中的某一行的修饰,如:a、span、strong、sub、sup、img……
        · 块级元素是盒子,盒子是有宽高的,即不管里面有多少东西,外部就可以设置其宽高。
           内联元素是袋子,其宽高由里面的东西撑起来的。
      · 块级元素和内嵌元素之间互相转换,转换的代码如下:
           display:block;    /* 转成块元素 */
           display:inline;    /* 转成内嵌元素 */
      · 块级元素和内嵌元素对于CSS的调用规则:
           1. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
              <div><h1></h1><p></p></div> —— 对
              <a href=”#”><span></span></a> —— 对
              <span><div></div></span> —— 错
           2. 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:
              h1-h6、p、dt。
              <p><ol><li></li></ol></p> —— 错
              <p><div></div></p> —— 错
         3. li内可以包含div标签/父级ul或者是ol
            li和div标签都是装载内容的容器,地位平等,没有级别之分。
         4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列:
              <div><h2></h2><p></p></div> —— 对
              <div><a href=”#”></a><span></span></div> —— 对
              <div><h2></h2><span></span></div> —— 错

    展开全文
  • 玩转CSS块元素、内联元素、内联块元素

    千次阅读 多人点赞 2019-07-22 11:21:48
    块元素,也可以称为元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为: 支持全部的样式 如果没有设置宽度,默认的宽度为父级宽度100% 盒子占据一、即使设置了...

        元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。

    1.块元素 

    块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:

    • 支持全部的样式
    • 如果没有设置宽度,默认的宽度为父级宽度100%

    盒子占据一行、即使设置了宽度

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    
    		body{
    			margin:0;
    		}
    		
    		.box{ /*如果不设置高宽 ,默认是父类的宽度*/
    			background-color:gold;
    			width:300px;
    			height:200px;
    		}
    
    		.box2{
    			background-color:green;
    			width:300px;
    			height:200px;
    		}
    
    	</style>
    </head>
    <body>
    	<div class="box">div元素</div>
    	<p class="box2">p元素</p>
    </body>
    </html>

    2.内联元素

    内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:

    • 支持部分样式(不支持宽、高、margin上下、padding上下)
    • 宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子之间会产生间距
    • 子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式

    解决内联元素间隙的方法 
    1、去掉内联元素之间的换行
    2、将内联元素的父级设置font-size为0,内联元素自身再设置font-size

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.box{
    			width:500px;
    			height:300px;
    			border:1px solid #000;
    			margin:50px auto 0;
    			font-size: 0;
    		}
    		.box a{
    			background-color:gold;
    			/* width:300px;     
    			height:200px; */     /*这里设置内联元素的高宽也是无效的,不支持*/
    			/* margin:100px 20px; */
    			padding:0 10px;
    			font-size:16px;
    		}
    		.box2{
    			width:500px;
    			height:100px;
    			border:1px solid #000;
    			margin:50px auto 0;
    			text-align:center;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<a href="#">链接文字一链接文字一</a>
    		<a href="#">链接文字二</a>
    		<a href="#">链接文字三</a>
    		<a href="#">链接文字四</a>
    		<a href="#">链接文字五</a>
    	</div>
    
    	<div class="box2">
    		<a href="#">链接文字</a>
    	
    	</div>
    </body>
    </html>

    3. 内联块元素

    内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为:

    • 支持全部样式
    • 如果没有设置宽高,宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子会产生间距
    • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.box{
    			width:500px;
    			height:300px;
    			border:1px solid #000;
    			margin:50px auto 0;
    			font-size: 0;
    		}
    
    		.box a{
    			background-color:gold;
    			width:100px;
    			height:50px;
    			margin:20px;
    			padding:10px;
    			font-size:16px;
    			display:inline-block;
    		}
    	
    	</style>
    </head>
    <body>
    	<div class="box">
    		<a href="#">链接文字一</a>
    		<a href="#">链接文字二</a>
    		<a href="#">链接文字三</a>
    		<a href="#">链接文字四</a>
    		<a href="#">链接文字五</a>
    	</div>
    	
    </body>
    </html>

    这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。

    display属性
    display属性是用来设置元素的类型及隐藏的,常用的属性有:

    • 1、none 元素隐藏且不占位置
    • 2、block 元素以块元素显示
    • 3、inline 元素以内联元素显示
    • 4、inline-block 元素以内联块元素显示
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.menu{
    			width:694px;
    			height:50px;
    			/* background-color:cyan; */
    			margin:50px auto 0;
    			font-size:0;
    		}
    
    		.menu a{
    			width:98px;
    			height:48px;
    			background-color:#fff;
    			display:inline-block; /*注意这里display不同属性值的显示结果block ,inlineblock,none等*/
    			border:1px solid gold;
    			font-size:16px;
    			margin-left:-1px;
    			text-align:center;
    			line-height:48px;
    			text-decoration:none;
    			color:pink;
    			font-family:'Microsoft Yahei'
    		}
    
    		.menu a:hover{
    			background-color:gold;
    			color:#fff;
    		}
    
    
    	</style>
    </head>
    <body>
    	<div class="menu">
    		<a href="#">首页</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    		<a href="#">公司简介</a>
    	</div>
    </body>
    </html>

    展开全文
  • css行内元素和行内块元素缩进问题 在html代码中,如果吧行内元素或者行内块元素写成下面这样的话,会出现空格的问题: &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;wrapper&amp;amp;amp;quot;&...

    css行内元素和行内块元素间隙问题

    在html代码中,如果把行内元素或者行内块元素写成下面这样的话,会出现空格的问题:

    <div class="wrapper">
      <span>我是行内元素</span>
      <span>我是行内元素</span>
      <span>我是行内元素</span>
    </div>
    
    .wrapper span {
      /*display: inline-block;*//* 这句代码加不加效果都一致 */
      font-size: 16px;
      background-color: lime;
      color: #fff;
    }
    

    效果图:
    在这里插入图片描述
    我么可以看到,这里保留了一个空格,之所以出现先这个问题,来源在于:我们代码里面的这几个span标签都有换行,这些换行也叫作空文本节点,会被保留为一个空格,所以我们要去掉这个空文本节点带来的问题,解决方法如下:

    1. 我最喜欢也是最常用的方法:
      给他们的父级元素加上font-size: 0;这个属性,就可以解决。原理是:空文本节点也是文本,自然可以被font-size: 0;作用到,那么空文本节点自然就没了。但是这种方法兼容性存在一定问题,在IE7及以下IE版本中不兼容,在safari浏览器中不兼容。
      代码如下:
      <div class="wrapper">
        <span>我是行内元素</span>
        <span>我是行内元素</span>
        <span>我是行内元素</span>
      </div>
      
      .wrapper {
        font-size: 0;/* 去掉空文本节点 */
      }
      
      .wrapper span {
        /*display: inline-block;*/
        font-size: 16px;
        background-color: lime;
        color: #fff;
      }
      
    2. 取消代码换行
      这种方法非常直观,但是代码并不美观了。。。而且维护起来也不方便。但是兼容性好。
      <div class="wrapper">
        <span>我是行内元素</span><span>我是行内元素</span><span>我是行内元素</span>
      </div>
      
    3. 还有其他的一些方法都类似于第二种方法,就是变相的取消换行(在这里我只说一个吧):
      比如这样:
      <div class="wrapper">
        <span>我是行内元素</span
        ><span>我是行内元素</span
        ><span>我是行内元素</span>
      </div>
      
    展开全文
  • 行内元素、块元素和css属性display

    千次阅读 2016-10-20 18:21:26
    1.行内元素和块元素特征的区分 行内元素:相同的元素同行显示,不会换行,除了图片&lt;img&gt;,图片按钮input type='image'(感觉有点像是display:inline-block),一般不能设置宽高(css里display:inline)...
  • H5 CSS基础一:行内元素和块元素

    千次阅读 2017-07-16 21:52:44
    ④、它可以容纳内联元素和其他块元素 行内元素①、和其他元素都在一上;②、高,行高及外边距和内边距不可改变;③、宽度就是它的文字或图片的宽度,不可改变④、内联元素只能容纳文本或者其他内联元素 二、常用...
  • 而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让他也有每次都从新开始的属性即成为块元素同样我们可以把块元素加上display:...
  • CSS中的块级元素、行内元素和行内块元素

    千次阅读 多人点赞 2019-05-21 14:09:11
    元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。...接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。 块级元素 block 块级元素,顾...
  • 1.内联元素(inline element) * a – 锚点 * abbr – 缩写 * acronym – 首字 * b – 粗体(不推荐) * big – 大字体 * br – 换行 * em – 强调 * font – 字体设定(不推荐) * i – 斜体 * img – 图片 * ...
  • 08-DIV+CSS-块元素和行内元素

    千次阅读 2013-11-03 13:33:01
    块元素和行内元素 1. 概念  - 行内元素(inline element), 又叫内联元素  内联元素只能容纳文本或者其他内联元素,  即, 值栈内容宽度,默认不换行  常见内联元素  - 块元素(block element)  块元素一般都...
  • CSS块元素和内联元素

    千次阅读 2011-04-22 23:56:00
    块元素即为容器,它默认不允许与其他块元素同处一,高度、宽度起作用 内联元素 默认与其他内联同在一,高度、宽度不起作用。(让内联元素的高度、宽度起作用的方法即为将其转换为块元素 display:...
  • 1、行内元素: 又叫内联元素;只能容纳文本或者其他内联元素,...3、块元素和行内元素的区别: 行内元素只占内容的宽度,而且他不会占据整行; 块元素不管内容多少都要占据整行,而且会换行显示 。 一些css属性对
  • HTML行元素和块元素

    千次阅读 2017-08-26 14:46:19
    HTML中的大部分元素都可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素会从新的一出现, 级元素则不会。块级元素的前后都会有插入的断,所以如果不用CSS则没法...
  • CSS块行元素的区别】

    千次阅读 2017-05-16 00:15:32
    CSS块、元素的区别】 CSS块、元素的区别 ...块元素的特性 ...独占一显示;...除(p、h1-h6)个别特殊元素外,可包含块状元素和行内元素; form不能直接包含元素。
  • CSS 行内级元素和行内框

    千次阅读 2018-02-19 22:06:43
    行内级元素和行内框行内级元素(inline-level element),就是那些在源文档中不会形成新的元素,这些元素的左右可以放置其他元素。典型的行内级元素有 span、em、strong、a,等等。根据元素自身的特点,行内级元素...
  • 根据css显示分类HTML元素被分为两种类型:块元素,内联元素 块元素—— block 块状元素(block element) 常见的块级元素有:<div>,<h1>~<h6>,<p>,<ul>,<ol>,<li> 等 ...
  • CSS标签分类(块元素 行内元素 行内块元素

    千次阅读 多人点赞 2019-05-21 20:31:51
    标签:divph1-h6hr ulol lidl dd dt form ①支持宽高,自上而下排列 ②不受空格影响 ③一般用于其他标签的容器 ④默认宽度为100%(独占一)。 行内标签:spani ab strong em sub sup u label br font ...
  • 块元素,也可以称为元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为: 1、支持全部的样式。 2、如果没有设置宽度,默认的宽度为父级宽度100%。 3、盒子占据一...
  • 块级元素:是从新的一开启,可以包含其他块元素和内联元素 特点: 行级元素: 1、和其他元素在一显示直到这一容不下了就会换行 2、行级元素的宽度随着内容的改变而改变 3、行内元素只能容乃文本和其他的...
  • CSS 框的生成:块级元素和块

    千次阅读 2018-02-19 22:05:44
    框的生成在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框。默认情况下,一个元素的类型,决定了该元素生成框的类型。块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名...
  • 块元素和内联元素css中块元素可以同时用float和inline消除ie6下的margin加倍 代码如,div{margin:10px;float:left;display:inline;} 为什么在css中可以同时用float和inline,因为先前的了解是块元素就不是内联...
  • 一、块级元素 独占一 默认width是父元素的100%,height取决于内容的height 设置width、height有效 设置margin,上下左右有效 设置padding,上下左右有效 二、内联元素 不会独占一 默认width取决于内容的...
  • 块级元素和内联元素,我想接触过CSS的朋友都有所了解,但是在实际写CSS代码时却考虑的并不多,我们无意中就已经按照块级元素和内联元素的规则进行布局样式了。我有时在想,为什么要区别块级元素和内联元素呢?这就是...
  • css块级元素、内联元素

    千次阅读 2016-06-09 21:41:59
     在css盒子模型中,我们提到了html元素中的块元素(block element)内联元素(inline element)。那么它们究竟是什么呢?   其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器...
  • 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如就不同,而和也不一样。在文档类型定义(DTD)中对不同的元素规定了...
  • css中把内联元素变成块元素

    千次阅读 2019-09-19 23:56:11
    使用display:block即可实现 例子如下 首先写出css代码 <style type="text/css"> span{ background-color: #2cde57; } .span1{ display: block; width: 1000px; ...
  • CSS中实现行内块元素对齐

    千次阅读 2019-09-15 22:17:28
    目标:行内块元素实现对齐的几种方式 eg. 我希望下列两个单词文本后面的两个图片能实现中线对齐且靠右。(图1变为图2) 图1 图2 html: <header> <p>Gmail</p> <p>images<...
  • 在一内显示,一般情况不可以设置宽高的元素就是行内元素。 块级元素 div、h1、p、li等等。独占一,可以设置宽高的元素就是块级元素。 行内元素转换成块级元素 在行内元素中设置display:block;就可以让行内元素...
  •  行内元素: ...块元素:  水平居中: ①margin:0 auto 例: .father{  width:200px;  height:200px;  background-color:red;  } .son{  width:100px;  height:100px;  b

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 139,462
精华内容 55,784
关键字:

css行元素和块元素