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

    2021-03-30 19:46:55
    内联元素 内联元素的内联指的是外在盒子,和display:inline元素不是一个概念 与内联元素有关的盒子有内联盒子,行框盒子。行框盒子是多个内联盒子组成的,每一行是一个行框盒子。 内联元素的特点: 1. inline元素不...

    内联元素

    内联元素的内联指的是外在盒子,和display:inline元素不是一个概念
    与内联元素有关的盒子有内联盒子,行框盒子。行框盒子是多个内联盒子组成的,每一行是一个行框盒子。
    内联元素的特点:

    1. inline元素不可设置width,inline-block元素可设置width。

    2. padding断行,内联元素的padding会随着元素内部测换行而换行,padding-left加在第一行最左边,padding-right加在最后一行。padding-top和padding-right都加。

    1、如果只有两行

         <div class="father">
             <span class="son">啊哈哈哈哈哈哈哈哈</span>
         </div>
    
          .father{
              width: 100px;
              background-color: yellow;
          }
          .son{
              
            padding: 15px;
              background-color: blue;
          }
    

    在这里插入图片描述
    根据后来者居上的原则,下面的padding-top会遮盖住上面的内容,所以才会这么显示。

    2、超过两行

         <div class="father">
             <span class="son">啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈或</span>
         </div>
    
          .father{
              width: 100px;
              background-color: yellow;
          }
          .son{
              
            padding: 15px;
              background-color: blue;
          }
    

    在这里插入图片描述
    中间一行继承了了padding-top和padding-bottom,但是无padding-left或者padding-right,所以第二行遮住了第一行的内容,同理最后一行也是。

    幽灵空白节点

    在HTML5声明的文档中,每一个行框盒子前面都会存在一个宽度为0,高度和文本一样的空白节点。
    但是在测试的时候发现空的span元素高度为0,但是设置了display:inline-block后居然出现了高度

         <div class="father">
             <span class="son"></span>
         </div>
    

    在这里插入图片描述

    设置了display:inline-block后

          .son{
             display: inline-block;
          }
    

    在这里插入图片描述
    后来查阅了资料才知道出现幽灵空白节点是有条件的
    在这里插入图片描述

    展开全文
  • 在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a... 内联元素 内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度
  • 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:...
     

    块元素、内联元素、内联块元素

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

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

    • 支持全部的样式
    • 如果没有设置宽度,默认的宽度为父级宽度100%
    • 盒子占据一行、即使设置了宽度

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

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

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

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

    • 支持全部样式
    • 如果没有设置宽高,宽高由内容决定
    • 盒子并在一行
    • 代码换行,盒子会产生间距
    • 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。

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

    display属性
    display属性是用来设置元素的类型及隐藏的,常用的属性有:
    1、none 元素隐藏且不占位置
    2、block 元素以块元素显示
    3、inline 元素以内联元素显示
    4、inline-block 元素以内联块元素显示

    展开全文
  • 三大元素块级元素、内联元素以及块级内联元素的具体作用,和其中的一些标签的用处、语法和属性,通过style可以改变大部分标签的属性,学会通过img在网页中插入图片并能更改大小,利用input标签中的type属性来改变...

    内容大纲

          三大元素块级元素、内联元素以及块级内联元素的具体作用,和其中的一些标签的用处、语法和属性,通过style可以改变大部分标签的属性,学会通过img在网页中插入图片并能更改大小,利用input标签中的type属性来改变输入框的种类,实现较为简单的表单设计,还能使用span标签将一些特殊字符输入并能在网页中展现出来。有序、无序、自定义列表的不同点和具体使用方法,显示出来的样式不同,且可通过list-style-imageURL(路径)来更改列表符号为图片。

    笔记

    块级元素

    div元素可以将文档分隔为不同的、独立的部分,是一个容器

    p是一个段落标签,一般作为文字标签,p标签不能包裹块级元素,但是可以包裹行内标签,p标签相对于div具有上下边距

    h1-h6为标题标签;谷歌浏览器默认大小为16pxh4四级标题大小为1em,相当于16px;em越大单位越大,1em=16px,2em=32px。如果设置了初始大小,那么1em等于初始大小。

    列表标签(最少由两个标签组成 ol-li ul-li dl-dt-dd

    有序:有序列表是一列用数字标记的项目(数字、字母、罗马数字)默认使用数字来标记,根据type来更改字母、罗马数字标记;字母:大写A大写标记,小写a小写标记;罗马数字标记:大写I大写标记,小写i小写标记;排列顺序:start 书写多少就从多少排起

    无序:默认使用粗体圆点标记,可以使用type来改变标记样式(空心圆 circle 正方形 square 实心圆 disc

    自定义:自定义列表中每个元素标题用dt定义,元素内容用dd定义

    每一个列表都具有内外间距样式

    <hr/>创建一条水平线(空标签)

    内联元素

    1. a标签:

    从一张页面链接到另一张页面,href表示链接目标

    语法:<a href=””></a> href必须写

    在起始标签内部为属性,注意空格;在起始标签与结束标签之间为内容。

    一般a标签具有三个属性:

    • href属性一般为网址或文件相对路径;
    • target属性一般表示打开新页面的方式(_blank 在新窗口打开 不可以返回上一个页面  _parent 在父级框架打开 _self 默认值 在相同窗口打开 可以返回上一个页面  _top在整个窗口中打开)
    • title属性为此超链接的分类标题
    • 锚点:一般用于返回顶层或者到达底层
    • #ID,表示唯一性;. class表示可复用(为元素取名)
    1. span标签:

    没有特殊的含义,与div类似,区别在于div是块级元素,span是内联元素,是一个自适应标签。用处是处理一个大块内容里面的小块内容。

    1. 斜体

    i标签 因为i标签使用率很低,所以通常用作图标标签

    em标签

    1. 加粗

    b标签;strong标签

    1. 其余标签

    上标 sup;下标 sub;商标 code;格式 pre

    pre标签可以完美的保留内容中的空格、转行各种格式

    1. 标签内部的空格不管多少个,编译之后在浏览器上只有一个空格,如需添加空格,使用&nbsp标签

    内联块状元素

    1. img

    向网页中嵌入一幅图像 注意:从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

    语法:<img src=”” alt=””/>单标签

    src属性:规定显示图像的URL路径来源

    alt属性:规定图像的替代文本

    具有heightwidth属性

    图片的格式:GIFJPG/JPEGPNG

    GIF特点:最多支持256色,支持透明效果,支持多帧动画显示效果(可以使用在品质较差或者需要透明或动画显示的情况)

    JPG/JPEG特点:支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果(可以使用在品质要求较高的场合:风景、写真等)

    PNG特点:是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画效果(w3c推荐的)

    1. input标签

    用于收集用户信息,根据不同type属性

      • text 定义单行输入字段,用户可在其中输入文本
      • password 定义密码字段,该字段中字符被掩码
      • radio 定义单选按钮
      • checkbox 定义复选框
      • hidden 定义隐藏的输入字段
      • button 定义功能按钮

    input宽度要写在style

    单选框radio需要取相同的名字 注意:多选框与单选框可以是多个,每一个为一个input

    button 普通按钮;reset 重置;submit 提交;file 文件选择

    注意:文本框、密码框、按钮才具有value属性;多选框、单选框具有默认值 checked

    密码框提示为小黑点,可用placeholder设置可见提示。

    展开全文
  • 块元素又名块级元素,和其对应的是内联元素,都是html规范中的概念,内联元素其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等
  • 1.什么是内联元素内联元素有很多种叫法,如内联元素、内嵌元素、行内元素、直进式元素等,和块级元素对应。内联元素和它的兄弟元素之间一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。 2.内联...

    1.什么是内联元素?

    内联元素有很多种叫法,如内联元素、内嵌元素、行内元素、直进式元素等,和块级元素对应。内联元素和它的兄弟元素之间一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。

     

    2.内联元素的特点

    (1)和其他兄弟元素同在一行,不用另起一行

    (2)宽高以及到顶部和底部的边距都不可以设置

    (3)宽度受内容挤压,即它的宽度就是它内容的宽度

    (4)只能容纳内联元素和文本,通常被包含在块级元素中使用

     

    3.常见的内联元素

     a – 锚点

     img – 图片

     input – 输入框

     span – 常用内联容器,定义文本内区块

     b – 粗体(不推荐)

     big – 大字体

     br – 换行

     em – 强调

     font – 字体设定(不推荐)

     i– 斜体

     s – 中划线(不推荐)

     select – 项目选择

     small – 小字体文本

     strike – 中划线

     strong – 粗体强调

     sub – 下标

     sup – 上标

     textarea– 多行文本输入框

     u – 下划线

     

    展开全文
  • 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div...
  • 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div...
  • html块状元素和内联元素 块和内联元素 (Block and Inline Elements) Let's understand block and inline elements using the below examples: 让我们使用以下示例了解block和inline元素: 输出代码示例: (Code ...
  • html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。 块级元素特点: 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(霸道,一个块级元素独占一行) 2...
  • 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、...
  • 今天先来解释一下什么是内联元素,什么是块元素 百度百科中怎么写呢: 块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念。大多数HTML 元素被定义为块级元素或...
  • 内联元素和块级元素

    2020-10-10 21:30:44
    内联元素和块级元素内联元素(inline element)块级元素(block element)块级元素和内联元素的转化 写在前面:在学习过程中,内联元素和块级元素是一个小小的槛,希望可以借这个博客整理一下这方面的知识,方便自己日后...
  • 元素就是标签 在布局中常用标签有三种 块元素 内联元素 内联块元素 1.块元素也是行级元素 在布局中常用的标签有:div p ul li h1-h6 dl dd dt等。 在布局中的行为: 如果不设置固定宽度默认百分之百,不设置高度 由...
  • 块元素、内联元素、内联块元素元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div...
  • 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,261
精华内容 4,904
关键字:

内联元素