css3

有很多的用法

rotatex

rotatey

rotate/rotatez

--

translate() -- 不管是不是绝对定位都可以运用这个属性 且不占空间 和想象的不一样

--

skew和rotateZ的区别就是

skew是文字本身内容本身变成平成平行四边形

rotate就是整个容器沿着z轴转动
--
http://www.baidu.com/s?wd=css3%20transform&pn=10&oq=css3%20transform&tn=baiduhome_pg&ie=utf-8&rsv_idx=2&rsv_pq=862ec7a60002bd64&rsv_t=8e195VxzJQ2Rf07K7ErLku3ABQtHNPsG4C5HdmwUy0TL5KdAwJYZGeic0S3GRSoKrxTp&rsv_spt=1&issp=1&f=8&rsv_bp=0

 

===================================================

flex-grow 是用于子元素的宽度的约束,
用于容器元素剩余宽度的分配所占比例.

如果是小数, 则是剩余空间*小数, 相当于min-width, 比如有2个子元素, 一个子元素flex-grow: 1, 另一个元素没有设定, 则第一个子元素在容器元素有剩余空间的情况下会占满剩余空间的全部, 有个前提条件, 如果没有规定宽度的话, 子元素是自动填充延伸的.

 一般都是容器有个宽度, 子元素有个宽度, 然后在已有宽度基础上再分配, 用于多余空间的分配

如果flex-grow是小数的话, 真的就是剩余空间乘以小数, 不是平均分配.

===================================================

很神奇的现象, 如果容器宽度500px, 现在下面有3个子元素, 然后每个子元素占比40%, 40%, 60%, 然后子元素会自动填满父元素,
这是在有父元素有display: flex的情况下, 就是说, flex会有一点弹性, 有个幕后计算的过程,

 

如果没有flex这个特征, 则会涨破

==================================================

flex-basis, 是一个基准值, 比如设置了宽度, 则flex-basis相当于没有作用, 但如果设置了flex-basis, 但没有设置width, 则宽度就是这个flex-basis的值

flex-shrink, 就是规定当子元素超过父元素之后要吸收(减少)多少单位的值
flex-grow. 是瓜分子元素没有占满容器之后的宽度.

   flex-wrap: no-wrap; 这个是默认值

 

当父元素没有规定宽度,但用了display: flex的话, 那么子元素的flex-grow基本是无效的, 因为没有所谓的剩余宽度了?

 

好比说, 当我们设置了display:flex之后, 如果其中一个子元素规定了width: 50%, 将不会生效, 因为容器 display: flex的的原因, 但我们可以给各个子元素都设置相应的宽度, 这个时候就可以了.

只要设置了display:flex之后, 子元素都是flex-shrink: 1 自动的缩体的, 而且容器元素都是设置 flex-wrap: no-wrap, , 所以最后都没有发生跑出框界之外,

==================================================

Flex 布局和table 不兼容,
flex-basis很多时候可能有bug, 但width 就还可以.

https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width

==================================================

 css 里面有个opacity 属性, opacity 0 就是完全不可见, opacity 1 就是完全可见, opacity 就是可见性的意思

==================================================

word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，

不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；

而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

 

我感觉应该这么说: 浏览器碰到很长的单词都会尝试放到下一行, 如果下一行还是放不下, 这个时候 word-wrap 就出现发挥作用了,

如果没有   word-wrap: break-word; 则会一直撑出容器一直是一行,

但如果让浏览器 不把长单词放到下一行, 可以 直接用  word-break:break-all; 来把长单词不放到下一行, 直接从本行开始截断, 显得更省事.

 

https://www.cnblogs.com/firstdream/p/10768150.html

 

===================================================

 

 非常好的 水平和垂直居中的 css

<div>

<span></span>

</div>

 

       div{
            /* 移动盒子的位置:定位，margin,2d转换 */
            position: relative;
            height: 500px;
            width: 500px;
            background:lightskyblue;
        }
        span{
            position: absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width: 200px;
            height:200px;
            background:lightpink;
        }

 

=============================================================

 

Scale函数接收负数

 不代表放大缩小的倍数, 只是代表了 翻转的方向, 正数不翻转, 但负数是有翻转的.

 

============================================================

 

要想测试 rotate 可以用这个

 

    background-color: red;
    transform-origin: 0 0;
    transform: rotate(0deg);

 

比较方便就可以了

 

=============================================================

 

看来 css 的 2d 3d 没有很好的操作

 

div
{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}

div:hover
{
    width:300px;
}

 

这个东西叫过渡, 就是  transition:width 2s; 规定一个属性和时间, 这个元素会在某个情况下css的范围内这个属性有个变化目标值.

 

=============================================================

 当一个元素的 是 position: relative 的时候, 其before after 称之为 伪元素选择器

可以为其设置宽度, 前提是母元素设置为 position: relative, 然后before 设置为 position: absolute, 然后可以设置宽度.

然后可以设置transition: all 0.2s ease;

transition: all .25s ease-out;

 

=============================================================

 

 div { animation: myfirst 5s linear 2s infinite alternate; /* Safari 与 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; }

 

这个是啥情况呢, 就是说, animation就是transition的高级版本, 比transition更细化一点.

 

=============================================================

 

从这个地方竟然可以看出来,

  background-color: red;

max-width: 50px;
width: 100px;

max-width 的权限更大, 不在乎max-width在width的上面还是下面.

=============================================================

 

可以这么去理解, css要从从小往大写, 争取用最少的类来达到想要的目的, 不是每个区间都要写的,

=============================================================

 

比如有个类是col-md-7, 那么这个类在其本应该在的区间内, 是

 >768px时候,

有这个是生效的

.col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

但就算不在这个区间了, 只要类里面带了col 就任然有

position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;

这个属性来兜底

就好比说sm只保证>568, 在这个区间会很大, 所以要

现在的操作就是大致分两种, lg992为界限, 大于的就是桌面, 小于的就是手机宽屏横放或者手机竖立

有个兜底就就是只要含有col字符串的类名都会有width100%的兜底css

=========================================================

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

很明显啊, min-width 就是大于, 要越来越大, 这样后面的就能覆盖前面的,
max-width 就是小于,