css项目中常用知识总结

MASAILA 发布于2019-08-30 15:52 / 1571人阅读

摘要：一布局水平垂直居中方法兼容性最好的方法方法属性方法才支持用查看属性的兼容性和应用实例设置父容器为弹性盒子定义父容器的弹性项目以主轴排列定义弹性项目在主轴的排列方式主要用于水平居中文字定义弹性项目在侧轴的排列方式主要用于垂直居中

一、div+css布局

1.css水平垂直居中

方法1:兼容性最好的方法

.box{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: #eee;
    }

方法2: css3 transform属性

.box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: #eee;
    }

方法3: flex ie11才支持用mdn查看属性的兼容性和应用实例
https://developer.mozilla.org...

display: flex; 设置父容器为弹性盒子 flex-direction: row; 定义父容器的弹性项目以主轴排列
justify-content: center; 定义弹性项目在主轴X的排列方式,主要用于水平居中文字 align-items:
center; 定义弹性项目在侧轴Y的排列方式,主要用于垂直居中多行文字

.box-wrapper{
        width: 1000px; /*需要给父容器设置宽高*/
        height: 1000px;
        background-color: #e9e9e9;
        display: flex; /*设置父容器为弹性盒子*/
        justify-content: center; /*定义弹性项目在主轴X的排列方式,主要用于水平居中文字*/
        align-items: center; /*定义弹性项目在侧轴Y的排列方式,主要用于垂直居中多行文字*/
    }
    
.box{
        width: 200px; /*弹性盒子的项目*/
        height: 200px;
        background-color: #eee;
    }

二、移动端布局 1.1px像素的问题

@mixin border-1px($color) {
 position: relative;
 &:after {
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid $color;
  content: " ";
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
  &:after {
   -webkit-transform: scaleY(.7);
   transform: scaleY(.7);
  }
 }
 @media only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (min-device-pixel-ratio: 2) {
  &:after {
   -webkit-transform: scaleY(.5);
   transform: scaleY(.5);
  }
 }
}

$color1: #ccc;

.border-1px {
 @include border-1px($color1)
}

GPU云服务器云服务器位段知识总结 linux数据结构知识点总结外呼项目总结云服务器搬迁项目总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116462.html

个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
前端面试知识点目录整理

摘要：写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

xzavier 2019-08-23 16:14 评论0 收藏0
前端面试知识点目录整理

摘要：写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

enda 2019-08-02 16:08 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0