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%);}