阅读需要5分钟，看到各种知识点需要在大脑里想出网页画面。
一般的html元素都是这样的：在一行中从左往右一个一个元素挨着排列，这是行内元素；有的元素独占一行，从上往下一行一行的排列，这是块级元素；有的元素虽然从左往右排队，但是他却可以设置行高(行高是块级元素才有的)属性，因此又叫块级行内元素。
块级元素因为从上往下排列，那么怎么样才能使块级元素从左往右排列呢？下面将揭晓答案。
目录
3，display属性值之inline，inline-block
一，css属性display
display是展示的意思。他是css属性，可以为任意的html元素添加这个属性。他的作用是：改变元素类型。比如：将块级元素变为行内元素，从而能够从左往右排列。
1，display属性值之none
当设置display属性的值为none，相当于这个元素被删除，你的代码写了也是白写。
2，display属性值之block
任意元素在网页上都将显示为块级元素，即都是按一行一行的从上往下排。
<a href="#" style="display: block;height: 100px;background-color: aqua;">666</a>3，display属性值之inline，inline-block
任意元素在网页上都将显示为行内元素，块级行内元素。
4，隐藏元素的4种方式
二，文档流
文档流指的是：网页中，各个可显示元素所占的位置。学习文档流的目的是：解决各个元素显示时，彼此排列时的细节，例如：你与陌生人排队肯定是隔得老远的，但是与女朋友排队几乎就是0cm的距离了。下面就将说明这些细节问题，只不过是html元素之间的距离。
1，细节一：高矮不齐，底边对齐
顾名思义，一行之内所有元素的脚都在同一块地面上。
2，细节二：空白折叠现象1
主要问题就是：多个空格(space，tab等)他都当做一个空格，除非使用实体字符： 。
3，细节三：空白折叠现象2
主要问题就是：有的时候我们不需要空格，也就是莫名其妙多出空格的问题。这个问题的产生原因就是：我们使用换行来使代码格式更好看，由于换行会自动产生空格，所以要避免换行产生的空格时需要注意。
4，如何避免文档流产生的问题
不使用文档流即可。即在会发生文档流问题的地方使用其他方法代替。有三个方法：浮动，绝对定位，固定定位。
三，浮动
浮动，即float，他是css属性，他的取值有两个，left和right，他的作用是：将竖直排列变为水平排列。它具有智能性，即：属性值相同时，比如都是left，他会自动从左往右排列。
浮动的意思是：一层一层的显示，相当于p图，在原来图片上加上一些贴纸啥的。也类似于手机上的悬浮框，显示在其他页面之上，从而遮住底层页面的一些内容。浮动的元素在一个透明的容器里，这个透明的容器与网页大小相同。
总结就是：浮动就是将浮动元素放在一个透明网页上，然后再将这个透明网页放在原来的网页之上，即脱离文档流。
四，消除浮动
虽然浮动能解决文档流带来的问题，但是也会产生新的问题，属于利大于弊。浮动带来的影响有：造成父元素的高度塌陷，进而影响到父元素的后续元素(后续元素被遮住)。
原因是：脱离文档流之后，子元素不存在于父元素里面了，导致父元素没有内容，行高撑不起来。解决方法如下：
1，程序员根据布局主动设置父元素高度与浮动元素的高度相适应
假如浮动元素的高度为100px，那么设置父元素的高度为120px。
2，给受影响的元素添加clear属性
通常是后续被遮住元素需要解决的问题。具有智能性：会根据浮动元素的的布局自动找位置。通常使用：clear:both。属性left和right不常用。
3，overflow清除浮动
当父元素没有行高，后续元素又被遮住了，双重打击时，使用overflow属性。使用overflow属性时，父元素不能设置高度height属性，然后为父级元素添加属性overflow:hidden;clear:both。
4，伪对象方式。
在父元素后面添加一个伪块级元素让其独占一行，让父元素的行高不得不撑开。
.container{
border: 5px solid red;
}
.container::after{
content: "";
display: block;
clear: both;
}
//添加的伪元素的类型是：行内元素，所以要将其变为块级，内容设置为无，从而实现一种透明的效果
5，总结
五，定位
定位，position。属于css属性而不是html元素属性。通过position属性来确定元素(矩形方块)在网页上的位置。position属性具有三个值。
声明position属性后，说明该元素可以进行定位了。定位需要四个参数：left，top，right，bottom。绝对定位和固定定位是浮动的。
1，position：relative
相对定位。相对的是具有定位属性的父级元素，如果父级元素没有，则再往上找，直到html标签。left：相对于矩形左边增加距离，right：相对于矩形右边增加多少距离。
网页显示如下：这是相对于html标签进行定位。
2，position：absolute
left：距离左侧多少距离，而不是增加。相对的是具有定位属性的父级元素，如果父级元素没有，则再往上找，直到html标签。
3，position：fixed
位置不变。即不随浏览器上下滑动而改变。相对于浏览器显示框的位置进行定位。
六，Z-index属性
用来说明定位浮动元素的堆叠顺序。类似于图层顺序，谁在第一层显示，谁在第二层显示。
扫一扫
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
