美文网首页
CSS中的块级、行内以及行内块元素

CSS中的块级、行内以及行内块元素

作者: GoFzy | 来源:发表于2019-03-07 18:00 被阅读0次

1.各级元素特性

1.1 块级元素(block):大多为结构性标记

①每个元素独占一行或者多行

②可以手动设置高宽属性值

③宽度默认为网页(父级元素)的100%

④可以容纳行内元素与其他块级元素(p、h标签除外,因为它们是由文字组成)

1.2 行内元素(inline-level):大多为描述性标记

①与相邻元素在同一行上

②高宽无法设置,但可以设置水平方向的padding和margin值

③宽度由其本身确定

④行内元素只能容纳行内元素(a标签除外,链接内部不能再放链接,tips:a标签可以块级元素)

1.2 行内块元素(inline-block):  综合行内和块状元素的特性

①与相邻元素在同一行内,但之间存在间隙,间隙大小为字体大小

②默认宽度为其本身宽度

③高度、宽度、内外边距均可设置

2.各级常用的元素


2.1 块级元素:

  <h1>...</h1>  标题一级   至  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  自定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

2.2 行内元素:

  <span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

2.3 行内块元素:

  <input>...</input>  文本框

  <img >  图片

  此外浮动、绝对定位和固定定位,可以将块元素转化为行内块元素

相关文章

  • 任务八-主线

    CSS常见属性(上) 块级元素行内元素块级可以包含块级和行内元素,行内只能包含文本和行内元素块级元素占据一整行的空...

  • CSS基础样式

    CSS基础样式 块级元素可以包含块级元素和行内元素 行内元素只可以包含文本和行内元素 宽高只对块级元素生效,对行内...

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

  • CSS中的块级、行内以及行内块元素

    1.各级元素特性 1.1 块级元素(block):大多为结构性标记 ①每个元素独占一行或者多行 ②可以手动设置高宽...

  • 10. CSS 排版

    1、标准流(文档流/普通流) 默认排版 CSS的元素分为块级、行内、行内块级 块级是垂直排版,行内、行内块级是水平...

  • 垂直居中,水平居中

    CSS设置行内元素的水平居中 CSS设置行内元素的垂直居中 CSS设置块级元素的水平居中 CSS设置块级元素的垂直居中

  • 01-CSS

    前言1-CSS对HTML元素分类 css元素分为三种:块级元素、行内元素和行内块元素。 1.块级元素:设置disp...

  • CSS 常见样式

    CSS 常见样式 块级元素和行内元素 块级元素 HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素。...

  • 入门任务8

    块级元素和行内元素分别有哪些?## 块级元素 行内元素 区别 块级元素可以包含行内元素和其他块级元素,行内元素只能...

  • CSS行块级元素

    行内元素 块级元素 行内块级元素

网友评论

      本文标题:CSS中的块级、行内以及行内块元素

      本文链接:https://www.haomeiwen.com/subject/lxdhpqtx.html