2018.10.22塌陷,绝对,固定,相对定位

高度塌陷

BFC块的格式化环境
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素

开启BFC
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为 inline-block
4.将元素的overflow 设置为一个非visible的值 设置为hidden

haslayout ie6的隐藏属性
zoom:1; 只在ie中支持 zoom表示放大的意思

去掉项目符号
list-style:none;

文字居中
text-align:center

去掉文字下划线
text-decoration:none;

鼠标移入时的效果
hover:

清除浮动
clear:left 清除左侧
clear:right 清除右侧
clear:both; 清除两侧,其实是清除影响最大的浮动
清除浮动可以解决高度塌陷

伪元素表示特殊的位置
伪类表示特殊的状态

解决高度塌陷的三种方式
1,将元素的overflow: hidden; zoom:1;
2, 插一个空白的标签,然后给它清除浮动
3, 使用伪元素after,模拟插入一个空白的块,display设置成块,然后清除浮动
在ie6里加一个 clearfix{zoom:1}

相对定位
开启了相对定位后,如果不设置偏移量,那么位置不动
position:static left,right,top,bottom,z-index 不起作用
相对定位就是相对于这个元素在文档流中原来的位置发生改变
相对定位不会脱离文档流
相对定位会使元素提升一级
相对定位不会改变元素的性质
position:relative;
left:200px;

绝对定位
脱离文档流
绝对定位,也是相对于离他最近的,开启了定位的祖先元素进行定位的
我们要是开启元素的绝对定位,一般情况下都会开启父元素的相对定位
绝对元素也会提示层级
绝对定位可以改变元素的性质
position:absolute

固定定位
脱离文档流
固定定位也是一种特殊的绝对定固定定位永远相对于浏览器窗口进行定位
固定定位它会固定在我们浏览器的某一个位置,不会随着滚动条的变化而变化
position:fixed;

元素的层级
z-index:
对于没有开启position定位的不能用z-index;

父元素设置的层级再高,也不会盖住子元素
opacity 设置透明度 0~1之间
filter: ie8以下 0~100之间
filter:alpha(opacity=50); ie8以下的用法

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1 92
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 965评论 0 2
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,342评论 2 66
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,712评论 1 45
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 901评论 0 4