1.flex布局

1.1 媒体查询

@media screen（屏幕的意思）

device-width是设备的宽度；

获取浏览器的宽度 width是浏览器的可视宽度。媒体查询引入

1内部样式表
<style></style>
2外部样式表
<link href="css/test.css" rel="stylesheet">
<link href="aa.css" rel="stylesheet" media="(min-device-width: 100px) and (max-device-width: 300px)"

1.2 flex布局

主轴 交叉轴
flex分主轴（main axis）和交叉轴（cross axis），
主轴是和盒子内部元素排列方向一致的。
flex-direction 
作用 子元素在父元素盒子中的排列方式
row:默认值，按从左到右的顺序显示。
row-reverse:与row相同，但是以相反的顺序显示。
column:灵活的项目将垂直显示，按从上到下的顺序。
column-reverse：与column相同，但是以相反的顺序。
#box{
    display:flex;
    flex-direction:row;
    flex-wrap:warp;
    
}
flex-wrap: nowrap / wrap / wrap-reverse
默认值，不换行或不换列 、换行或换列、换行或换列，但以相反的顺序。
  /* flex-direction: row;
      flex-wrap: wrap; */
      flex-flow: row wrap; 代表水平居中，是上面2个的简写
jstify-content//用来在存在剩余空间时，设置为间距的方式      
justify-content: flex-start\flex-end\center\space-between\space-aroud
从左到右、从右到左、居中显示、平均分布在该行上，两边不留间隔空间、平均分布在该行上，两边留有一半的间隔空间

align-items:控制交叉轴显示的位置
flex-start:开始 flex-end:结尾 center:中间
align-items设置每个flex元素在交叉轴上的默认对齐方式。（单行里面的内容当做整体)
align-content把多行的内容当做整体。

flex-basis：设置弹性盒子伸缩基准值
flex-grow:占剩余空间几分
flex-shrink：超出部分占空间几分
flex : flex-grow(扩展比率)    flex-shrink(缩小比率)    flex-basis(盒子的伸缩基准值)
flex-shrink:0 不允许缩小
注意 平常写 flex:1 时 等于flex: 1 1 0%

1.3 案例

输入框
获取设备信息
let userAgent = navigator.userAgent.toLowerCase()

css知识点记录整理

1.flex布局

1.1 媒体查询

1.2 flex布局

1.3 案例

1.4rem使用