WEB菜鸟笔记(二)

补充

:
<注意>img图片只设置宽/高图会等比拉伸。margin 0 auto 只有当图片小于盒子才有效果，图片大于盒子时无效，text-align：center也没用。 可以用定位，position:absolute, left;%50 margin-left:负一半宽度，但是代码多，可以用

奇淫技巧,margin: 0 -%100,图片父元素必须设置text-align:center

边框和渐变

border-radius: 左上 右上 右下 左下,根据指定值为半径找圆心，直角变成圆角，可以设置百分比，①当省略某一个角时候，系统会自动参考对角②只设置一个剩余三个都参考第一个③边框圆角值大于边框宽度，内外边框都是圆角，否则外圆内方
border-xx-xx-radius:水平 垂直，可以单独设置某个角，绘制椭圆，水平为宽度一半，垂直为高度一半

企业开发中让元素居中方式:left:%50;transform:translateX(-%50);,垂直居中top:%50;transform:translateY(-%50);

边框图片:border-image-source 用在边框的图片的路径。默认将图片放在四个角落，默认图片优先级高于边框颜色
border-image-slice 上 右 下 左，不用单位，对边框图片切割。，放在四周，中间没有，如果想中间有，加入border-image-slice 上 右 下 左 fill，中间平铺伸缩和四周一样
border-image-width 边框图标的显示宽度。设置了后默认边框宽度失效
border-image-repeat 图像边框是否应平铺(repeated)（拉伸加平铺，不会有不完整的图）、铺满(rounded)（平铺，图片可能有的显示一半）或拉伸(stretched)。
border-image-outset 上 右 下 左,边框图像区域超出边框的量。
边框快速写法boder-image：资源 切割方式 （fill）填充模式
设置元素垂直对齐方式vertical-align，设置给元素本身，text-align是设置给父元素的，

只对行内元素有效

vertical-align:baseline,默认和文字中最短底部对齐，比较简单自己查手册

线性渐变

background;linear-gradient(red, yellow, blue);默认从上到下，可以改变，方法一linear-gradient(to top,red, yellow, blue);就变成从下到上，左右也是如此，方法二：自己调角度linear-gradient(degx,red, yellow, blue);渐变颜色不限制，手动调节渐变范围，linear-gradient(degx,red xpx, yellow ypx, blue zpx);，x代表纯色范围，y，z代表黄蓝x-y，y-z渐变范围，背景颜色也相当于背景图片，可以用background-image设置定位。

背景图片显示在文本范围内自己百度

径向渐变

radial-gradient:(red,green);默认从中点向四周渐变，可以改变中心点，方法一radial-gradient:(at top left,red,green)中心在左上角，方法二；radial-gradient:(at xpx ypx,red,green)。这个渐变也可以指定扩散范围radial-gradient:(xpx,red,green).同时指定位置和范围，范围必须在渐变之前，radial-gradient:(范围,位置,red,green)；

伸缩布局

打个比方，ul为伸缩容器，要设置display:flex，li为伸缩项，默认x轴为主轴，y为侧轴，主轴起点容器对左边，终点容器最右边，侧轴从容器上到下。默认设置后子元素从左到右排版，伸缩项目从主轴起点开始排，只要修改主轴起点就可以改变排版。
在伸缩容器里设置：flex-direction用于修改主轴起点，取值有row（起点容器对左边，终点容器最右边,也是默认取值）；row-reverse；翻转主轴方向，column，主轴从上到下。侧轴就从左到右了，column-reverse同上。

在伸缩容器里设置justify-content设置对齐方式，默认为flex-start。和主轴起点对齐。flex-end，和主轴终点对齐；center和中间对齐。space-between，和两端对齐，剩余宽度平分插入盒子之间，第一个盒子左边和终点右边没有，从。space-around，剩余宽度平分插入盒子，但是从第一个盒子左边插入最后盒子右边

在伸缩容器里设置align-items:flex-start,让元素和侧轴起点对齐;flex-end,和侧轴终点对齐，center和侧轴中点对齐，没有环绕和两端对齐，但是有baseline基线对齐方式，stretch拉伸对齐，全部变为侧轴高度，伸缩不可以设置高度，不然会失效

在伸缩容器里设置align-items是所有的选中设置，可以在伸缩项中单独设置侧轴对齐方式，用align-self，这个是写在伸缩容器中的，取值和align-items一样

在伸缩容器里设置flex-wrap，伸缩项换行，伸缩项总长超过伸缩容器，不会换行，会等比拉长直到和容器一样，换行用flex-wrap，专门控制放不下是否需要换行，默认取值nowrap不换行，换行用wrap，但是换行会空几行换行，空的行与伸缩容器的对齐方式有关，注意不是伸缩项；wrap-reverse:放不下换行，以行为单位翻转。

伸缩容器对齐方式：在伸缩容器里设置align-content专门用于设置换行对齐方式，只有伸缩项换行了才有效果，取值有flex-start，换行后和侧轴起点对齐，空行就消失了，就是一行接着一行，flex-end，换行和侧轴终点对齐，也就是将左右内容当作整体放到下面，center就是将所有内容当作整体放到侧轴中间。space-between换行后两端对齐，space-around换行后环绕对齐，stretch拉伸，也就是默认的取值

伸缩项排序问题;给伸缩项添加的属性order，默认所有伸缩项取值都为0，改变取值，order取值越大，越靠后面。越小越在前面

伸缩项扩充:给伸缩项添加flex-grow,默认为0,代表不用扩充,每个伸缩项,设置取值就按比例填满本行,只有伸缩项总和小于容器宽度才可以,扩充方式是用剩余部分按比例分给设置了扩充的项

伸缩项缩小:给伸缩项设置flex-shrink,默认是1,0代表超出了也不缩小.,用于设置伸缩项总和大于容器宽度缩小自己,默认是1代表等比缩小,只有伸缩项总和大于容器宽度才有效,设置的值越大,缩小得越狠,扩充方式是
①算出溢出的长度,
②Σ(每一个伸缩项要的份数×当前宽度)=权重值,
③计算缩小范围:缩小范围 = 溢出宽度×当前伸缩项宽度×当前伸缩项要的份数/权重
伸缩项扩充缩小注意点:没有指定flex-grow或者值为0,不会扩充,flex-shrink值为0,不会缩小,扩充缩小的是主轴方向上的值,改变主轴方向就变成了设置高度了

伸缩项宽度设置:伸缩项宽度除了width可以设置,还有专用的属性,在伸缩项中设置flex-basis就可以,注意是宽度没有说高度,只有在伸缩布局中才有效,flex-basis优先级比width高,当两个都设置了的时候,会用取值具体的那个,具体像素>auto.
伸缩项连写:flex;伸缩 扩充 宽度