行内元素与块级元素的区别，行内元素与块级元素分别有哪些

文章目录

1.块级元素
2.行内元素
3.行内块元素(融合了前两者的特点)
4.三个元素的转换
5.常用的行内元素
6.常用的块级元素
6.常用的块级元素

1.块级元素

1.总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3.宽度没有设置时，默认为100%；
4.块级元素中可以包含块级元素和行内元素。

2.行内元素

1.和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
2.高度、宽度是不可控的，设置无效，由内容决定。
设置margin左右有效，有边距效果；
设置margin上下会撑大空间但是不会产生边距效果（即盒模型margin-top/bottom有值，但页面上没有边距效果）。
设置padding左右有效，设置padding上下会撑大空间但是不会产生边距效果（同上）。
简而言之：1.行内元素的padding属性只对元素的左、右有用,上、下无用(视觉上会产生效果,但其实设置的是无效的。并不会对他周围的元素产生任何影响。)
2.行内元素的margin属性只对元素的左、右有用,上下无用

3.行内块元素(融合了前两者的特点)

(1)不自动换行，与其他行内元素都会在一条水平线上排列；
(2)高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
(3)默认排列方式为从左到右。

4.三个元素的转换

可以用 display 进行元素属性的转换
display: block; 转换为块元素
inline; 行内元素
inline-block; 行内块元素(和float连用的话会警告)

5.常用的行内元素

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>、<br>、<input>、<label>、<select>、<textarea>、<button>

6.常用的块级元素

tarea>、

6.常用的块级元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<dd>、<form>、<table>、<header>、<footer>、<address>、<article>、<hr>

行内元素与块级元素的区别，行内元素与块级元素分别有哪些相关推荐

inline内联函数 static静态函数普通函数区别
面试时候一般只会问你区别,所有本文只说区别. 内联函数和普通函数的区别: 内联函数和普通函数最大的区别在于内部的实现方面,当普通函数在被调用时,系统首先跳跃到该函数的入口地址,执行函数体,执行完成后, ...
html5语义元素表,HTML5的结构和语义(3):语义性的块级元素
HTML5的结构和语义(3):语义性的块级元素互联网发布时间:2008-10-17 18:55:35 作者:佚名我要评论 HTML5还增加了一些纯语义性的块级元素: aside fi ...
html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30
一.块级标签 div.p.h1-h6.form.ul.ol.dl.dt.dd.li.table.tr.td.th.hr.blockquote.address.table.menu.pre HTML5: ...
设置行内元素宽高和背景色后，行内元素文本不水平垂直居中解决方案
前言行内元素:指在同一行内不自动换行,可以和其他行内元素在同一水平的元素,不可以设置宽高. 行内元素设置宽高:行内元素想要设置宽高,需要用display:inline-block设置(详解如下表). ...
html中内联元素排列对齐原理,html标签中的内联元素（行内元素）详解
html内联元素,也叫行内元素,相邻的多个内联元素是水平横向排列显示在同一行,其宽度随内容的变化而变化,在同一行显示多个内容,就可以使用内联元素来实现,这样就不需要将块级元素设置为浮动或绝对定位也能在 ...
python列表元素零的移动_python列表多行
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 这个列表推导式共有145列: memberdef_list = and std: ...
Java-Runoob-高级教程-实例-数组：01. Java 实例 – 数组排序及元素查找
ylbtech-Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找 1.返回顶部 1. Java 实例 - 数组排序及元素查找 Java 实例以下实例演示 ...
Java黑皮书课后题第8章：***8.35（最大块）给定一个元素为0或者1的方阵，编写程序，找到一个元素都为1的最大的子方阵。程序提示用户输入矩阵的行数。然后显示最大的子方阵的第一个元素、行数
***8.35(最大块)给定一个元素为0或者1的方阵,编写程序,找到一个元素都为1的最大的子方阵.程序提示用户输入矩阵的行数.然后显示最大的子方阵的第一个元素.行数题目题目描述与运行示例破题代 ...
Java黑皮书课后题第8章：*8.13（定位最大的元素）编写下面的方法，返回二维数组中最大元素的位置。返回值是包含两个元素的一维数组，这两个元素表示二维数组中最大元素的行下标和列下标
*8.13(定位最大的元素)编写下面的方法,返回二维数组中最大元素的位置.返回值是包含两个元素的一维数组,这两个元素表示二维数组中最大元素的行下标和列下标题目题目描述与运行示例破题代码题目 ...
[html] 写出不定宽度的子级div，在相对于固定宽度的父级元素水平居中的布局
[html] 写出不定宽度的子级div,在相对于固定宽度的父级元素水平居中的布局 <div class="father"> <div class="so ...

行内元素与块级元素的区别，行内元素与块级元素分别有哪些

文章目录

1.块级元素

2.行内元素

3.行内块元素(融合了前两者的特点)

4.三个元素的转换

5.常用的行内元素

6.常用的块级元素

6.常用的块级元素

行内元素与块级元素的区别，行内元素与块级元素分别有哪些相关推荐

最新文章

热门文章