精华内容
下载资源
问答
  • 块级元素,行内元素,行内块元素
    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的特性。

    更多相关内容
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...
  • 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。 常见块级元素: header,form,ul,ol,table,article,div,hr,aside,...
  • 元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
  • 在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素行内
  • 前端日记01_行内元素和块级元素欢迎大家来跟胖胖一起xio习!基本知识分类速览块级元素和行级元素的转换参考链接 欢迎大家来跟胖胖一起xio习! Hey,这里是胖胖的博客,目前正在学有关前端的知识,有时候会把一些遇到...
  • 页面上的每个元素都被看成一个矩形框,这个框由元素的内容、内边距、边框和外边距组成。如下图所示: 内边距出现在内容区域的周围。如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域。因此可以用...
  • 最终实现效果为实现行内元素的水平、垂直居中对齐,效果图如下:   接下来为实现代码: 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-...
  • 盒子水平居中 快兔兵团 居中的含义 块级盒居中 块级盒子木身居中 块级盒子里而有内容居中 行内元素居中 设置外围盒子 设置本身 块级元素居中(本身居中) 100100 认的是左上角对齐 div class=box </div> 盒子的位置 ...
  • Block element 块级元素顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。...
  • 关于块级元素和行内元素的一些小知识点的总结
  • 简析行内元素

    2019-07-26 09:35:35
    NULL 博文链接:https://yiminghe.iteye.com/blog/360025
  •  行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;  对于块级元素有以下几种居中方式:   1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使...
  • 行内元素只占内容的宽度,块元素不管内容多少都要占全行,下面为大家介绍下常见的行内元素及块元素有哪些,感兴趣的朋友可以参考下,希望对大家有所帮助
  • 一、背景初学html,接触很多标签、、、、等,当写出简单的小页面的时候,例如仅仅是一篇带有标题的文章,标题标签...HTML标签一般分为块标签和行内标签两种类型,也可以称为块元素和行内元素。上面举例中的标签就...

    一、背景

    初学html,接触很多标签

    、、

    等,当写出简单的小页面的时候,例如仅仅是一篇带有标题的文章,标题

    标签单独一行,不管后面有多大的空间;

    标签中使用多个给某些词做强调,但是却和

    中的其他内容同一行,由此,会思考为什么

    会有这种的不同?

    e7dfadc46d39a28a68ce6f65fc12ef10.png

    二、标签的类型(显示模式)

    想要知道为何不同,得先了解HTML标签的类型。

    HTML标签一般分为块标签和行内标签两种类型,也可以称为块元素和行内元素。

    上面举例中的

    标签就是典型的块元素,标签就是一个行内元素。块元素和行内元素的具体特点如下:

    三、块级元素(block-level)

    块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。

    块级元素有以下几个特点:

    总是另起一行(特立独行)

    可以设置其宽度、高度,内外边距

    在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)

    可以容纳行内元素和其他块元素。

    常见的块级元素有:

    /

    ~

    /

    /

    / 等,其中
    是最常用最典型的块级元素。

    特殊:文字类的块级元素不能放块元素,例如

    /

    ~

    /

    /*块元素div*/

    div{

    width: 200px;       /*宽高、外边距、内边距 都有效*/

    height: 30px;

    border:1px solid blue;

    margin:20px;

    /*    padding:10px;*/   /*此处内边距会引起div宽高的变化,为了比较更直观就注释了*/

    line-height: 30px;

    }

    使用以上样式给下面块元素div设置

    我是块元素2
    我是块元素2

    效果图见文末。

    四、行内元素(inline-level)

    行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

    行内元素的特点:

    总是和相邻的行内元素在同一行上(物以类聚)

    设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。

    默认宽度是他自身内容的宽度。

    行内元素只能容纳其他行内元素或者文本。

    特殊:a比较特殊,可以放块级元素,但是链接里面不能再放链接。

    /*行内元素span*/

    span{

    width:200px;        /*宽度设置无效*/

    height: 100px;      /*高度也无效*/

    border:1px solid red;

    }

    下面是Html样式

    行内元素1

    行内元素2

    行内元素3

    我是行内元素行内元素行内元素4

    效果图见文末

    五、行内块元素(inline-block)

    普遍的规则里总有那么几个不一样的,在行内元素中就有那么几个特殊标签,比如//

    ,可以给他们设置宽高、对齐属性,我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。

    行内块元素的特点:

    和相邻行内元素在同一行,但是之间会有空白缝隙。

    默认宽度是他本身内容的宽度。

    宽度、高度、行高、外边距以及内边距都可以手动设置。

    样式:

    /*行内块元素input*/

    input{

    width: 200px;      /*宽高均有效*/

    height: 30px;

    }

    结构:

    综合效果图如下:

    ddab7ff181c60b252a6a7d3f137e29ca.png

    六、标签显示模式转换(display)

    既然标签有不同的显示模式,就会有相应的转换办法以应对各种需要。

    display正是我们想要的。

    块元素——>行内元素 : display:inline;

    行内元素——>块: display:block;

    块、行内元素——>行内块: display: inline-block;

    总结

    总结完他们之间的特点更加清晰,记得更牢,首先在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因,使用display即可解决。

    展开全文
  • 一、块元素转行内元素:display:inline二、行内元素转块元素:display:blockdiv{display: inline;/*无效width: 500px;height: 500px;*/background-color: red;}p{display: inline-block;}span{display: block;width:...

    一、块元素转行内元素:display:inline

    二、行内元素转块元素:display:block

    div{

    display: inline;

    /*无效

    width: 500px;

    height: 500px;

    */

    background-color: red;

    }

    p{

    display: inline-block;

    }

    span{

    display: block;

    width: 400px;

    height: 300px;

    background-color: blue;

    }

    块内元素转行内元素

    行内元素转块元素

    三、块和行内元素转行内块元素:display:inline-block

    div,a,span,strong{

    display: inline-block;

    width: 200px;

    height: 200px;

    background-color: yellow;

    text-align: center;

    vertical-align: top;

    }

    块元素转行内块元素

    a行内元素转行内块元素

    span行内元素转行内块元素

    strong行内元素转行内块元素

    CSS&period;02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法

    css盒子模型的深入理解,在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

    04&period; H5标签有哪些?行内元素有哪些?块级元素有哪些?空&lpar;void&rpar;元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

    CSS 一些基础知识&lpar;优先级、行内元素的一些属性、font-size单位&rpar; 怎样不加载图片

    CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...

    1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius&colon; 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

    line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

    &ast; CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)

    前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

    行内元素&lpar;inline标签&rpar;设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释

    最近在看张鑫旭大佬的,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

    内联&lpar;行级&rpar;元素不能设置margin-top

    内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...

    随机推荐

    Spring学习记录&lpar;十&rpar;---使用FactoryBean配置Bean

    之前学了,配置bean可以用普通全类名配置.用工厂方法配置,FactoryBean又是什么呢 有时候配置bean要用到,IOC其他Bean,这时,用FactoryBean配置最合适. FactoryB ...

    现在&comma; Delphi 的多线程已经非常易用了&excl;

    先看一个非多线程的例子, 代码执行时不能进行其它操作(譬如拖动窗体): {自定义方法: 在窗体上绘制...} procedure MyMethod; var   i: Integer; begin   ...

    &lbrack;Redux &plus; Webpack&rsqb; Hot reloading Redux Reducers with Webpack

    Webpack will hot reload the component, but the reducer we need hard refresh. To sovle the problem, g ...

    Python 项目实践二(下载数据)第三篇

    接着上节继续学习,在本章中,你将从网上下载数据,并对这些数据进行可视化.网上的数据多得难以置信,且大多未经过仔细检查.如果能够对这些数据进行分析,你就能发现别人没有发现的规律和关联.我们将访问并可视化 ...

    前端入门4-CSS属性样式表

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: MD ...

    &lbrack;转载&rsqb;oracle的加密和解密

    加密函数 create or replace function encrypt_des(p_text varchar2, p_key varchar2) return varchar2 isv_tex ...

    webpack config

    [webpack config] 1.entry Simple rule: one entry point per HTML page. SPA: one entry point, MPA: mult ...

    &lbrack;na&rsqb;tcp&amp&semi;udp层各协议小结

    TCP和UDP 传输层功能: 可靠性:序列号.确认号&flag位 有效性:win滑动窗口 这篇目录索引: Tcp可靠性 Tcp流控 Tcp拥塞控制 Tcp运输连接管理 TCP的可靠性和流控 为 ...

    Order By 问题集合

    问题(一):Order By 多个参数排序 在做多字段的排序的时候我们经常会会用到该语句. 所以多参数排序是从左到右的局部排序,修改的范围只有前面参数(几个参数)相同的情况下在排序. select * ...

    input file实现多次上传文件(不会覆盖上次上传的文件)

    html原生的file多选控件:

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

    千次阅读 多人点赞 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 属性的值
    展开全文
  • 行内元素与块级元素居中方法

    千次阅读 2021-03-02 12:58:27
    一、行内元素 1. 水平居中 方法一:text-algin:center 父元素设置:text-align:center 说明: text-align只能对行内元素起作用,对块级元素不起作用 text-align会被后代元素继承 <style> .outer{ width...
  • 行内元素:span ,a, ,strong , em, del, ins。特点:在一行上显示;不能直接设置宽高;元素的宽和高就是内容撑开的宽高。块元素:div,h1-h6,p,ul,li。特点:独占一行;可以设置宽高;注释:嵌套(包含)下,子块元素...
  • NULL 博文链接:https://maoting.iteye.com/blog/1722563
  • // 转换为行内元素 display:block;// 转换为块级元素 display:inline-block// 转换为行内块元素 行内元素 行内元素:(a,span,i,em,strong,b,label) 行内元素最常使用的就是span,其他的只在特定功能下...
  • 无论是初学者或者是即将面试的前端工程师,行内元素及块级元素都是非常重要的知识点,在布局设置宽高和边距时经常由于混淆行内元素及块级元素出现问题。 一、显示元素 (一)块级元素 div、p、h1-h6、form、ul、...
  • 会自动换行,可以包含行内元素和其他块级元素,可以设置宽,高,上下左右边距,默认 css 属性 display 的值为 block 块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表...
  • 比如:div 与 span 的显示方式不一样,因为 div是块级元素,会占据一行,而span为行内元素,可多个span放置一行。 接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。 1. 块级元素 block 块级元素...
  • 1.行内元素指的是书写完成后不会自动换行,并且元素没有宽和高。 行内元素有: <a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写 <b>字体加粗<bdo>可覆盖默认...
  • html行内元素有哪些

    千次阅读 2021-06-13 05:07:49
    html行内元素有:a、b、u、span、img、input、strong、select、sub、sup、label、em、button、textarea、tt、var、samp、br、cite、code、font、strike等等。本教程操作环境:windows7系统、HTML5版、Dell G3电脑。...
  • 将元素转换为行内元素;display: block; 将元素转换为块级元素;display: inline-block; 将元素转换为行内块级元素。行内元素(display: inline)特点:1. 和其他元素都在一行上;2. 高,行高及外边距和内边距不...
  • CSS规范,每个元素都有display属性,确定该元素的...行内元素 span a b i img input select strong 块级元素 div p h1~h6 table from ul ol li dl dt dd… 空元素(没有内容) <br> <hr>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 119,087
精华内容 47,634
关键字:

行内元素

友情链接: Cours2.rar