12.15笔记

display属性和实例

元素的显示和隐藏

• 使用display:none将元素隐藏起来，此时元素不占用页面空间。
• 使用visibility:hidden也可以隐藏元素，此时元素占用空间。

通过display改变内联元素或块级元素

(1)display:block就是将元素显示为块级元素.

(2)display:inline就是将元素显示为行内元素.

在CSS代码中加入li{display: inline-block;} 就可以将li元素变为行内区块显示。

什么是浮动

我们可以用一句话描述浮动的元素的特点：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

div{float：left/right};

清除浮动<div style="clear:both;"></div>

清除浮动的最佳实践

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

fixed固定定位

• 脱离标准流，在页面中不占位置 。
• 不管页面有多大，永远相对于浏览器的边框来定位 。

position: fixed;

relative 相对定位

• 不脱离标准流，在页面中占位置 。
• 相对于自己原来的位置来进行定位 。

absolute绝对定位

• 脱离标准流，在页面中不占位置（浮起来）。
• 如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。

定位元素的重叠

• z-index属性控制定位元素的重叠顺序，属性值是z轴上的值。
• z-index只能在绝对定位和固定定位元素上奏效（position:absolute）。
• z-index的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越近，所以若两个定位元素，z-index值越大的将会覆盖值越小的定位元素。
  默认值是0，可以是正负数。

居中和对齐

margin:0 auto;设置左右外边距的大小，控制元素的水平居中。

position属性设置元素的左右对齐

	<style>
		.right{
			position: absolute;
			right: 0;
			width: 300px;
			border: 3px solid pink;
			padding: 10px;
			z-index: 0;

float属性设置左右对齐

<sty>
		.right1{
			float: right;
			width: 300px;
			border: 3px solid purple;
			padding: 10px;
		}

padding属性设置水平垂直居中

	<style>
           .padCenter{
                padding: 70px 0;
                border: 3px dotted yellow;
                text-align: center;
            }

line-height属性设置水平垂直居中

<style>
       .lineCenter{
			line-height:300px;
			border: 3px solid #33ff33 ; 
		}
	</style>

绝对定位和transform属性设置水平垂直居中

	<style>
       .poCenter{
			border: 3px solid #ff88c2;
			height: 200px;
			position: relative;
		}
		.poCenter p{
			position: absolute;
			top: 50%;
			left: 50%;
			/*对水平垂直居中进行修正*/
			transform:translate(-50%,-50%);
		}