精华内容
下载资源
问答
  • 一、背景初学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.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

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

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

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

    04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

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

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

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

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

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

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

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

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

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

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

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

    内联(行级)元素不能设置margin-top

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

    随机推荐

    Spring学习记录(十)---使用FactoryBean配置Bean

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

    现在, Delphi 的多线程已经非常易用了!

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

    [Redux + Webpack] 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 ...

    [转载]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 ...

    [na]tcp&udp层各协议小结

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

    Order By 问题集合

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

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

    html原生的file多选控件:

    展开全文
  • 块元素 行内块元素 行内元素的特点。 一、块元素 block 自已独占一行。 宽度,高度,外边距,内边距都可以自己控制。 宽度默认为是父元素的100%。 是一个容器及盒子,里面可以放行内或者块元素。 二、行内元素 ...

    块元素 行内块元素 行内元素的特点。

    一、块元素 block

    1. 自已独占一行。
    2. 宽度,高度,外边距,内边距都可以自己控制。
    3. 宽度默认为是父元素的100%。
    4. 是一个容器及盒子,里面可以放行内或者块元素。

    二、行内元素 inline

    1. 相邻行内元素在一行上显示,一行显示多个。
    2. 宽高设置是无效的。
    3. 默认宽度是他本身的宽度。
    4. 行内元素只能容纳文本,或者其他行内元素。
    5. 行高及内边距外边距部分有效

    三、 行内块元素 inline-block

    1. 和相邻行内块元素再一行显示,但是他们之间会有空白缝隙。一行上可显示多个。
    2. 默认宽度就是它本身内容的宽度。
    3. 高度,宽度,行高,内边距,外边距都可以自己控制。

    si、三种元素相互转换

    1. display:
    /* 例如:转换为块元素 */
        display: block;
    
    展开全文
  • 行内块元素: 有多宽占多宽,可以设宽高。 【img input button 】 2.浮动 语法: float:left 或者 right; 作用:1.让元素横着排列,实现一行多列效果 2.设置文字环绕方式 注意:浮动会让元素脱离文档流 ...

    1.元素的分类
        块级元素:独占整行,可以设置宽高
        行级元素:有多宽占多宽,不可以设宽高
        行内块元素: 有多宽占多宽,可以设宽高。   【img input button 】

    2.浮动
        语法:
            float:left 或者 right;
        
        作用:1.让元素横着排列,实现一行多列效果
              2.设置文字环绕方式
        
        注意:浮动会让元素脱离文档流


    3.盒子模型
        概念:是一种思维模型,宽高+内边距+外边距+边框,主要用于页面布局。
        1.尺寸
            设置宽度:  width: *px 或者 *%;
            设置高度:  height:*px 或者 *%;

        2.内边距:内容和盒子边缘之间的间隔
            设置指定方向的内边距   【padding-方向:*px;】
                padding-top:上方向
                padding-bottom:下方向
                padding-left:左方向
                padding-right:右方向
            一次性设置多个方向:  padding:*px;  
                值可以是1-4个:从上方向出发,顺时针对应,有缺省取对边。
            
            注意:内边距会撑大盒子。
        
        3.外边距:盒子a与盒子b之间的间隔
            设置指定方向的外边距  margin-方向:*px;
            一次性设置多个方向:  margin:*px;  对应规则同padding

        4.边框
            设置单个方向的边框   border-方向:*px solid 颜色;
            设置4个方向的边框    border:*px solid 颜色;

            solid实线  dashed虚线

        盒子模型相关的细节说明:
            1.给所有元素清除内外边距
                *{
                    margin:0;
                    padding:0;
                }
            
            2.可内可外,优先内。
            3. 盒子水平居中,使用margin:0 auto;

               

        400*100 grey色的背景色
        上下左右的内边距分别为10 20 30 40

        


        浮动
            1.语法:
                float:left | right | none;
            2.作用:
                1.让元素横着排列,实现一行多列效果
                2.实现文字环绕
            3.注意:浮动会让元素脱离文档流。
        盒子模型
            概念:是一种思维模型,主要用于实现布局
            组成: 宽高+内边距+外边距+边框

            1.宽高
                宽度 width:*px; | *%;
                高度 height:*px | *%;

                方向的英文: top   bottom left  right
            
            2.内边距:padding
                单个 :  padding-方向:*px;
                复合:  padding:*px ; 
            3.外边距: margin
                    单个 :  margin-方向:*px;
                    复合:  margin:*px ; 
            4.边框:border
                单个: border-方向:粗细 solid 颜色;
                复合: border:粗细 solid 颜色;
            
            应用:
                1.去除元素默认的内外边距
                    *{
                        margin:0;
                        padding:0;
                    }
                2.盒子水平居中,使用margin:0  auto;
                3.可内可外,优先内。
     

    展开全文
  • CSS元素的显示模式(行内元素、块元素、行内块元素) 元素主要分为块级元素和行内元素以及行内块元素 1.块元素特点: 独占一行 宽度高度和内外边距可以控制 宽度默认为父容器的100% 是一个容器和盒子,里面可以放行...
  • 你是否有以下困惑: 为什么有些标签能够设置...---因为在html中块级(block)元素行内块(inline-block)元素可以设置宽度和高度 ---行内(inline)元素不可以设置宽度和高度 例如: <html> <style>
  • 行内块元素的对齐

    2021-08-10 22:07:36
    行内块元素的对齐 场景 今天在工作的时候想要将盒子对齐,将div设置成了inline-block,结果盒子并没有对齐 <div class="box"> <div class="first child"></div> <div class="second child...
  • 行内元素、块元素、行内块元素的区别一、前言1.行内元素2.块元素3.行内块元素 一、前言 HTML将元素分类方式分为行内元素、块元素和行内块元素三种。这三者是可以互相转换的,使用display属性能够将三者任意转换。 ...
  • 3 行内元素或行内块元素在布局中的特点 3.1 文本属性作用于行内元素和行内块元素 ① 让行内块元素或行内元素水平居中(在父元素中) 给行内块或行内元素的父元素设置: text-align: center; ② 让行内元素或行内块...
  • 这里将告诉您块元素,行内块元素,行内元素(水平垂直居中),具体操作方法:1.块级元素水平垂直居中方法11 2 position: absolute/fixed;3 left:0;4 top:0;5 right: 0;6 bottom: 0;7 margin:auto;方法2:1 2 position: ...
  • CSS行内块元素

    2021-01-13 14:26:16
    CSS行内块元素(内联元素) 一、典型代表 input img 二、特点: 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶部对齐 */ vertical-align: top; } input{ width: 300px; ...
  • 文章目录一、html元素分类二、块元素三、行内元素四、行内块元素五、替换元素和非替换元素六、元素转换 一、html元素分类 html元素:行内元素、块元素、行内块元素 二、块元素 常见的块级元素:< h1 >~<...
  • 块元素 1.自己独占一行。 2.是一个容器或盒子,里边可以放块元素或行内元素。 4.文字类的标签里边不能再放块元素,例如p标签,里边不能放div ...2.一行内可以有多个行内块元素。 3.行内块元素可以控制宽度和高度。 ...
  • 行内块元素没有对齐

    2021-05-17 14:20:24
    同一DIV内,两个行内块元素不对齐 将div都设为inline-block行内块元素 .main-cont>div{ display: inline-block; margin-top: 10px; } 问题:运行后的效果,两个div没有对齐 原因:这个跟基线对齐有关系,...
  • 一、块级元素 block 1. 特点: 自动换行 独占一行 可设置宽高 默认宽度为父元素的宽度 2.常见块级元素 div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header...
  • 元素的显示模式 元素一般分为块级元素和行内元素 ...行内块元素 一行可以放多个 可以设置宽高 根据内容改变宽高 … 1. 块元素 常见的的块元素: <h1>-<h6>,<p>,<div>,<ol>,<li>
  • 行内元素默认会有空格间隙,其原理就是因为标签换行所产生的 解决的方案: 1.如果我们将行内标签写在一行上,则不会出现间隙问题 2.当然我们也可以使用浮动来清除间隙,因为浮动可以脱离标准流,所以自然不会出现...
  • <!... <... <head>...meta charset="utf-8" />...--任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性--> <!--如果块级盒子没有设置宽度,默认宽度和父级一样宽
  • 元素是文档结构的基础,在 css 里面,每个元素生成了包含内容的框(box), 大家都叫“盒子”。...块级元素,顾名思义,该元素呈现“”状,所以它有自己的宽度和高度,也就是可自定义 width 和 height。除
  • 文章目录1 什么是元素显示模式2 块元素 versus 行内元素3 行内块元素4 元素显示模式总结5 元素显示模式转换简洁版小米侧边栏案例6 一个小技巧 单行文字垂直居中的代码 1 什么是元素显示模式 作用:网页的标签非常多,...
  • 1. 行内块元素 img 图片空白 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
  • 块元素div转变为行内块元素之后如何消除之间间隙 写了三个div,使其变成行内块元素之后,发现,有间隙,哟,我的小天使啊。 最外层父级div宽度width大于三个小div宽度之和 父级div: #aaa{ width: 400px; ...
  • 块级元素的水平居中 必须满外足宽内窄 代码 margin left:auto; margin right:auto;...行内元素、行内块元素、文字的水平居中 代码 text-align: center; 特性:本标签内的内容在本框内水平居中 ...
  • ”欧文的这句话表明,未成年人人身权利中最重要、最起码的权利是( )【多选题】以下属于行内块元素的是()【单选题】body元素用于背景颜色的属性是()【填空题】,其中【简答题】画出下面指令表程序对应的梯形图 LD I0.1 ...
  • 块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素 块元素的特点 独占一行 高度、宽度、外边距以及内边距都...
  • 行内块元素inline-block4.H5新增属性及标签4.1新增的语义化标签 (结构标签)4.2表单标签4.3媒体标签 1.块元素的特性block 独占一行; 宽度缺省是它父级元素的100%,除非设定一个宽度; 高度、行高、外边距、内边距...
  • 今天在做flex布局的时候,我在父元素中引入了四个行内元素span,想测试flex的相关属性,代码如下所示。我本来是想在box这个盒子中放四个span,因为按理说应该正好放下四个span,但实际效果却不是这样。 <!DOCTYPE...
  • 行内元素:span ,a, ,strong , em, del, ins。特点:在一行上显示;不能直接设置宽高;元素的宽和高就是内容撑开的宽高。...行内块元素(内联元素):input img。特点:在一行上显示,也可设置其宽高。div {wid...
  • 元素分类 行内元素 常见元素:span a p ... ...元素 常见元素:div 特性: 1.独立成行 一行一个 垂直排放 2. 设置所有盒模型属性都起作用 3. 行高可以撑开盒子 4. 默认宽度是父盒子所有有效...
  • 我们已经讨论了一些HTML5改进的地方,比如placeholder,prefetching以及webStorage,下面我要介绍的是两个新的input元素类型: email和url。让我们跟着代码来看看他们的好处:语法格式:新的input type属性,将使用 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,553
精华内容 22,221
关键字:

行内块元素