css-display-inline-block和inline-block的区别
display的32种写法
display的32种写法你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们⼀⼀道来，让你⼀次性完全掌握display，从此再也不⽤对它发愁。
从⼤的分类来讲，display的32种写法可以分为6个⼤类，再加上1个全局类，⼀共是7⼤类：外部值所谓外部值，就是说这些值只会直接影响⼀个元素的外部表现，⽽不影响元素⾥⾯的⼉⼦级孙⼦级元素的表现。
display: block;这个值⼤家不陌⽣，我们最熟悉的<div>缺省就是这个值，最基本的块级元素，属于css⼊门初学者都知道的概念，只要是容器类型的元素基本都是这个值。
除<div>之外，还有<h1>到<h6>，<p>，<form>，<header>，<footer>，<section>，<article>天⽣都是这个值。
display: inline;这个值⼤家也不陌⽣，⾏内元素嘛，只要是个⾏内元素都是这个值，最典型的是<span>，还有<a>，<img>，以及古代html语⾔当中的<b>，<i>都属于这⼀类型。
display: run-in;这个值有点奇怪，通常没⼈⽤它，但你可以知道它。
因为除了IE和Opera⽀持它以外，其他所有主流浏览器包括Chrome, Safari, Firefox全都对它置若罔闻。
这东西说⽩了也没什么神秘，它的意思就是说如果我们命令⼀个元素run-in，中⽂意思就是『闯⼊』！那么这个元素就直接闯⼊下⼀⾏。
⽐如说这样：写起来⼤概就是这样：<div class="a">aaa</div><div class="b">bbb</div>.a {font-size: 36px;display: run-in;}这有什么⽤呢？我们拿span设置font-size⼀样可以实现这个效果，就让IE⾃⼰跟⾃⼰玩去吧！说实话，在⼈⼒资源如此宝贵的今天，IE的产品经理不知脑⼦是不是进⽔了，不派⼯程师去实现那么多⽐这重要的多得多的特性，却花时间做这么个没⽤的玩意⼉，难道⼯程师的时间不是⾦钱吗？难怪市场占有率连年下滑。
CSS中样式display属性inline，block及inline-block
CSS中样式display属性inline，block及inline-block分类：div 元素默认display属性为block 为块状元素，⽆论div中⽂字字数，总以块状显⽰，即占满浏览器宽度。
[html]1. <div style="background-color:red;">测试测试</div>[html]1. <div style="display:inline;background-color:red;">sss</div>⽽span元素默认display属性为inline，只占据span中所占字数的宽度。
[html]1. <span style="background-color:red;">测试测试<span>[html]1. <span style="background-color:red;display:block;">测试测试<span>inline-block[html]1. <div style="display:inline-block;background-color:red;width:20px;">sfffs</div>2. <p>3. <span style="display:inline-block;background-color:red;width:20px;">sfffs</span>inline-block 与 inline 的区别默认情况下 inline-block 与inline 效果⼀致但当对div设置width或height时，由于width和height属性只对块状元素即block类型起作⽤，就能看出inline-block与inline 的区别了。
CSS中display对布局的影响以及元素display的默认值
CSS中display对布局的影响以及元素display的默认值看到前端越来越多的mvc框架出现，之前偶尔还看到有OOCSS（⾯向对象的CSS编程）的⽂章。
所以可以这样理解，前端HTML页⾯的所有元素（tag），也都可以理解对象。
每个对象有⾃⾝的属性，以及每个对象与其他对象的关系。
关系中最重要也是本⽂讨论的是显⽰时候的位置关系。
每个HTML对象除了与其他HTML对象（标签）有关系之外，还有对象在显⽰时与浏览器或者windows对象的关系。
位置关系也就是页⾯的布局。
如果能将合适的对象根据需要放在合适的位置，并与其他对象和睦相处，界⾯就可以按照设计者的想法实现了。
《下⾯内容摘⾃⽹络，帮助理解和记录》根据CSS规范的规定，每⼀个⽹页元素都有⼀个display属性，⽤于确定该元素的类型，每⼀个元素都有默认的display属性值。
⽐如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；⽽span元素的默认display属性值为“inline”，称为“⾏内”元素。
div这样的块级元素，就会⾃动占据⼀定矩形空间，可以通过设置⾼度、宽度、内外边距等属性，来调整的这个矩形的样⼦；与之相反，像“span”、“a”这样的⾏内元素，则没有⾃⼰的独⽴空间，它是依附于其他块级元素存在的，因此，对⾏内元素设置⾼度、宽度、内外边距等属性，都是⽆效的。
块元素⼀般都从新⾏开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。
“form"这个块元素⽐较特殊，它只能⽤来容纳其他块元素。
如果没有css的作⽤，块元素会顺序以每次另起⼀⾏的⽅式⼀直往下排。
⽽有了css以后，就可以改变这种html的默认布局模式，把块元素摆放到想要的位置上去。
⽽不是每次都另起⼀⾏。
需要指出的是，table标签也是块元素的⼀种，table based layout和css based layout从⼀般使⽤者（不包括视⼒障碍者、盲⼈等）的⾓度来看这两种布局，除了页⾯载⼊速度的差别外，没有其他的差别。
CSS使用display的方法
CSS使用display的方法
我们为大家收集整理了关于CSS使用display，以方便大家参考。
display:block是将对象块状化
display:none
是不显示
Qu1:我经常看到有做一个层，然后里面写点什幺东西，然后就给它个属性display:none,这样这个东西就在网页上看不见了，但为什幺还要建一个层呢，不是无谓的增加网页大小幺?
An:1。
可以用js让它们显示
2。
可以在层内做个iframe,当作后台,无刷新处理数据
3。
在层里放一些图片，让浏览器先缓存，打开这些图片时会快一些
4。
为了SEO，也就是搜索引擎优化，在隐藏的层里适当的做些关键词
”
等等...。
CSSdisplay属性详解
CSSdisplay属性详解display的所有属性{/* CSS 1 */display: none;display: inline;display: block;display: list-item;/* CSS 2.1 */display: inline-block;display: table;display: inline-table;display: table-cell;display: table-column;display: table-column-group;display: table-footer-group;display: table-header-group;display: table-row;display: table-row-group;display: table-caption;/* CSS 2.1 *//* CSS 3 */display: inline-list-item;display: flex;display: box;display: inline-flex;display: grid;display: inline-grid;display: ruby;display: ruby-base;display: ruby-text;display: ruby-base-container;display: ruby-text-container;/* CSS 3 *//* Experimental values */display: contents;display: run-in;/* Experimental values *//* Global values */display: inherit;display: initial;display: unset;}下⾯就display的重要属性进⾏讲解，并配合⼀些相关的例⼦none是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也⽆法显⽰，相当于该元素不存在。
CSS命令大全
点击不放
25
overflow:hidden;
超出部分隐藏命令
26
backgroundcolor:rgba
透明颜色
27
overflow:aotu;
超出部分自动调整
(0,0,0,0.6)
28
overflow:scroll; 超出部分显示滚动条
29
空格
30
<br/>
换行
31
list-style
li的数字
32
position
移动对象
33 position:absolute
body内运动
top:0px ;
34
position:fixed
body内固定位置
35 position:relative 某对象div内运动
36
checkbox
复选框
<input type="checkbox"/>
首行缩进
px
18 background-position
背景图片位置
right,left,
19
text-decoration
取消下划线
none
20
display:block
显示模式
21
display：none
隐藏模式
22 display:inline-block 显示模式（某div内}
23
a:hover
1
background-color
2
margin
3
font-family
4
color
5
background-image
网的效果Style中的Display用法
网的效果S t y l e中的D i s p l a y用法Document serial number【NL89WT-NY98YT-NC8CB-NNUUT-NUT108】网页的效果：Style 中的Display用法display:none改div不会显示,默认为inline 或""，可以显示出来。
HTML{ display : sDisplay }Scripting [ = sDisplay ]Possible ValuessDisplay String that specifies or receives one of the following values.block Object is rendered as a block element.none Object is not rendered.inlineDefault. Object is rendered as an inline element sized by thedimensions of the content.inline-blockObject is rendered inline, but the contents of the object arerendered as a block element. Adjacent inline elements arerendered on the same line, space permitting.list-itemInternet Explorer 6 and later. Object is rendered as a blockelement, and a list-item marker is added.table-header-groupTable header is always displayed before all other rows and rowgroups, and after any top captions. The header is displayed oneach page spanned by a table.table-footer-groupTable footer is always displayed after all other rows and rowgroups, and before any bottom captions. The footer isdisplayed on each page spanned by a table.<div style="height:276px;width:350px;line-height:20px;overflow-y:scroll;overflow-x:hidden;background:#fff;display:none" id="LrcShower_div">2121</div>______________________________________________________________display版本：CSS1/CSS2 兼容性：IE4+ NS4+ 继承性：有语法：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group取值：block : CSS1 块对象的默认值。
CSS基础例子display属性：block、inline和inline-block的区别
CSS基础例⼦display属性：block、inline和inline-block的区别 HTML中块级元素(block)和⾏级元素(inline)；⽐如div就是常见的块级元素，span就是常见的⾏级元素。
可以通过css的display属性来设置⼀个元素到底是块级，还是⾏级元素；display:block将元素设置成块级的，display:inline将元素设置成⾏级的。
span的实际显⽰宽度和⾼度由其内容决定。
1、block元素会独占⼀⾏，多个block元素会各⾃新起⼀⾏。
默认情况下，block元素宽度⾃动填满其⽗元素宽度。
2、block元素可以设置width,height属性。
块级元素即使设置了宽度,仍然是独占⼀⾏。
3、block元素可以设置margin和padding属性。
1、inline元素不会独占⼀⾏，多个相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排列不下，才会新换⼀⾏，其宽度随元素的内容⽽变化。
2、inline元素设置width,height属性⽆效。
3、inline元素的margin和padding属性，⽔平⽅向的padding-left, padding-right, margin-left, margin-right都产⽣边距效果；但竖直⽅向的padding-top, padding-bottom, margin-top, margin-bottom不会产⽣边距效果。
1、让⾏内块可以设置宽度⾼度。
span是⾏级元素，所以不能设置其宽度和⾼度；如果将span设置成block，那么⼜会⾃动换⾏。
怎么让多个span在同⼀⾏显⽰，⽽且能够固定宽度呢？这就需要⽤到display:inline-block了。
例⼦：<head><style>span{background-color:#43be60;width:100px;height:50px;margin-top:20px;margin-left:20px;display:inline-block;}</style></head><body><div style="background-color:#ededed;width:400px;height:400px;"><span>1</span><span>10</span><span>100</span><span>1000</span></div></body>。
DIVCSSdisplay（block,none,inline）
DIVCSSdisplay（block,none,inline）DIV CSS display (block none inline)属性的⽤法在⼀般的CSS布局制作时候，我们常常会⽤到display对应值有block、none、inline这三个值。
下⾯我们来分别来认识和学习什么时候⽤什么值。
这⾥通过CSS display知识加实例、图演⽰讲解⽅法来学习和了解DIV CSS display。
⽬录CSS display使⽤display的值有哪些css display blockcss display nonecss display inline1、CSS display使⽤以下为DIV CSS运⽤dispalyCSS代码：.divcss{display:none}Html对应运⽤：<div class="divcss">我是测试内容</div>2、display的值有哪些Css display值与解释参数：block :块对象的默认值。
⽤该值为对象之后添加新⾏。
之前也添加⼀⾏。
none :隐藏对象。
与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline :内联对象的默认值。
⽤该值将从对象中删除⾏。
如果其前后都是inline的则在同⼀⾏compact :分配对象为块对象或基于内容之上的内联对象marker :指定内容在容器对象之前或之后。
要使⽤此参数，对象必须和:after及:before 伪元素⼀起使⽤inline-table :将表格显⽰为⽆前后换⾏的内联对象或内联容器list-item :将块对象指定为列表项⽬。
并可以添加可选项⽬标志run-in :分配对象为块对象或基于内容之上的内联对象table :将对象作为块元素级的表格显⽰table-caption :将对象作为表格标题显⽰table-cell :将对象作为表格单元格显⽰table-column :将对象作为表格列显⽰table-column-group :将对象作为表格列组显⽰table-header-group :将对象作为表格标题组显⽰table-footer-group :将对象作为表格脚注组显⽰table-row :将对象作为表格⾏显⽰table-row-group :将对象作为表格⾏组显⽰3、css display:blockDisplay:block是我们常⽤的，block也是Display默认的值。
详解CSSdisplay：inline-block的应用
详解CSSdisplay：inline-block的应⽤本⽂详细描述了display:inline-block的基础知识，产⽣的问题和解决⽅法以及其常见的应⽤场景，加深了对inline-block应⽤的进⼀步理解。
基础知识display:inline-block是什么呢？相信⼤家对这个属性并不陌⽣，根据名字inline-block我们就可以⼤概猜出它是结合了inline和block两者的特性于⼀⾝，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，⼜保持了inline元素不换⾏的特性。
举例说明：以前我们做横向菜单列表的时候，我们可以通过li和float:left两者来实现，现在可以通过li和display:inline-block。
HTML代码：1<ul>2<li>⾸页</li>3<li>关于</li>4<li>热点</li>5<li>联系我们</li>6</ul>CSS代码1 ul, li { padding: 0; margin: 0; list-style-type: none; }2 li { display: inline-block; border: 1px solid #000; }效果图inline-block基本效果可以看到li元素可以横向排列，并且可以设置width属性，⼤家可以复制代码⾃⼰查看效果或查看inline-block的问题观察上⾯的例⼦，细⼼的同学肯定会发现，每个li之间有⼀个⼩空隙，⽽我们的代码中并没有设置margin等相关属性，这是为什么呢？默认的inline元素⾸先，我们观察⼀下默认的inline元素的表现：HTML代码1<a>⾸页</a>2<a>热点</a>CSS代码1 a { margin: 0; padding: 0; border: 1px solid #000; }效果图inline默认情况默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性⾃然也有这个特点。
css文本两行显示，超出省略号表示
css⽂本两⾏显⽰，超出省略号表⽰重点：text-overflow: ellipsis;只对display：inline；起作⽤1. 例⼦：2. <span class="a">我说说<b class="b">打瞌睡党风建设打⽕机</b>说说⾊⼉</span>1. a{2. display:block/inline-block;1. width:100px;3. overflow: hidden;1. white-space: nowrap;text-overflow: ellipsis;4. }5. b{6. display:inline; //正确7. display：inline-block //错误，b标签⾥的字超出不能显⽰省略号（...）8. }//⼀⾏white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;//两⾏text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;如果实现单⾏⽂本的溢出显⽰省略号同学们应该都知道⽤text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
实现⽅法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只⽀持单⾏⽂本的溢出显⽰省略号，如果我们要实现多⾏⽂本溢出显⽰省略号呢。
如何改变span元素的宽度与高度
如何改变span元素的宽度与⾼度内联元素：也称为⾏内元素，当多个⾏内元素连续排列时，他们会显⽰在⼀⾏⾥⾯。
内联元素的特性：本⾝是⽆法设置宽度和⾼度属性的，但是可以通过CSS样式来控制，达到我们想要的宽度和⾼度。
span举例1：1. span元素属于内联元素，当我们直接设置了宽度和⾼度的时候代码及显⽰的结果如下:...<style type="text/css">span{border:1px solid blue;width:200px;height:200px;}</style>...<span>我是内联元素</span>虽然定义了宽度和⾼度，但是并没有起作⽤。
2. 在样式属性中添加display:block。
<style type="text/css">span{border:1px solid blue;width:200px;height:200px;display:block;}</style>这时候可以看到长度和宽度起作⽤了。
span举例2：1. 定义2个并排的span元素，并定义样式display属性设置为block,分别显⽰如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">span{font-size:12px;text-align: center;line-height:20px;margin-left:5px;border:1px solid red;background-color:red;color:white;width:100px;height:20px;display:block;}</style></head><body><span>放⼤</span><span>缩⼩</span></body></html>当定义display:block的时候，表⽰的span的属性变成⼀个⾏级块元素，所以这时候显⽰在两⾏中。
理解与应用css中的display属性
理解与应用css中的display属性display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：noneblockinlineinline-blockinherit下面，我将按照顺序将上述几种属性做一个完整的讲解。
第一部分：display:nonenone这个值表示此元素将不被显示。
比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！当然display:none的用法绝不是专门用于这里的，它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none;,当鼠标滑过一级菜单时，再显示出来（详见《如何实现导航菜单中的二级下拉菜单》）。
还可以用于登陆模态框的制作等等。
第二部分：display:block使用了display：block;之后，此元素将显示为块级元素，此元素前后会带有换行符。
我们先来回顾以下块级元素是什么，他有什么特点。
既然要区分块级元素和行内元素，就得先说说标准文档流了。
标准文档流：简称标准流，指的是在不使用其他的与排列和定位相关的css规则时，各种元素的排列规则。
于是，我们将“各种元素”分为块级元素和行内元素。
（注：实际上还有空元素，如<br>用于换行，<hr>为一条水平线，这里对空元素不做过多讨论）块级元素特点：总是以一个块的形式表现出来，占领一整行。
若干同级块元素会从上之下依次排列（使用float属性除外）。
可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
块级元素和行内元素以及display中block、inline和inline-block的区别
块级元素和⾏内元素以及display中block、inline和inline-block的区别块元素⼜名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。
块元素和内联元素的基本差异是块元素⼀般都从新⾏开始，相邻的块级元素将会在不同⾏显⽰。
⽽当加⼊了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
⽐如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新⾏开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在⼀⾏上排列。
block元素的特点①总是在新⾏上开始；②⾼度，⾏⾼以及外边距和内边距都可控制；③宽度缺省是它的容器的100%，除⾮设定⼀个宽度。
④它可以容纳内联元素和其他块元素inline元素的特点①和其他元素都在⼀⾏上；②⾼，⾏⾼及外边距和内边距不可改变；③宽度就是它的⽂字或图⽚的宽度，不可改变④内联元素只能容纳⽂本或者其他内联元素常见块元素(block element)◎ address - 地址◎ blockquote - 块引⽤◎ center - 居中对齐块◎ dir - ⽬录列表◎ div - 常⽤块级容器，也是css layout的主要标签◎ dl - 定义列表◎ fieldset - form控制组◎ form - 交互表单◎ h1 - ⼤标题◎ h2 - 副标题◎ h3 - 3级标题◎ h4 - 4级标题◎ h5 - 5级标题◎ h6 - 6级标题◎ hr - ⽔平分隔线◎ isindex - input prompt◎ menu -菜单列表◎ noframes - frames可选内容，（对于不⽀持frame的浏览器显⽰此区块内容）◎ noscript - 可选脚本内容（对于不⽀持script的浏览器显⽰此内容）◎ ol - 排序表单◎ p - 段落◎ pre - 格式化⽂本◎ table - 表格◎ ul - ⾮排序列表（⽆序列表）常见内联元素(inline element)◎ a - 锚点◎ abbr - 缩写◎ acronym - ⾸字◎ b - 粗体(不推荐)◎ bdo - bidi override◎ big - ⼤字体◎ br - 换⾏◎ cite - 引⽤◎ code - 计算机代码(在引⽤源码的时候需要)◎ dfn - 定义字段◎ em - 强调◎ font - 字体设定(不推荐)◎ i - 斜体◎ img - 图⽚◎ input - 输⼊框◎ kbd - 定义键盘⽂本◎ label - 表格标签◎ q - 短引⽤◎ s - 中划线(不推荐)◎ samp - 定义范例计算机代码◎ select - 项⽬选择◎ small - ⼩字体⽂本◎ span - 常⽤内联容器，定义⽂本内区块◎strike - 中划线◎ strong - 粗体强调◎ sub - 下标◎ sup - 上标◎ textarea - 多⾏⽂本输⼊框◎ tt - 电传⽂本◎ u - 下划线◎ var - 定义变量可变元素可变元素由上下⽂语境来决定是块元素还是内联元素。
CSS导航菜单水平居中的多种方法
CSS导航菜单⽔平居中的多种⽅法CSS导航菜单⽔平居中的多种⽅法在⽹页设计中，⽔平导航菜单使⽤是⼗分⼴泛的，在CSS样式中，我们⼀般会⽤Float元素或是「display:inline-block」来解决。
⽽今天主要讲解如何让未知宽度的元素居中，下⾯我们会列出⼏种⽅法来解决⽔平居中问题。
当然这些⽅法不⼀定是⽤来解决导航菜单问题，还有其它类似情况也是可以使⽤的。
CSS导航菜单⽔平居中的多种⽅法：⽅法1：display:inline-block⽅法2：position:relative⽅法3：display:table⽅法4：display:inline-flex⽅法5：width:fit-content / width:intrinsic⽅法1：display:inline-block这个⽅法⽐较简单，是将容器转成「display:inline-block」⾏内块级元素，然后就可以直接⽤「text-align:center」使其达到⽔平居中效果。
HTML代码：这⾥我们需要⼀个div来包围这个导航菜单。
<div class="navbar"><ul><li><a href="/">⾸页</a></li>…</ul></div>CSS代码：给外⾯的div添加「text-align:center」，然后将菜单容器设成「display:inline-block」⾏内块级元素，菜单浮左「float:left」.navbar {text-align:center;}.navbar ul {display:inline-block;}.navbar li {float:left;}.navbar li + li {margin-left:20px;}这⾥浏览器兼容只能是IE8或更⾼版本，所以如果要兼容IE7的话，请加⼊以下代码.navbar ul {display:inline;zoom:1;}⽅法2：position:relative这是使⽤「position:relative」定位⽅法来让元素⽔平居中，我不是很推荐这⽅法，因为代码多了个div去包住，当然这些是根据情况来使⽤的。
【基础】CSS居中的15种方式
【基础】CSS居中的15种⽅式简⾔CSS居中是前端⼯程师经常要⾯对的问题，也是基本技能之⼀。
今天有时间把CSS居中的⽅案汇编整理了⼀下，⽬前包括⽔平居中，垂直居中及⽔平垂直居中⽅案共15种。
如有漏掉的，还会陆续的补充进来，算做是⼀个备忘录吧。
1 ⽔平居中1.1 内联元素⽔平居中利⽤text-align: center可以实现在块级元素内部的内联元素⽔平居中。
此⽅法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素⽔平居中都有效。
** 核⼼代码：**.center-text {text-align: center;}** 演⽰程序：**1.2 块级元素⽔平居中通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素⽔平居中。
** 核⼼代码：**.center-block {margin: 0 auto;}** 演⽰程序：**1.3 多块级元素⽔平居中1.3.1 利⽤inline-block如果⼀⾏中有两个或两个以上的块级元素，通过设置块级元素的显⽰类型为inline-block和⽗容器的text-align属性从⽽使多块级元素⽔平居中。
** 核⼼代码：**.container {text-align: center;}.inline-block {display: inline-block;}** 演⽰程序：**1.3.2 利⽤display: flex利⽤弹性布局(flex)，实现⽔平居中，其中justify-content⽤于设置弹性盒⼦元素在主轴（横轴）⽅向上的对齐⽅式，本例中设置⼦元素⽔平居中显⽰。
** 核⼼代码：**.flex-center {display: flex;justify-content: center;}** 演⽰程序：**2 垂直居中2.1 单⾏内联(inline-)元素垂直居中通过设置内联元素的⾼度(height)和⾏⾼(line-height)相等，从⽽使元素垂直居中。
css顶部对齐方式
css顶部对齐方式
CSS顶部对齐方式
在网页设计中，对齐方式是非常重要的一部分。
其中，顶部对齐方式是最常用的一种。
通过使用CSS，我们可以轻松地实现顶部对齐方式，使网页看起来更加整洁和美观。
我们需要了解一些基本的CSS属性。
其中，display属性用于设置元素的显示方式，可以设置为block、inline、inline-block等。
而vertical-align属性用于设置元素的垂直对齐方式，可以设置为top、middle、bottom等。
接下来，我们可以使用display和vertical-align属性来实现顶部对齐方式。
例如，我们可以将多个元素设置为display:inline-block，并将它们的vertical-align属性设置为top，这样它们就会在同一行上，并且顶部对齐。
我们还可以使用flexbox布局来实现更加灵活的顶部对齐方式。
通过设置容器的display属性为flex，并将其align-items属性设置为flex-start，容器中的元素就会在顶部对齐。
通过使用CSS顶部对齐方式，我们可以轻松地实现网页的美观和整洁。
无论是在设计响应式网页还是在排版文章时，顶部对齐方式都是非常有用的一种技巧。
vue 项目中列表排列方式
vue 项目中列表排列方式在Vue项目中，可以使用CSS样式来控制列表的排列方式。
以下是一些常用的CSS样式属性，可以帮助你实现不同的列表排列方式：1. 水平排列：使用CSS的`display: inline-block`或`float: left`样式属性，可以让列表项水平排列。
```html<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>``````cssul {list-style-type: none;}li {display: inline-block;margin-right: 10px;}```2. 垂直排列：使用CSS的`display: block`样式属性，可以让列表项垂直排列。
```html<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>```ul {list-style-type: none;}li {display: block;}```3. 网格排列：使用CSS的`display: grid`或`display: flex`样式属性，可以让列表项以网格或弹性布局的方式排列。
```html<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>``````cssul {list-style-type: none;display: grid;grid-template-columns: 1fr 1fr 1fr; /* 根据需要设置列数 */}```这些是一些常见的CSS样式属性，可以帮助你在Vue项目中控制列表的排列方式。
css中after的用法、 -回复
css中after的用法、-回复CSS中的:after伪元素是一种强大的工具，可以在元素的内容之后插入新的内容。
它允许开发人员在不改变HTML结构的情况下添加额外的样式和装饰，从而增强用户界面的吸引力和互动性。
在这篇文章中，我们将一步一步地回答有关CSS中的:after伪元素的用法和实例。
第一步：了解基本语法在使用:after伪元素之前，我们需要了解其基本语法。
它的语法如下：selector:after {content: "";/*其他样式属性*/}在上述例子中，selector是你要添加:after伪元素的元素选择器。
例如，如果你想在所有段落元素的内容后面添加新的内容，则可以使用p:after。
content属性定义要插入的内容。
它可以是文本值，也可以是图像，甚至是空字符串。
在前面的例子中，我们使用了一个空字符串，表示在内容后面插入一个空的元素。
第二步：添加文本内容首先，让我们看一个简单的例子，演示如何在:after伪元素中添加文本内容。
假设我们有一个标题元素，我们想在其内容后面添加一条水平线。
HTML代码：<h1>Hello, World!</h1>CSS代码：h1:after {content: " ";border-top: 1px solid black;}在上述例子中，我们使用:after伪元素在标题元素的内容后面插入了一个空字符。
然后，我们添加了一个上边框样式来创建一条水平线。
第三步：插入图像不仅可以插入文本内容，还可以在:after伪元素中添加图像。
让我们看一个例子，演示如何在一个按钮上添加一个箭头图标。
HTML代码：<button>Click me</button>CSS代码：button:after {content: url(arrow.png);display: inline-block;/*其他样式属性*/}在上述例子中，我们使用:after伪元素插入了一个箭头图标。
css中转换为行内样式的解决方案（css-inline）
css中转换为⾏内样式的解决⽅案（css-inline）聊聊场景发送邮件在第三⽅⽹站中嵌⼊HTML从其他编辑器拷贝编辑好的⽂章发布到微信、今⽇头条等⾃媒体在以上场景使⽤⾏内样式的兼容性要⾼很多，也可以保持原样式不变解决⽅案juiceinline-css这两种⽅案功能和Api⾮常相似,这⾥就以juice为例安装npm i juice --save使⽤import juice from 'juice'const html = `<div class="test"><h1>测试Juice</h1></div><style>div{width: 90%;height: 500px;}</style>const result = juice(html)console.log(result)结果<div style="width: 90%; height: 500px;"><h1>测试Juice</h1></div>ps：下⾯看下CSS - ⾏内块元素（inline-block）、标签显⽰模式转换 display⾏内块元素（inline-block）在⾏内元素中有⼏个特殊的标签——<img />、<input />、<td>，可以对它们设置宽⾼和对齐属性，有些资料可能会称它们为⾏内块元素。
⾏内块元素的特点：（1）和相邻⾏内元素（⾏内块）在⼀⾏上,但是之间会有空⽩缝隙。
（2）默认宽度就是它本⾝内容的宽度。
（3）⾼度，⾏⾼、外边距以及内边距都可以控制。
标签显⽰模式转换 display块转⾏内：display:inline;⾏内转块：display:block;块、⾏内元素转换为⾏内块：display: inline-block;总结到此这篇关于css中转换为⾏内样式的解决⽅案(css-inline)的⽂章就介绍到这了,更多相关css⾏内样式内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
[CSS]详解display:inline | block |inline-block的区别
display:inline就是将元素显示为块级元素.
block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和<li>是块元素的例子。
display:inline就是将元素显示为行内元素.
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内，允许空格。
inline-block的元素特点：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内，允许空格。
(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。
这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
IE下块元素如何实现display:inline-block的效果？
有两种方法：
1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。
代码如下（...为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。
代码如下：
div {display:inline; zoom:1;...}
以下用个例子来说明三者的区别和用法:
<style>div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}.b{display:block;}.i{display:inline;}div.ib{display:inline-block;}div.ib{ display:inline;}a.ib{display:inline-block;}a.ib{display:block;}span.v{padding:0;margin:0;border:0;vertical-align: middle;height:100%}</style><div>div display:block</div><div class="i">div display:inline</div><div class="ib">div display:inline-block</div><span>span display:inline</span><span class="b">span display:block</span><span><a class="ib">a display:block</a></span><br /><div><span class="v"></span>vertical-align:middle</div>。