自己在工作中使用最多的布局 : flex 布局
CSS3 新出的布局方式,可能对ie兼容性有点不好,要求有兼容的话就写float或者使用插件来进行布局吧。 我工作中使用的弹性盒子还是比较多的, 但是有后台管理系统,有的时候根本就不需要自己布局,记录一下自己使用过的一些css属性。
弹性盒子 display: flex
在弹性盒子最多使用的是居中, 这也是老生常谈的问题
横向居中
justify-content: center
纵向居中
align-items: center
如果我们要使布局分为左中右 三份,而左右靠边 中间居中就使用
justify-content: space-between
两边距离一样 中间的距离一样使用
justify-content:space-around;
** 靠右**
justify-content: flex-end ;
** 靠左 正好是与它相反**
justify-content: flex-start ;
**改变轴的方向 当我们知道一个盒子 高度为 100px 然后我们怎么知道剩下的盒子为自适应那? **
我们可以改变轴的方向 让这个盒子占 100px , 然后剩下的 flex:1; 这只是一个小思路。
flex-direction : row 默认为 row 如果我们不设置的话就是从左往右
flex-direction : column 这样设置就是从上到下
换行 当我们按照它自身的大小 换行的时候 我们就使用 **
flex-wrap : nowrap 它默认为不换行,会不断的挤压我们一行的空间
flex-wrap : wrap 它到点就会换成下一行
** 子元素 最多使用的就是 flex : 1 **
** 其实里面还有许多的属性 我都没有写 感兴趣的可以看看 菜鸟教程里面的属性 一定会大有收获,但是也得练习熟能生巧
链接: https://www.runoob.com/css3/css3-flexbox.html.
工作有时候会碰见设置边框padding 之类的事情,还是比较繁琐,有时候1px的距离也得调一下,使用css3 的 box-sizing; border-box ; 怪异盒模型 你会发现无比的好用。
有时候ui 给的设计图字体为9px ? 我就很奇怪 浏览器最小的字体不是 12px吗 ? 那9px 是怎么出来的 我当时思来想去不知道怎么去 设置 ,然后去网上看看 用css3 属性 scale 把字体缩放到一定的比例。
当我们也许不知道当前的盒子有多大,但是我们还想给它设置一个高那怎么办那? 我们这里使用 vh vw 是对于浏览器的视口来决定的 然后 我们再设置里面的属性, 然后也可以 使用 calc(100vh - 100px) 可以计算盒子的高度。
css 多行文本溢出隐藏
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;