css

弹性布局Flex

概念

通过为修改父元素的display=flex；，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

属性

• .flex-direction属性 （控制项目排列主轴方向与顺序）
  取值：row(默认) | row-reverse | column | column-revers

• .flex-wrap属性 （用于控制项目是否换行）
  取值：nowrap(默认不换行,按比例压缩) | wrap | wrap-reverse（相反的顺序）

• .justify-content属性(用于控制项目在主轴的对齐方式) 多行
  取值：flex-start(默认左对齐) | flex-end （右对齐）| center | space-between（左右两端对齐,中间均匀分布） | space-around （项目之间间距为左右两侧项目到容器间距的2倍）| space-evenly（项目之间间距与项目与容器间距相等）

• .align-items属性 ( 用于控制项目在侧轴排列方式 )当前行
  取值：flex-start 在纵轴紧贴容器顶部| flex-end | center | baseline 以第一行文字的基线| stretch(默认)如果项目没设置高度，或高度为auto，则占满整个容器（拉伸）。

• .align-content属性 ( 用于控制项目在侧轴排列方式 )(多行)（整个容器）

• .align-self 属性( 用于控制项目在侧轴排列方式 )子项

排序:
order: ；按照从小到大进行排序

延伸：盒子模型大小设定

box-sizing:
content-box; （默认值）内容大小固定
border-box; 整个盒子大小固定，不会因为内边距和border撑开而改变大小

剩余空间分布

 .body{
  	display: flex;
    width: 100%;
    height: 400px;
}
.one{
    flex: 1;
    background-color: #00B7FF;
}
.two{
    flex: 2;
    background-color: #42b983;
}
.three{
    width: 200px;
    background-color: #ff6700;
}

响应式布局

概念

实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

使用

响应式页面：适应pc的页面和移动的页面
1、复杂页面不适合响应式
2、使用媒体查询必须加 meta viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

content="           viewport视窗的设置
width=device-width,     宽度等与设备宽度，浏览器分辨率等于系统分辨率
initial-scale=1,        初始化比例是1
minimum-scale=1,        最小的缩小比例是1
maximum-scale=1,        最大的放大比例是1
user-scalable=no"       用户不允许缩放

媒体查询：查询屏幕大小，根据屏幕大小设定相关样式

/*小与600px，d1宽度变为100%*/
@media only screen and ( max-width: 600px ){
    .d1{
        width: 100%;
        background: #42b983;
    }
}

JS中查询屏幕大小
window.innerWidth可以获取窗口宽度，根据窗口宽度来设定html样式

REM布局

会跟着页面分辨率同比率放大缩小

<style>
    <!--若10rem能够充满整个屏幕，这里方框永远占据屏幕一半-->
    .d1{
        width: 5rem;
        height: 5rem;
        background-color: #42b983;

    }
</style>
<script>
	window.onresize = function () {        //当屏幕尺寸改变时，触发函数
	    setRem()
	}
	function setRem() {
	    var screenWidth = window.innerWidth;
	    var danwei = screenWidth/10;            //一般计算1px对应的rem，这里10个danwei（rem）占满整个屏幕
	    var html = document.querySelector("html");
	    html.style.fontSize = danwei + 'px';
	}
	</script>
setRem();

圣杯布局

两栏宽度固定，中间宽度自适应的三栏布局

<style>
      *{
          margin:0;
          padding:0;
      }
      .container{
          display: flex;
          height: 100vh;  
          flex-direction: column;
      }
      header{
          background: #00B7FF;
          height: 100px;
      }
      section{
          display: flex;
      }
      footer{
          background: #42b983;
          height: 100px;
      }
      .left{
          background: #333333;
          width: 200px;
      }
      .center{
          flex:1;
          background: #888888;
      }
      .right{
          background: #333333;
          width: 200px;
      }
  </style>