IT虾米网

css问题详解

admin 2018年05月27日 编程语言 580 0

一、浮动

    1.浮动特点:脱离文档流,向左/向右浮动直到遇到父元素或者别的浮动元素,浮动会导致父元素高度坍塌。

    2.清除浮动:clear和bfc

/* clearfix方案(clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间) */ 
.clearfix:after{ 
    content: '';display: block;clear: both; 
} 
 
/* overflow不为none会触发bfc,具有bfc特性的元素的子元素不会受外部元素影响,也不会影响外部元素 */ 
.box{ 
    overflow:hidden; 
}

二、Flex布局

    1,意为弹性布局,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

    2,容器的属性(其中ios9以下需要添加-webkit-前缀):

        flex-direction:row | row-reverse | column | column-reverse;主轴方向;
        flex-wrap:nowrap | wrap | wrap-reverse;如果一条轴线排不下,如何换行;
        flex-flow:<flex-direction> || <flex-wrap>;
        justify-content:flex-start | flex-end | center | space-between | space-around;主轴上的对齐方式;
        align-items:flex-start | flex-end | center | baseline | stretch;交叉轴上如何对齐;
        align-content:flex-start | flex-end | center | space-between | space-around | stretch;多根轴线对齐方式;

    3,项目的属性:

    order:排列顺序;
    flex-grow:放大比例,默认为0;
    flex-shrink:缩小比例,默认为1;
    flex-basis:项目占得主轴空间;默认auto;
    flex:默认为0 1 auto;
    align-self:允许单个项目有与其他项目不一样的对齐方式,默认为auto;

    4,布局种类:

        1,骰子布局
        2,网格布局
        3,圣杯布局
        4,输入框布局
        5,悬挂式布局
        6,固定底栏
        7,流式布局

三、box-sizing(盒子模型):

       content-box(默认,边框在已设定的宽高外绘制)
       border-box(边框在已设定的宽高内绘制)

四、background-clip(背景的绘制区域):

       border-box(默认,背景用于边框)
       padding-box(背景用于内边框)
       content-box(背景只用于内容)

五、border-radius:

       百分比是基于元素本身,大于50%,最后的效果都会等同于50%,这是因为如果两个相邻角的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算保证它们不会重合。

六、判断进入区域:

       原生方法:document.getElementById('target').offsetTop 
- document.documentElement.scrollTop 
< document.documentElement.clientHeight
       jQuery:$('#target').offset().top - $(window).scrollTop() < $(window).height()

七、判断滚到底部

       document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight

八、pointer-events:auto | none;

       为none时可以穿透上层,去触发下层操作,使用场景为上层为动画效果,下层为实际需要触发的事件操作

九、水平垂直居中:

/* 方案1 */ 
.box{ 
  position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); 
}

/* 方案2 */ 
.parent{ 
  display: flex;height: 100vh; 
} .child{ 
  margin: auto; 
}

/* 方案3 */ 
.parent{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

十. 高度根据宽度等比显示

/* 方案1 */ 
.element{
    width: 50vw;height: 50vw;border: 1px solid #000
} 
/* 方案2 padding%是基于父元素的宽度的百分比的内边距*/ 
.father{
    width:100%;height:100%;background:#ccc
} 
.child{
    width:50%;height:0;padding-bottom:50%;background:#eee;
}
十一. position: sticky

          粘性定位,该定位基于用户滚动的位置;它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

十二. 根据不同设备像素比显示不同图片

         <img src='128px.jpg' srcset='128px.jpg 1x, width-256px.jpg 2x'>

         当视区宽度不大于360像素时候,图片的宽度限制为340像素;其他情况下,使用128像素:

         <img src='128px.jpg' srcset='128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w' sizes='(max-width: 360px) 340px, 128px'> 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

前端性能优化整理详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。