Xiaoyc7的博客

1.Flex布局flex容器属性flex-direction 主轴方向（默认row）flex-wrap 子项是否可换行flex-flow：flex-direction与flex-wrap的合写justify-content 主轴对齐方式align-items 侧轴（默认column）对齐方式align-content 弹性线对齐方式（当子项目足够多，一个主轴放不下，wrap产生了多条主轴，弹性线即为每个主轴）在flexbox容器中，开启flex布局<div class="fle

1. 多列布局column多列布局column用于定义多列文本属性：column-countcolumn-gapcolumn-rulecolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-spancolumn-width1.1 column-count列数div { column-count: 3; // 将元素中的文本均分3列}1.2 column-gap列间隙div{ column-gap:

1. 媒体查询CSS2 中引入了 @media 规则，根据不同媒体类型应用不同样式查询包括：视口的宽度和高度设备的宽度和高度方向（平板电脑/手机处于横向还是纵向模式）分辨率媒体类型包括：all 所有媒体类型设备print 打印机screen 计算机、平板、手机等设备屏幕语法：@media not|only mediaType and (expressions) { CSS-Code;}举个栗子：// 视口宽度 >= 480px时，应用skyblue色背景

1. filter设置图片的视觉效果（模糊度、饱和度等）img{ filter: blur(4px) //模糊度}img{ filter:grayscale(100%) //灰度}2.object-fit用于规定应如何调整 <img> 或 <video> 的大小来适应其容器object-fit: fill // 默认值，填充元素的内容框object-fit: contain // 缩放以保持纵横比，将其“放入”元素的内容框（以图片为基准）obj

1. transform (2D)transform 提供了多种2D转换的方法translate(): 移动rotate(): 旋转scale()：缩放scaleX()scaleY()skew()：倾斜skewX()skewY()matrix()：矩阵1.1 translate()沿x、y轴移动translate(x, y)、translateX(x)、translateY(y)translate(5px) // x和y轴移动5pxtranslate(5px, 10p

1. 圆角1.1 border-radiusborder-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusborder-radius: 5px 10px 5px 10pxborder-radius: 5px2.阴影2.1 text-shadow字体阴影text-shadow: 水平偏移，垂直偏移，模糊半径(可选)，颜色text-shadow: 2

1. background1.1 多重背景background-image: url(flower.gif), url(paper.gif); // 分别引入两个背景图background-position: right bottom, left top; // 分别定义两张图片位置background-repeat: no-repeat, repeat; // 分别定义重复方式/*简写*/background: url(flower.gif) right bottom no-repea