css总结

1 浮动

• float 取值
  • none 不浮动
  • left 左浮动
  • right 右浮动
• 特性
  • 找最近的浮动元素进行贴边
  • 一行放不下自动换行显示
  • 右浮动是颠倒顺序
  • 浮动之后，元素属性变为行内块元素
  • 浮动元素会压着下一个为浮动元素
• 清除浮动
  • 防止出现父元素高度塌陷
  • 在最后加空标签，设置样式clear:both;
  • 在父元素添加伪元素，设置样式clear:both;清除浮动;（常用）
  • 父元素设置固定高度，清除浮动
  • 父元素设置overflow:hidden;样式，清除浮动（较为安全）
• 注意事项
  • 同一个父级下的子元素，如果设置浮动，就全部设置
  • 谁做浮动，就找谁的父级清除浮动，一层一层往上找，直到没有浮动
  • 父元素有绝对定位，固定定位不需要清除浮动

2 定位

• position 取值
  • static 默认
  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位
  • sticky 粘性定位
• relative 相对定位
  • 相对自身进行定位
  • 定位之后，自身的位置没有删除
  • 作为绝对定位元素的定位容器
• absolute 绝对定位
  • 相对上一个有定位属性的父元素进行定位
  • 定位之后，自身的位置已经删除
  • 定位元素会与其他元素（普通元素、浮动元素、相对定位元素、绝对定位元素）进行重叠
• fixed 固定定位
  • 固定在界面的固定位值
  • 不跟随页面的滚动进行滚动
• sticky 定位
  • top,left,bottom,right 其中一个值必须设置才能生效
• z-index 层级
  • 可以取正值，亦可以取负值
  • 如果未设置，根据html中的顺序，谁靠后，谁在最上面
  • 层级为 0，也比普通元素和浮动元素高
  • 层级为负数，比普通元素和浮动元素低
  • 层级不取小数
  • 层级一样，后面的盒子比前面的层级高
  • 普通元素或浮动元素，后面的比前面的层级高
  • 层级的高低，是和占不占位置没有关系的
• 绝对定位和相对定位
  • 绝对定位就是把元素放到不同的楼层，z-index决定了他在第几层
  • 相对定位与普通元素在同一层
  • 绝对定位本身位置会被删除，相对定位本身位置不会删除
  • 通过z-index设置层级

  • 为什么需要reset

  • ● 默认样式非常影响我们的页面属性 ● 需要去除掉默认样式

  • reset样式表构成

    ● 清除页面中标签的内外边距

    html,body,div,h1,h2,h3,h4,h5,h6,p,table,tr,td,th,ul,li,ol,dl,dt,dd,a,input,img,span,b,i{margin:0px;padding:0px;}

    ● 恢复页面的高度

    html,body{height: 100%;}

    ● 去除默认H标签的样式

    h1,h2,h3,h4,h5,h6{font-weight: normal;}

    ● 去除辅助标签em和i的默认样式

    em,i{font-style: normal;}

    ● 去除掉img的默认外边距和边框

    img{display:block;border:none;}

    ● 定义页面中的字体样式

    body{font-family:arial,"微软雅黑",serif;font-size: 12px;color:#5a5a5a;}

    ● 去除ul中默认样式

    ul{list-style: none;}

    ● 去除a标签中的默认样式

    a{color: #000;text-decoration: none;}

    ● 清除浮动

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

    ● 定义右外边距为0

    .mgr_0{margin-right: 0px;}

    ● 定义安全宽度

    .w1100{width: 1100px;}

    ● 左浮动简写

    .fl{float: left;}

    ● 右浮动简写

    .fr{float: right;}

  • 光标属性

  •