行内元素和块元素的区别

块元素：不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）

缺点：1.相邻元素垂直。相邻外边距会重叠。margin-bottom和margin-top重叠（重叠之后的值是两个值中的最大值）

第一种解决方案：原理bfc相关

2.父子的相邻，父元素的margin-top和子元素的margin-top发生重叠（重叠之后的值是两个值中的最大值）

关于父子相邻的解决方案：

第一种解决方案.取消相邻，给父元素设置border或者padding-top 让相邻之间有间隔。

第二种解决方案，父元素加overflow:hidden属性 -- 原理bfc相关

块元素包括：div， h1-h6 ， p ，ul，li，ol， dl，dt, hr，form,table ，tr，td

行内元素：内容决定所占空间的多少，内容多少就占多少空间。不能设置宽高（默认宽高是0）。margin垂直方向无效（margin-top,margin-bottom）,如果设置垂直方向用line-height属性。

多个行内元素排列在一起，他们之间会出席空格。

行内元素包括：font , span, b , i , u, sub, sup, a ,

标红为常见的块元素和行内元素。

行内块：共享一行，可设置宽高,多个行内元素排列在一起，他们之间会出席空格。可设置margin,padding属性。集合了块和行内的所有优点。

行内块元素包括：img,input

注意：设置两个并排的div.一个width:20%,一个width:80%.用display:inline-block 让两个div并排，会使右侧的div向下排列

效果图：

产生该问题的原因是：div1+div2的宽度：100%.但是display:inline-block 的设置会使两个div之间有空格。width就为100%再加上空格大于父级的宽度，所以会折行。

处理方式：将div1和div2之间的空格去掉

text-align这个属性在水平方向上对行内（inline），行内块(inline-block)以及文字都起作用（行内元素或行内块元素设置水平居中用text-align属性）

行内元素：垂直居中用line-height属性

行内块：设置垂直居中，不能line-height会出问题，应该用vertical-align.多个行内块元素并排，同时设置居中

同级中找设置一个最高的行内块元素(这个行内块元素内容为空，仅仅用来做对齐的标尺)，让其他元素向它对齐。

.div1{

width:0px;

height:100%;

vertical-align:middle;

display:inline-block;

}

块元素：

块元素水平居中：用margin-left和margin-right设置为auto的方式类似：margin:0 auto

块元素水平垂直居中：

情况1子级元素定宽定高(宽高各为100px)：

.parent{

position:relative;
}

.child{position:absolute;left:50%;right:50%;margin-left:-50px;margin-top:-50px;}

情况2：子级元素宽高不定：

第一种：

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,50%);
}

第二种：

.parent{
display:flex;
justify-content:center;
align-item:center
}

块元素：display:block

行内：display:inline

行内块：display:inline-block

让块消失：display:none（元素结构还在，但是在页面不显示，也不占位置）

vertical-align属性：垂直方向的对齐方式，对齐依据找到同级别最高的元素，以该元素为参照进行vertical-align的设置。

值：top,middle,bottom

行内元素和块元素的区别相关推荐

行内元素、块元素、行内块元素的区别
行内元素.块元素.行内块元素的区别一.前言 1.行内元素 2.块元素 3.行内块元素一.前言 HTML将元素分类方式分为行内元素.块元素和行内块元素三种.这三者是可以互相转换的,使用display ...
行内元素，行内块元素，块元素的区别
前言:本人是新生小白,如有错误之处欢迎指出首先我们先来介绍行内元素 inline <body>常见的行内元素有<span>ddd</span><a href ...
html中内联元素和块元素的区别、用法以及联系
昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...
html 块内元素下移,html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
一文搞懂行内元素、块元素、行内块元素
文章目录前言一.了解各个元素的概念 1.概念: 2.举个例子: 3.样式展示二.如何将块元素变为行内块元素? 1.修改css中的dispaly属性 2.在进行样式选择的时候加入浮动三.将行内元 ...
HTML网页设计：五、行内元素和块元素
行内元素和块元素 HTML系列文章目录 HTML网页设计:一.HTML的基本结构 HTML网页设计:二.网页的基本标签 HTML网页设计:三.图像标签之<img>标签 HTML网页设计:四 ...
html如何把快变为行内元素,怎么把行元素变为块元素
1. HTML中块级元素如何转为行内元素可以通过display: inline-block设置为行内元素. 步骤如下: 一.设计两个块级元素div,代码如下: 此时的块级元素显示效果: 二.设 ...
css块元素与行内元素特点,行内元素和块元素以及行内块元素的特点
一.背景初学html,接触很多标签 . .. . 等,当写出简单的小页面的时候,例如仅仅是一篇带有标题的文章,标题标签单独一行,不管后面有多大的空间: 标签中使用多个给某些词做强调,但是却和中的 ...
从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

行内元素和块元素的区别

行内元素和块元素的区别相关推荐

最新文章

热门文章