块级元素

概念:

  • 每个块级元素都是独自占一行。 
  • 元素的高度、宽度、行高和边距都是可以设置的。   
  • 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%)


<address>//定义地址                             <h3>     //定义标题                                                                                                 <ol>     //定义有序列表

<caption>//定义表格标题                       <h4>     //定义标题                                                                                                  <ul>    //定义无序列表

<dd>    //定义列表中定义条目               <h5>     //定义标题                                                                                                  <p>     //标签定义段落

<div>     //定义文档中的分区或节         <h6>     //定义最小的标题                                                                                        <pre>     //定义预格式化的文本

<dl>    //定义列表                                  <hr>     //创建一条水平线                                                                                         <table>     //标签定义 HTML 表格

<dt>     //定义列表中的项目                  <legend>    //元素为 fieldset 元素定义标题                                                              <tbody>     //标签表格主体(正文)

<fieldset> //定义一个框架集                  <li>     //标签定义列表项目                                                                                        <td>    //表格中的标准单元格

<form> //创建 HTML 表单                     <noframes>    //为那些不支持框架的浏览器显示文本,于 frameset 元素内部          <tfoot>     //定义表格的页脚(脚注或表注)

<h1>    //定义最大的标题                      <noscript>    //定义在脚本未被执行时的替代内容                                                       <th>    //定义表头单元格

<h2>    // 定义副标题                            <tr>     //定义表格中的行                                                                                              <thead>    //标签定义表格的表头


行级元素

概念:

  • 每一个行内元素可以和别的行内元素共享一行,相邻的行内元素会排列在同一行里,直到一行排不下了,才会换行。 
  • 行内元素的高度、宽度、行高及顶部和底部边距不可设置。 
  • 元素的宽度就是它包含的文字或图片的宽度,不可改变。


<a>     //标签可定义锚                                                       <abbr>     //表示一个缩写形式                                                     <acronym>     //定义只取首字母缩写

<b>     //字体加粗                                                                <bdo>     //可覆盖默认的文本方向                                              <big>     //大号字体加粗

<br>     //换行                                                                      <cite>     //引用进行定义                                                             <code>    // 定义计算机代码文本

<dfn>     //定义一个定义项目                                               <em>     //定义为强调的内容                                                       <i>     //斜体文本效果

<img>     //向网页中嵌入一幅图像                                      <input>     //输入框                                                                        <var>    // 定义变量

<kbd>     //定义键盘文本               <label>     //标签为 input 元素定义标注(标记)         <q>     //定义短的引用

<samp>     //定义样本文本              <select> // 创建单选或多选菜单               <small>     //呈现小号字体效果

<span>     //组合文档中的行内元素          <strong> //加粗                       <sub>     //定义下标文本

<sup>     //定义上标文本                <textarea>     //多行的文本输入控件              <tt>     //打字机或者等宽的文本效果



区别:一是排列方式,二是宽高边距设置,三是默认宽度。
  1. 块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。
  2. 块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。
  3. 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

2019-10-09  10:16:16

css的块级元素和行级元素的更多相关文章

  1. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  2. CSS中的块级元素与行级元素

    最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...

  3. CSS块级元素与行级元素(转载)

    块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以 ...

  4. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  5. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  7. 【CSS系列】块级元素和行内元素

    块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...

  8. CSS标准文档流 块级元素和行内元素

    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...

  9. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

  10. CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

随机推荐

  1. Django-admin站点管理的详细使用

    使用Django的管理模块,需要按照如下步骤操作: 管理界面本地化 创建管理员 注册模型类 自定义管理页面 1 管理界面本地化 在settings.py中设置语言和时区 LANGUAGE_CODE = ...

  2. 因果推理的春天-实用HTE(Heterogeneous Treatment Effects)论文github收藏

    一直以来机器学习希望解决的一个问题就是'what if',也就是决策指导: 如果我给用户发优惠券用户会留下来么? 如果患者服了这个药血压会降低么? 如果APP增加这个功能会增加用户的使用时长么? 如果 ...

  3. unittest介绍

    unittest框架是python中一个标准的库中的一个模块,该模块包括许多的类如 test case类.test suit类.texttest runner类.texttest resuite类.t ...

  4. Python之装饰器(二)

    以前你有没有这样一段经历:很久之前你写过一个函数,现在你突然有了个想法就是你想看看,以前那个函数在你数据集上的运行时间是多少,这时候你可以修改之前代码为它加上计时的功能,但是这样的话是不是还要大体读读 ...

  5. vi/vim编辑器使用方法详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对Unix及li ...

  6. Making Dishes (P3243 [HNOI2015]菜肴制作)

    Background\text{Background}Background I've got that Luogu Dialy has been \text{I've got that Luogu D ...

  7. php架构师都要会什么

    架构师的成长离不开踩坑,不断试验各种方案,各种踩坑,从小坑到大坑,逐渐归纳.另外就是多学习多交流,兼收并蓄,不用特别在意细节,观其大略,了解常见的各种东西的核心价值与短板所在.一个程序和计算系统软件体 ...

  8. 七、springBoot 简单优雅是实现文件上传和下载

    前言 好久没有更新spring Boot 这个项目了.最近看了一下docker 的知识,后期打算将spring boot 和docker 结合起来.刚好最近有一个上传文件的工作呢,刚好就想起这个脚手架 ...

  9. echarts画中国地图,省市区地图分享

    中国地图 四川地图 重庆地图 源码分享: https://github.com/livelyPeng/ec-map

  10. VUE图片剪辑插件 React图片剪辑插件

    React图片剪辑插件: https://github.com/roadmanfong/react-cropper React图片剪辑插件: https://github.com/xyxiao001/ ...