响应式

一、文本分栏

• 栏的数量控制：-webkit-column-count：number；
• 栏间距：-webkit-column-gap：长度单位；
• 栏宽度：-webkit-column-width：长度单位；
• 栏间隔间的线条：-webkit-column-rule：长度单位  线条样式  颜色；
• 跨栏显示：-webkit-column-span：all；
• 间隔线样式：-webkit-column-rule-style

 

二、盒阴影（box-shadow）

• 语法：box-shadow：水平位移  垂直位移  模糊度  阴影长度  颜色；
• box-shadow: 0px 0px 10px 10px red；外阴影（默认）
• box-shadow: inset 0px 0px 10px 10px red；内阴影

 

三、resize 调整窗口大小，手动拉伸

 

四、弹性盒模型 display：box；

• 弹性盒模型要加前缀，如-webkit-
• 作用：将一个元素的子元素以弹性布局进行布局
• 各种子元素属性：
• 子元素布局方向：-webkit-box-orient：horizontal | vertical | inline-axis | block-axis | inherit；

值	描述
horizontal	在水平行中从左向右排列子元素。
vertical	从上向下垂直排列子元素。
inline-axis	沿着行内轴来排列子元素（映射为 horizontal）。
block-axis	沿着块轴来排列子元素（映射为 vertical）。
inherit	应该从父元素继承 box-orient 属性的值。

 

• 控制排序顺序：-webkit-box-direction：normal | reverse | inherit；

值	描述
normal	以默认方向显示子元素。
reverse	以反方向显示子元素。
inherit	应该从子元素继承 box-direction 属性的值

• 子元素自定义顺序：-webkit-box-ordinal-group：$；

• 把一行剩余的空间平分：-webkit-box-flex：$；$是占据份额

• 子元素水平对齐方式：-webkit-box-pack：start | end | center | justify；

值	描述
start	对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间） 对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）
end	对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。 对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center	均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后
justify	在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

• 子元素垂直对齐方式：-webkit-box-align: start | end | center | baseline | stretch；

值	描述
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。 对于反方向的框，每个子元素的下边缘沿着框的底边放置。
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。 对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch	拉伸子元素以填充包含块

五、响应式

添加头部：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• device-width  我们看到的
  
• initial-scale  没有放大
  
• maximum-scale  放大倍数
  
• user-scalable=0  不能放大和缩小
  
• 作用：打通两个不同的视界

设置不同的屏幕参数：

@media screen and (max-width: 960px) {。。。}

@media screen and (max-width: 640px) {。。。}

@media screen and (max-width: 320px) {。。。}

分别对应 960 , 640 , 320 像素的屏幕