精华内容
下载资源
问答
  • 块级元素

    2017-03-30 11:32:00
    每个块级元素默认占一行高度,一行内添加一个块级元素后一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑是,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素; 块级元素一般作为容器...

    在做页面布局的时候,一般会将html元素分为两种,即块级元素和行内元素。

    一、块级元素:block element

    每个块级元素默认占一行高度,一行内添加一个块级元素后一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑是,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;

    块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含行级元素,如<p>。也有一些则既可以包含块级元素,也可以包含行级元素。

    Div是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

    二、行内元素:inline element

    也叫行内元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素“a”。比如SPAN元素,IFRAME元素和元素样式的display:inline的都是行内元素。例如文字这类元素,各个字母之间横向排列,到最右端自动折行。

    三、块元素的特点(block)

    1.总是在新行上开始;

    2.高度,行高以及外边距和内边距都可控制。

    3.宽度缺省是它的容器的100%,除非设定一个宽度。

    4.它可以容纳内联元素和其他块元素。

    四、inline元素的特点

    1.和其他元素都在一行上

    2.高、行高以及外边距和内边距不可改变

    3.宽度就是它的文字或图片的宽度,不可改变。

    4.内联元素只能容纳文本或者其他内联元素。

    对行内元素,需要注意如下:

    设置宽度width无效,

    设置高度height无效,可以通过line-height来设置。

    设置margin只有左右margin有效,上下无效。

    设置padding只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围内容是没影响的

    五、常见的块状元素

    address:地址

    blockquote:块引用

    center:居中对齐

    dir:目录列表

    div:常用块级容器,也是css layout的主要标签

    dl:定义列表

    fieldset:form控制组

    form:交互表单

    h1:大标题

    h2:副标题

    h3:3级标题

    h4:4级标题

    h5:5级标题

    h6:6级标题

    hr:水平分隔线

    isindex:input prompt

    menu:菜单列表

    noframes:frames可选内容(对于不支持frame的浏览器显示此区块内容)

    noscript:可选脚本内容(对于不支持script的浏览器显示此内容)

    ol:有序表单

    p:段落

    pre:格式化文本

    table:表格

    ul:无序列表

    六、常见的内联元素

    a:锚点

    abbr:缩写

    acronym:首字

    b:粗体(不推荐)

    bdo:bidi override

    big:大字体

    br:换行

    cite:引用

    code:计算机代码(在引用源码的时候需要

    dfn:定义字段

    em:强调

    font:字体规定(不推荐)

    i:斜体

    img:图片

    input:输入框

    kbd:定义键盘文本

    label:表格标签

    q:短引用

    s:中划线(不推荐)

    samp:定义范例计算机代码

    select:项目选择

    small:小字体文本

    span:常见内联容器,定义文本内区块

    strike:中划线

    strong:粗体强调

    sub:下标

    sup:上标

    textarea:多行文本输入框

    tt:电传文本

    u:下划线

    七、行内元素与块级元素有什么不同?

    1、块级;块级元素会独占一行,默认情况下宽度自动填满其父元素宽度

        行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

    2、块级:块级元素可以设置宽高

         行内:行内元素不可以设置宽高

    3、块级:块级元素可以设置margin,padding

        行内:行内元素水平方向的margin,padding有些无法生效

    4.块级:display:block;

       行内:display:inline;

    可以通过修改display属性来切换块级元素和内联元素。

    转载于:https://www.cnblogs.com/shuibi/p/6640962.html

    展开全文
  • 文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素(inline): 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 ...
  • 块级和行内元素的简单认识标签分为两种等级:行内元素和块级元素的区别:行内元素:块级元素块级元素和行内元素的分类:在HTML的角度来讲,标签分为:从CSS的角度讲,CSS的分类和上面的很像,就p不一样: ...

    标签分为两种等级:

            1,行内元素。
       2,块级元素。

    行内元素和块级元素的区别:

    行内元素:

    与其他行内元素并排
    不能设置宽高,默认的宽度就是文字的宽度

    块级元素:

    霸占一行,不能与其他任何元素并列.
    能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。

    块级元素和行内元素的分类:

    在HTML的角度来讲,标签分为:

    		文本级标签:p , span , a , b , i , u , em
    		容器级标签:div , h系列 , li , dt ,dd
    

    p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。

    从CSS的角度讲,CSS的分类和上面的很像,就p不一样:

        行内元素:p是个文本级标签,但是是个块级元素。所有的文本级标签,都是行内元素。

        块级元素:所有的容器级标签,都是块级元素,以及p标签。

    块级元素和行内元素的相互转换:
      我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换。

    display:inline;

    那么这个标签将变为行内元素,即:

        1,此时这个div将不能设置宽度和高度了。

        2,此时这个div可以和其他行内元素并排了。

    同样的到了我们也可以用display将行内元素(比如span)转行成块级元素 display:block;

    那么这个span标签将变为块级标签,即:

        1,此时这个span能够设置宽度,高度。

        2,此时这个span必须独占一行,其他元素无法与之并排。

        3,如果不设置宽度,将占满父级。

    常见的块级元素(自动换行, 可设置高宽 )有:

       div,h1-h6,p,pre,ul,ol,li,form,table,label等
    

    常见的行内元素(无法自动换行,无法设置宽高)有:

       a,img,span,i(斜体),em(强调),sub(下标),sup(上标)等。
    

    常见的行块级元素(拥有内在尺寸,可设置高宽,不会自动换行 )有:

     (button,input,textarea,select), img等
    
    展开全文
  • 块级元素 1:能设置宽高 2:独占一行,不和其他元素待在一行 常见元素:div,p,ul, li ,h1-h6 行级元素 1:不能设置宽高 2:可以和其他行级元素待在一行 常见元素:a,span,strong,em,u (块级元素可以...

    块级元素

    1:能设置宽高

    2:独占一行,不和其他元素待在一行

    常见元素:div,p,ul, li ,h1-h6

    行级元素

    1:不能设置宽高

    2:可以和其他行级元素待在一行

    常见元素:a,span,strong,em,u

    • (块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素)

    行内块级元素

    1:能设置宽高

    2:能和其他元素待在一行

    常见元素:img 表单

    展开全文
  • 块级元素的特点 书写时会令起一行开始 高度宽度可修改 容纳内联元素和其他块级元素 行内元素的特点 书写不会令其一行 和其他元素处于一行上 高度宽度以及内外边距无法修改 <p><span style="background-...

    在html中的元素主要分为行内元素(又称内联元素)以及块级元素

    块级元素的特点

    • 书写时会令起一行开始
    • 高度宽度可修改
    • 容纳内联元素和其他块级元素

    行内元素的特点

    • 书写不会令其一行
    • 和其他元素处于一行上
    • 高度宽度以及内外边距无法修改
    <p><span style="background-color:red;"></span>是内联元素 </p>
    

    在这里插入图片描述

    行内块级元素的特点

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

    • 不会自动换行
    • 能够设置宽高和内外边距

    常见的块级元素

    元素 描述
    address 定义地址
    caption 定义表格标题
    dd 定义列表中定义条目
    div 定义文档中的分区或节
    dl 定义列表
    dt 定义列表中的项目
    fieldset 定义一个框架集
    form 创建 HTML 表单
    h1 定义最大的标题
    h2 定义副标题
    h3…h6 定义标题
    hr 创建一条水平线
    legend 元素为 fieldset 元素定义标题
    li 标签定义列表项目
    noframes 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
    noscript 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
    noscript 定义在脚本未被执行时的替代内容
    ol 定义有序列表
    ul 定义无序列表
    p 标签定义段落
    pre 定义预格式化的文本
    table 标签定义 HTML 表格
    tbody 标签表格主体(正文)
    td 表格中的标准单元格
    tfoot 定义表格的页脚(脚注或表注)
    th 定义表头单元格
    thead 标签定义表格的表头
    tr 定义表格中的行

    常见的行内元素

    元素 描述
    a 标签可定义锚
    abbr 表示一个缩写形式
    acronym 定义只取首字母缩写
    b 字体加粗
    bdo 可覆盖默认的文本方向
    big 大号字体加粗
    br 换行
    cite 引用进行定义
    code 定义计算机代码文本
    dfn 定义一个定义项目
    em 定义为强调的内容
    i 斜体文本效果
    img 向网页中嵌入一幅图像
    input 输入框
    kbd 定义键盘文本
    label 标签为 input 元素定义标注(标记)
    q 定义短的引用
    samp 定义样本文本
    select 创建单选或多选菜单
    small 呈现小号字体效果
    span 组合文档中的行内元素
    strong 语气更强的强调的内容
    sub 定义下标文本
    sup 定义上标文本
    textarea 多行的文本输入控件
    tt 打字机或者等宽的文本效果
    var 定义变量

    可变元素

    可变元素为根据上下文决定为块级元素或者行内元素

    元素 描述
    button 按钮
    del 定义文档中已被删除的文本
    iframe 创建包含另外一个文档的内联框架(即行内框架)
    ins 标签定义已经被插入文档中的文本
    map 客户端图像映射(即热区)
    object object对象
    script 客户端脚本

    行内块级元素

    元素 描述
    none 此元素不会被显示
    block 此元素将显示为块级元素,此元素前后会带有换行符
    inline 此元素会被显示为内联元素,元素前后没有换行符
    inline-block 行内块元素
    list-item 此元素会作为列表显示

    行内元素、块级元素以及行内块级元素的转换方法

    使用display属性将三者进行转换。

    • display:inline 转换为行内元素
    • display:block 转换为块状元素
    • display:inline-block 转换为行内块状元素
    展开全文
  • 行内元素 行内元素不会自己占据一行,从左至右排列,并且设置不了宽高, ...行内块级元素也不会自己占据一行,但是可以设置其长宽,具有行内元素和块级元素的特征,是最为常用的。 块级元素 自己占据一行 ...
  • html标签按照元素种类可以分为行内元素(display: inline),块级元素(display:block)和行内块级元素(display:inline-block)三种。了解元素种类有利于,我们进行css布局及属性的使用。 “块级元素”译为 block...
  • 一,块级元素 1.块级元素总是从新的一行开始,宽度缺省值为父容器宽度,具有完整的盒子模型,可以容纳其他块级元素和内联元素。 2.HTML标签中常用的块级元素有:div,p,h1-6,hr,ul,ol,li,footer,header 二,...
  • 设置为块级元素 该元素无论宽度 自动占一行空间 设置为行级元素 该元素和其他行级元素 一起占一行空间 不能设置宽度 设置为行级-块级元素 同样的行内块元素排列一行 可以设置宽度
  • margin:auto 只对块级元素有效,如果是行内块元素(img)或者行内元素时,需要转为块级元素,才能有效。
  • 行内元素,块级元素,行内块级元素之间的区别前言一、行内元素特点:二、使用步骤1.引入库2.读入数据总结 前言 本次培训主要讲解了HTML的各种标签,感觉受益良多。所以我在课下总结了一下行内元素,块级元素,行内...
  • 块级元素:可以设计宽高,并且块级元素独占一行 例如:div h1 p table等 行内元素:都可以在一行内的元素(不会另起一行开始) 例如:span a var i u等 行内块级元素:可以设置宽高,并可以一行并排 默认行内块级...
  • 块级元素 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为块级元素 display: block; ...
  • 简介:块级元素,内联元素,行内块级元素块级元素,内联元素,行内块级元素: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hua...
  • 块级元素和行内元素的三个区别1.行内元素与块级元素直观上的区别:行内元素会在一条直线上排列,都是同一行,水平方向排列块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行2.块级元素可以包含行内...
  • 什么是行内元素、块级元素、行内块级元素 块级元素 每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。 常见的块级元素有:<h1>~<h6>,<p>,<div>,<ul&...
  • 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。 块级元素不能放在p里面。 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt...
  • 故CSS中将元素分为块级元素、行内元素和行内块级元素三个大类。 1. 块级元素(inline) 块级元素一般可以作为其他容器使用,可容纳块级元素和行内元素,其特点如下: 块级元素可以设置宽(width)和高(height); ...
  • 转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/一.两种类型HTML中的大部分元素都可...块级元素的前后都会有插入的断行,所以如果不用CSS则没法让两个块级元素并列在一起。二.块级元素...
  • 行内元素 、块级元素 、 行内块级元素的区别 块级元素 ​ 总是另起一行 ​ 可以设置其宽度 高度 内外边距 ​ 在不手动设置宽度和情况下,宽度默认为所在容器的100%(即容器宽度) ​ 可以容纳行内元素和其他块级元素 ...
  • Block element 块级元素顾名思义就是以块显示的元素,高度宽度都是能够设置的。好比咱们经常使用的、、默认状态下都是属于块级元素块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行...
  • 块级元素 1.独占一行,不和其他元素呆在一行 2.可以设置宽高 3.用来网页进行布局,承载内容 行级元素: 1.不会独占一行,可以和其他元素呆在一行 2.不可以设置宽高,其宽高由里面的内容决定 行类块级元素 1....
  • HTML元素大体被分为三种:行内元素、块级元素、行内块级元素 想实现三者之间的转换,可使用display属性: display:inline;//行内元素 display:block;//块级元素 display:inline-block;//行内块级元素 1.行内...
  • 1.块级元素: (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。 注:文字类的块级元素不能容纳块级元素,例如<p>/<h1>~<h6&...
  • HTML标签的类型分为三种:行内元素,行内块元素,块级元素 ...display:block 转换为块级元素 特性: 行内元素: 1.无法设置宽高 2. margin上下无效,只有左右有效果,padding都有效果,会撑大空间; box-sizing:border-bo...
  • 1)块级元素 特点: 1.总是从新的一行开始 2.高度、宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大多为结构性标记 常见块级...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,942
精华内容 7,976
关键字:

块级元素