精华内容
下载资源
问答
  • 块元素默认是独占一行的,如果想要几个块元素并排怎么办呢,这时候需要用到浮动(float) 实例代码如下 .floatDemo{ width:100px; heigth:100px; float:left; margin:0px 30px 0px 0px; background-...

    块元素默认是独占一行的,如果想要几个块元素并排怎么办呢,这时候需要用到浮动(float)

    实例代码如下

    .floatDemo{
        width:100px;
        heigth:100px;
        float:left;
        margin:0px 30px 0px 0px;
        background-color:#4F94CD;
    }
    

    效果如下:

    转载于:https://www.cnblogs.com/sherlock-merlin/p/7190440.html

    展开全文
  • 块元素默认独占一行

    千次阅读 2014-07-02 14:01:59
    个table中中隐藏了个级联的下拉选择框,在调用某个方法时让其显示时,下拉框在原来的下方出现。 解决办法: obj.style.display = "[color=red]inline[/color]-block" ; inline 是关键...
    问题背景描述:
    在一个table中<td>中隐藏了一个级联的下拉选择框,在调用某个方法时让其显示时,下拉框在原来的下方出现。

    解决办法:

    obj.style.display = "[color=red]inline[/color]-block" ;

    inline 是关键
    展开全文
  • CSS 对象(独占一行)和内联对象

    千次阅读 2017-04-11 11:43:16
    对象也称为块级元素,内联元素也称为行内元素 ...① 块级元素独占一行,而内联元素会和其它的内联元素占一行。 ② 块级元素可规定宽度和高度;内联元素会随自身的内容自动变化。 ③ 块级可设置margin值和pa
    块对象也称为块级元素,内联元素也称为行内元素
    
    ① 块级元素(div,h1-h6,p,ul,dl,dd,form,table)
    ② 行内元素[也叫内联元素](strong,em,span,b,i,a,img,input,iabel)

    区别:
    ① 块级元素独占一行,而内联元素会和其它的内联元素占一行。
    ② 块级元素可规定宽度和高度;内联元素会随自身的内容自动变化。
    ③ 块级可设置margin值和padding值,而内联元素左右正常,上下不正常。

    相互转换:
    ① 块级转为行内:display:inline
    ② 行内转为块级:display:block
    ③ 默认:display:none(不占位置)


    展开全文
  • 块元素简单来说就是独占一行,并且可以设置width和height,就像一个方块一样可以有自己的宽和高。如果没有设置width,那么块元素的width默认和父容器的width保持一致。如果没有设置height,那么块元素的height默认为...

    html标签块元素、行元素、行内块元素区分

    区分

    • 块元素(block)

      块元素简单来说就是独占一行,并且可以设置width和height,就像一个方块一样可以有自己的宽和高。如果没有设置width,那么块元素的width默认和父容器的width保持一致。如果没有设置height,那么块元素的height默认为0,块元素的高由内部元素支撑起来。
      常见的块元素有:div、p、h1–h6、hr、ul、li…

    • 行元素(inline)

      行元素简单来说就是在一行上显示,设置宽高是无效的。高度可以被内部内容撑开。
      常见的行元素有:span、a、b、s…

    • 行内块元素(inline-block)

      看这个inline-block名字,就可以看出来这个是结合块和行的一部分特点,行内块元素:在一行上显示,但是可以设置宽高。
      常见的行内块元素有:Img、input…

      常见用法

    • inline-block
      我们经常使用ul结合li标签做一个横向菜单列表

    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    </ul>
    

    这个时候我们可以设置li的display:inline-block,让li横起来。

    闲的无聊的发现

    我们知道块元素可以嵌套块、行、行内块的(p标签除外),行内元素不能嵌套只能嵌套行,行内块可以嵌套行、行内块。

    我测了一下,行内块镶嵌行内块时候,有一个让人很惊喜的发现。

    <body>
    	<div style="margin:0;">
    		<div style="display: inline-block;border:1px solid red;width:50%;height: 300px;">
    			<div style="display: inline-block;border:1px solid  black;width:100%;height: 50%;">2</div>
    		</div>
    		<div style="display: inline-block;border:1px solid  green;width:40%;height: 300px;">3</div>
    	</div>
    </body>
    

    在这里插入图片描述 大概就是上面哪个样子,两个同级的div,都是inline-block。然后第一个inline-block里面镶嵌了一个div,也是设为inline-block。

    然后再第一个大div里面加了一个span(行元素)

    <body>
    	<div style="margin:0;">
    		<div style="display: inline-block;border:1px solid red;width:50%;height: 300px;">
    			<span>1</span>
    			<div style="display: inline-block;border:1px solid  black;width:100%;height: 50%;">2</div>
    		</div>
    		<div style="display: inline-block;border:1px solid  green;width:40%;height: 300px;">3</div>
    	</div>
    </body>
    

    在这里插入图片描述开始两个并排的div????
    把span标签换成一个input(行内块元素),还是一个样子。
    div2和div3保持一行???
    其实这也是一种对其,因为有个baseline(基线);
    span和input的基线和div2是对齐的,所以才有上面哪个图。
    然后再改一波代码:

    <body>
    	<div style="margin:0;">
    		<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;">
    			<input type="text" />
    			<div style="display: inline-block;border:1px solid  black;width:100%;height: 50%;">2</div>
    		</div>
    		<div style="display: inline-block;border:1px solid  green;width:20%;height: 300px;">3
    		</div>
    		<div style="display: inline-block;border:1px solid  green;width:20%;height: 300px;">4</div>
    		<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;">
    			<input type="text" />
    			<div style="display: inline-block;border:1px solid  black;width:100%;height: 50%;">5</div>
    		</div>
    	</div>
    </body>
    

    在这里插入图片描述 这跟丑丑的红色线,就是他们对齐的基线。
    所以知道了它层次不齐的原因,那就知道改怎么改了。
    设置vertical-align:top;,对齐它

    <body>
    	<div style="margin:0;">
    		<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;vertical-align:top;">
    			<input type="text" />
    			<div style="display: inline-block;border:1px solid  black;width:100%;height: 50%;vertical-align:top;">2</div>
    		</div>
    		<div style="display: inline-block;border:1px solid  green;width:20%;height: 300px;vertical-align:top;">3
    		</div>
    		<div style="display: inline-block;border:1px solid  green;width:20%;height: 300px;vertical-align:top;">4</div>
    		<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;vertical-align:top;">
    			<input type="text" />
    			<div style="display: inline-block;border:1px solid  black;width:100%;height: 50%;vertical-align:top;">5</div>
    		</div>
    	</div>
    </body>
    

    在这里插入图片描述
    就是这个样子了。
    或者你可以干脆把display设为block;

    然后写啥?突然忘记了,想起来再补

    展开全文
  • 内容独占一行 2.块元素可以设置宽高 3.如果不设置宽高,宽度就等于父元素的宽度,高度就等于内容的高度 4.块元素可以设置内外边距 5.多个块元素之间上下排列 常见的块元素:div,section,p,h1-h6,hr,ul,li等 ...
  • 独占一行,自动换行,支持所有css属性,可以嵌套行、行内块元素。 例:H1-H6 P ul li dl dd dt hr div 等... 2.行元素 可以在同一行显示,只占用一小块位置,不自动换行,不支持宽高。 例:a b em i s u strong ...
  • (1)块级元素独占一行、设置宽高有效、(margin、padding)上下左右有效; (2)行级元素:不会独占一行、宽高无效(但盒子模型里可以看到宽高)、margin 左右有效(上下无效)、padding上下左右有效(但不建议...
  • 行元素不像块元素那样独占一行,而是挨着有序排列 看下图代码了解:①行元素默认的width,height是刚好包含内容(并且高度宽度不可更改) ②可以设置margin-left,right,设置的margin-top,bottom无效,...
  • 独占一行 可以设置宽高 容器的100% 可以包含任何标签 行内元素 一行可以放多个行内样式 不可直接设置宽高 根据内容改变宽高 可包含文本或其他行内样式 行内块元素 一行可以放多个 可以设置宽高 根据内容改变宽高...
  • CSS的元素显示模式 什么是元素显示模式 元素的显示模式是元素以什么方式进行显示。比如<div>自己占一行,<span>一行可以放多个。...​ 1、块元素独占一行 ​ 2、高度、宽度,外边距以及
  • 块级元素-block element 行内元素-inline element 块级元素,行内元素与行内块元素的区别 ...特殊的行内元素,可以设置宽高不会独占一行,相邻的行内元素会排列在同一行,直至换行典型元素:img button
  • 块元素元素

    2019-06-26 21:12:40
    今天的面试中问到一个问题,区分块元素和行内元素,我答得不是很好,面试...独占一行 相邻行内元素自动排列同一行 pading和margin属性 两者可以自由设置 竖直方向的设置不会产生效果 e.g.pading-top display的属...
  • ** 1.行内元素: 不会自动换行,多个行内元素可在同一行,不能设置宽(width)高(height)属性,多个...自动换行,每个块元素独占一行,可以设置宽高属性,多个块标签默认从上至下排列。最典型块标签< div &...
  • 块元素、内联元素

    2018-01-14 17:14:29
    div>div>就是一个块元素,块元素独占一行,无论有多少内容。都会独占一整行。 p h1 h2 h3..都是块元素 div没有任何语义,主要用来对页面布局。 span是一个内联元素(行内元素),内联元素只占自身大小,如:img,a...
  • CSS 块元素和行内元素

    2017-10-30 20:58:31
    块元素独占一行 块元素可以嵌套块元素和行内元素。块元素可以设置宽高,行内元素没有宽高,设置宽高不会起作用。 行内元素不能嵌套块元素。 一个例外: 标签不能嵌套列表。 (标签和列表都是块元素) display: ...
  • 1.块元素独占一行,主要用来布局 2.内联元素不独占一行,主要用来选中文本 3.一般情况下块元素可以包含块元素和内联元素 4.一般情况下内联元素不可以包含块元素,只能包含内联元素 5.a是内联元素,但是a元素可以包含...
  • 块元素: 其能独占一行,并且能够自动填满父元素,以及可以设置margin,padding,height和width 行元素: 其不会独占一行,宽度和长度会失效,并且垂直方向的padding和margin会失效。
  • 独占一行、宽度高度外边距内边距都可以设置、【宽度】默认是父容器宽度100% 文字类的元素内不能使用块元素:p、h1~h6 2. 行元素(内联元素) 一行上可以显示多个、宽高设置都是无效的、默认宽度就是本身的宽度、...
  • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性: 和相邻的内联元素在同一行; 宽度(width)、...
  • html块元素和间距

    千次阅读 2019-10-13 13:50:49
    块元素:div块元素独占一行的.有宽高的 浮动:可以使块元素在一行上显示 内联元素:不独占一行,没有宽高 span 写文字的, 改变元素位置的方法 margin(外边距): 子父级margin-top会合并为1个 同级相邻的top和bottom...
  • Web前端基础,Web前端教程块元素又名块级元素(blockelement),和其对应的是内联元素(inlineelement),都是html规范中的概念。...块级元素在浏览器显示时,通常会以新行来开始(和结束)。...它可以独占一行,可以设置宽高...
  • 独占一行,自上而下排列 默认宽度为父元素的100% 自动换行 可以设置宽度和高度 行内元素 并列显示,自左向右排列 不能设置宽度和高度,但是可以设置padding、margin、border 不会自动换行 行内 可以设置宽高...
  • html块元素元素的区别 1.块元素的特点(h1~h6、 p、 div、ul、ol、li) 1)比较霸道,自己独占1。(有开始标签 必须也要有结束标签) <div>------</div> 2)高度,宽度、外边距以及内边距都可以控制...
  • 块元素

    2018-10-11 14:54:38
    1、默认独占一行 2、没有宽度时,默认撑满一行 3、支持所有css命令 行间元素的特性 1、同排可以继续跟同类 2、内容撑开宽度 3、不支持宽高 4、不支持上下的margin 5、代码换行被解析,有空格 行间、块元素 ...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><... 块元素和内联函数 div就是一个块元素 独占一行的元素 div元素时给页面来...
  • 行元素:不会独占一行,宽度随着内容的变化而变化,对其设置宽度和高度无效,外边距(margin)和padding(内边距)的垂直...块元素独占一行,宽度和高度有效,外边距和内边距都会起作用。能够嵌套行内元素和块元素
  • 行元素

    2019-03-31 12:11:11
    块元素:支持宽高,独占一行,内边距、外边距都能控制。宽度默认是100%,可以容纳内联元素和其他块元素。 行元素:和相邻行内元素在一行上,不支持宽高,由内容撑开,但水平上的padding和margin可以控制,垂直无效...
  • 一、行元素、块元素、行内块元素 ...div块元素:元素特点是独占一行,可以设置宽高,如果不设置宽高,显示的是默认宽高,如果默认宽高也没有则显示内容宽高; 布局方式为块元素的有p,h1~~h6,div… 行内块元素特点:既...
  • html中的和内联元素

    2020-09-25 17:09:34
    div块元素 独占一行 不设置样式 块元素一般用于设置布局可包含内联元素 块元素可以包含块元素和内联元素 内联元素 如span这样只占文字大小的元素 种类:a img iframe span 释义: span是一个内联(行内元素)即只占...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,484
精华内容 593
关键字:

块元素独占一行