web-css-文本

一、文本的水平对齐方式

使用text-align来设置文本的对齐方式；text-align的取值:left(向左对齐)/center(水平居中对齐)/right(向右对齐)/justify(两端对齐);

text-align只对应用此样式的元素的非块级子元素有效，对块级子元素无效；对比使用margin进行设置居中对齐，不同点是margin的作用效果对象是当前块级元素，而并非子元素；

ps:line-height(行高),如果行高的设置值大于font-size(字体大小)的设置值，则一行中的文字将在该行的设置的行高区域中垂直居中显示，这个是作用到应用了该样式的元素的区域里的每一行；

二、定位

1.普通流定位，这也是浏览器默认的文档流定位；

2.浮动定位；

3.相对定位:relative(相对于该元素原始位置产生的偏移距离，不会脱离文档流)；

4.绝对定位:absolute(会脱离文档流，相对于离自己最近的以定位的祖先级元素发生位置偏移,ps:只要一个元素的样式被relative/absolute/fixed这三者的任何一个所修饰，那么该元素就成了已定位元素)；

5.固定位:fixed(会脱离文档流)；

(1)普通流定位：每个元素都有自己的占地空间，每个元素都是从其父元素的左上角位置开始显示的；

(2)浮动定位float:left/right/none;

left:元素脱离文档流，在当前行的位置，停靠在父元素的左侧或者挨着当前行中之前已经浮动的元素；

right:元素脱离文档流，在当前行的位置，停靠在父元素的右侧或者挨着当前行中之前已经浮动的元素；

none:默认值，不浮动;

发生浮动现象时的特点:

*****默认自动补位到当前行的最后一行;

*****元素一旦发生浮动，该元素则脱离文档流(即该元素不占文档流的空间，浮动之前的该元素的后面的元素会自动向该元素方向补位，补位的实质原因还是因为前面的元素脱离了文档流)

*****发生浮动的元素会自动变成块级元素(变成块级元素的实质原因实际上是该元素脱离了文档流)；

*****没有发生浮动的文本，行内元素，行内块元素，不会被压在已浮动元素的下面，而是自己环绕着已浮动元素的周围；

清除浮动带来的影响:clear:left(清除左浮动带来的向前补位的影响)/right(清除右浮动带来的向前补位的影响)/both(同时清除右浮动和左浮动带来的向前补位的影响)/none；这里并不是说clear是清除了浮动，而是清除当前元素因为前一个元素脱离文档流而导致自己向前补位的这一个影响；

高度坍塌:当块级元素没有设置高度的时候，则此时该块级元素的高度是由该块级元素里面的元素内容撑起来的，但是因为该块级元素内部的元素都已经发生浮动了，意味着里面的子元素都已经脱离文档流，那么作为父级的块元素就认为自己内部已经没有子元素的，此时原本是由子元素的内容撑起来的高度因为子元素发生浮动脱离文档流的影响而导致块级父元素的高度直接变为0；由此就发生了高度坍塌现象；

解决：在父级块级元素的内容末尾添加一个空的div块级元素，同时设置该块级元素的css样式为清除受浮动影响的效果，这样一来，该div块级元素就不会因为它之前的元素发生浮动而导致自己会自动向前补位了，这样就保证了父级块级元素的高度依旧是之前由内容撑起来的高度，也就不会产生高度坍塌现象了；

这里可以利用css样式来添加空的div块级元素，代码如下：

.list::after{

display:block;/以块级元素的方式显示/

content:"";/该元素里的内容为空，没有内容/

clear:both;/清除该元素受浮动效果的影响/

}

堆叠顺序：只有已定位元素能设置z-index(元素的叠放顺序)；z-index设置的值越高的那个已定位元素，则那个元素显示叠放在最顶层，父子级关系产生的堆叠现象设置z-index无效；