行内元素与块级元素,以及区别

行内元素与块级元素

  首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。

块级元素:(以下列举比较常用的块级元素,详情可在w3cschool查询)

<div>定义文档中的分区或节<h1>定义最大的标题<h2>定义副标题<h3>定义标题<h4>定义标题<h5>定义标题<h6>定义最小的标题<ul>定义无序列表<ol>定义有序列表<li>定义有序列表或无序列表的列表项目<dl>定义自定义列表<dd>定义自定义列表中的条目<dt>定义自定义列表中的项目<hr>创建一条水平线<p>定义段落<table>定义表格<td>表格中的标准单元格<th>定义表头单元格<thead>标签定义表格的表头<tr>定义表格中的行

行内元素:(以下列举比较常用的行内元素,详情可在w3cschool查询)

<a>定义超链接<b>字体加粗<span>定义在文档中的行内元素<img>向网页中插入题图像<input>输入框<small>小号字体效果<br>换行<big>字体加大加粗<strong>强调的语气<select>创建单选或多选菜单<textarea>定义文本域,多行的文本输入控件

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


1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;

 块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;

 块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;

 行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

 

如有何见解或疑问可私密我,大家共同学习进步。

转载于:https://www.cnblogs.com/duzheqiang/p/5679378.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab程序设计图像匹配,灰度,归一化算法,快速匹配。有代码好用。转载

图像匹配matlab程序设计:1. 概念解释&#xff0c;2&#xff0e;数字图像匹配算法设计&#xff1a;⑴基于灰度的归一化匹配算法⑵基于灰度的快速模板匹配算法。三&#xff0e;相应matlab程序设计&#xff1a;1&#xff0e;数字图像匹配相关函数 2&#xff0e;数字图像匹配函数&a…

文档根元素 project 必须匹配 doctype 根 null_快评:全新MG5上市6.49万起,但买它必须准备10万?...

原标题&#xff1a;快评&#xff1a;全新MG5上市万起&#xff0c;但买它必须准备10万&#xff1f;上汽荣威新推出了一款A级轿车——MG5&#xff0c;售价万。上市前&#xff0c;我曾经在网上见过这款车的造型图&#xff0c;很有好感。所以当看到它的最低售价只有万时&#xff0c…

关于oracle sql语句查询时表名和字段名要加双引号的问题

oracle初学者一般会遇到这个问题。用navicat可视化创建了表&#xff0c;可是就是不能查到&#xff01;后来发现②语句可以查询到①select * from user; 但是&#xff0c;我们如果给user加上双引号就可以查到了&#xff01; ②select * from "user"; 难道oracle跟mysq…

模拟退火算法(代码可直接运行)

模拟退火算法&#xff08;SA&#xff09; 模拟退火是很经典的算法&#xff0c;针对大多数模型、应用&#xff0c;受限于SA运行时间长等特点&#xff0c;已不能直接应用SA&#xff0c;这样的算法值得去改进&#xff0c;我试图找一些缩短运行时间的方法&#xff0c;已经在测试&a…

fedora 33 topbar_最新!新增确诊病例33例,其中本土病例1例

【最新&#xff01;新增确诊病例33例&#xff0c;其中本土病例1例】11月8日0-24时&#xff0c;31个省(自治区、直辖市)和新疆生产建设兵团报告新增确诊病例33例&#xff0c;其中境外输入病例32例(上海13例&#xff0c;陕西6例&#xff0c;广东4例&#xff0c;四川4例&#xff0…

javaweb基础(40)_jdbc框架

一、元数据介绍 元数据指的是"数据库"、"表"、"列"的定义信息。 1.1、DataBaseMetaData元数据 Connection.getDatabaseMetaData()获得代表DatabaseMetaData元数据的DatabaseMetaData对象。  DataBaseMetaData对象的常用方法&#xff1a; getUR…

matlab运动目标检测

matlab运动目标检测最近做了运动目标检测的程序和GUI实现&#xff0c;参考了挺多博客&#xff0c;很多都是对数据格式要求比较高或者存在一定的bug&#xff08;有些是因为版本不同&#xff09;&#xff0c;进行了一些修改。&#xff08;2014以后的matlab都能运行&#xff09;&a…

st-link v2怎么连接_三相交流电源的三角形和星形连接

相交流电是电能的一种输送形式&#xff0c;简称为三相电。三相交流电源&#xff0c;是由三个频率相同、振幅相等、相位依次互差120的交流电势组成的电源。我国发电厂和电力网生产、输送和分配的交流电都是三相交流电。1、三角形连接将三相电源的三个线圈&#xff0c;以一个线圈…

Flex AIR 文件对象操作

功能1、指向目录和文件 File对象有两个属性都能定义文件路径&#xff0c;它们是nativePath和url。nativePath是在特定平台使用的文件路径&#xff08;主要就是Windows和MacOs上的路径表示不同&#xff09;&#xff0c;url则是统一的”file:///c:/Sample/test.txt”这样的表示方…

matlab程序聚类预测机器学习

matlabmatlab程序代做&#xff0c;数据挖掘&#xff0c;聚类&#xff0c;预测&#xff0c;分类&#xff0c;优化&#xff0c;建模。降重&#xff0c;降低重复率&#xff0c;24h出结果&#xff0c;最低1%重复。 机器学习&#xff0c;深度学习&#xff0c;神经网络代写&#xff0…

友益文书类似软件_团队成员分享 | 港中文翻译学姐:硬件不够,软件来凑;心之所愿,无所不能...

B学姐硬件不行的同学一定要努力提高自己对申请专业上的实习经验。饱腹诗书不够&#xff0c;也要有亲身实践后的体悟&#xff0c;这很加分。多对该行业背景现状进行思考&#xff0c;老师都喜欢有思想的学生&#xff0c;在后期面试也会给你带来惊喜。在读专业&#xff1a;港中文M…

iOS开发技巧,细节(二)

1.常量名称最好用static标识&#xff0c;例如下面的代码&#xff0c;包括其他一些只需要定义一次&#xff0c;之后不需要变化的变量也最好使用static static NSString *CellIdentifier "Cell"; 2.当设置视图控制器需要接受通知时&#xff0c;需要在dealloc取消监听 …

matlab支持向量机程序代做

matlab&#xff0c;支持向量机 回归&#xff0c;分类&#xff0c;都可以。另外决策树&#xff0c;神经网络都可以私人订制 **线性svm&#xff0c;二次svm&#xff0c;cubic svm

c++ qt5范例开发大全_使用yocto工具编译qt5.9.6总结

运行平台&#xff1a;OKMX6DL-C编译平台&#xff1a;Ubuntu 14.04.6 LTS编译工具&#xff1a;arm-poky-linux-gnueabi-gcc&#xff08;gcc version 5.3.0 (GCC) &#xff09;qt源码&#xff1a;qt-everywhere-opensource-src-5.9.6.tar.xz参考&#xff1a;嵌入式开发之Qt-5.9.6…

Android堆栈分析

在开发中&#xff0c;与界面跳转联系比较紧密的概念是Task&#xff08;任务&#xff09;和Back Stack&#xff08;回退栈&#xff09;。activity的启动模式会影响Task和Back Stack的状态&#xff0c; 进而影响用户体验。除了启动模式之外&#xff0c;Intent类中定义的一些标志&…

如何写一篇MBA论文-涉及matlab建模

如何写一篇MBA论文&#xff1f; 知乎 19 个回答方向&#xff0c;具体一点&#xff0c;不要太大。战略管理、薪酬管理、绩效考核、营销管理&#xff0c;客户关系管理、供应链管理、供应商选择与评价&#xff0c;库存问题。。论文模式第1章&#xff1a;绪论第2章&#xff1a;现状…

什么电脑的牌子好用_扬州诚招电动牙刷代理有什么牌子比较好用

扬州诚招电动牙刷代理有什么牌子比较好用&#xff0c;珈蓝电器实惠物美&#xff0c;为人类口腔事业的发展再创新贡献。扬州诚招电动牙刷代理有什么牌子比较好用&#xff0c; 很多人说电动牙刷是懒人神器&#xff0c; 但偷懒可以&#xff0c;口腔清洁效果可不能因此打折。电动牙…

map集合遍历的五种方法

package com.jackey.topic; import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List;import java.util.Map;import java.util.Set; //循环遍历map的方法public class CircleMap { public static void main(String[] args) { M…

360浏览器打不开网页_苹果移动端、PC端safari浏览器打不开网页的解决方案!

你还在为苹果自带的safari浏览器打不开网页而苦恼吗&#xff0c;接下来的答案会帮助你解决苦恼。苹果自带safari浏览器的设备分为两种&#xff1a;移动端、PC端。因此不同设备出现safari浏览器打不开网页的情况需要具体问题具体分析。最简单的问题往往最容易被我们忽视&#xf…