学习02-css（浮动，清除浮动，书写顺序，定位，显示与隐藏，用户界面样式）

浮动：

float: none; //没有浮动
float: left; //左浮动
float: right; //右浮动

清除浮动：

1.额外标签，在最后一个浮动元素上天剑一个标签clear：both；

clear:both;

2.父集添加overflow属性

overflow:hidden;

3.使用after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block; 
        height: 0;
        clear:both;
        visibility: hidden;
    }   
.clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/    
}

4.使用双伪元素before和after双伪元素清除浮动

.clearfix:before,
.clearfix:after {
                content: "";
                display: table;
            }
.clearfix:after {
              clear: both;
            }
.clearfix {
             *zoom: 1;
            }

css的书写顺序：

1.布局定位属性：display/position/float/clear/visibility/overflow（display第一个写）
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoraton/text-align/verticl-align/white-space/break-word
4.其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background：linear-gradent

css定位：

静态定位

position:static;

相对定位

position:relative;

绝对定位

position:absolute;

盒子居中
①left ： 50%；让盒子的左侧移动到父级元素的水平中心位置
②margin-left：-盒子自身的大小； 让盒子向左移动自身宽度的一半

固定定位

position:fixed;

堆叠顺序

z-index  //属性值正整数，负整数，0，没有单位

显示与隐藏

display

display:none; //隐藏元素位置不保留
display:block; //除了转换为块级元素之外，同时还有显示元素的意思

visibility

visibility:visible; //对象可视
visibility:hidden; //对象隐藏位置保留

overflow

overflow:visible; //不剪切内容也不添加滚动条
overflow:hidden; //不显示超过对象尺寸的内容，超过的部分隐藏掉
overflow:scroll; //不管超过内容否，总是显示滚动条
overflow:auto; //超过自动显示滚动条，不超出不显示滚动条

用户界面样式：

鼠标样式

cursor="crosshair";

值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止
crosshair	十字线

轮廓线

outline：0;或者outline:none;

方拖拽文本

resize:none; //防止用户拖拽

来源：oschina

链接：https://my.oschina.net/u/4454049/blog/3175990

标签

Text Shadow

whitespace

Shadow