布局

css:
一、CSS简介1、什么是CSSCSS：Cascading Style Sheet 层叠样式表是一组样式设置的规则，用于控制页面的外观样式2、为什么使用CSS实现内容与样式的分离，便于团队开发样式复用，便于网站的后期维护页面的精确控制，让页面更精美3、CSS作用页面外观美化布局和定位在PC端常见的布局： 流式布局 浮动布局 层布局在移动端常见的布局：移动端技术解决方案CSS初始化 normalize.csscss盒子模型 box-sizing清除高亮-webkit-tap-highlight-color:transparent;取消外观-webkit-appearance:none;禁用长按页面时弹出菜单img,a{-webkit-touch-callout:none;} flex布局flex布局是css3中的提出的一种布局方案，在开发移动端页面时，基本上都是flex布局，当然，如果你不考虑浏览器的兼容性问题，你在PC端也可以使用Flex布局。原因：很多PC端浏览器对CSS3的支持并不友好。如果使用flex布局，那么就不要想着浮动布局，也就是说flex布局直接干死了浮动。flex布局中的几个概念： 1）容器：如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。 2）项目：容器中的直接子元素就是项目（儿子） 项目默认都是在主轴上进行排列的 3）主轴：默认情况下，项目是按照水平方向从左到右进行排列，这个排列方向就是主轴的方式 4）交叉轴：和主轴垂直的那个轴就是交叉轴对于容器来说，我们需要学习6大属性，以于项目来说，我们也需要学习6大属性，说白了学习flex，就是学习12个属性，如果你把12个属性掌握住了，那么你就会flex布局。容器的属性： 意味着下面的属性需要写在容器中 flex-direction: direction本意是方向的意思 作用：用来设置主轴的方向 row：默认值 水平面右 默认情况下，如果你不设置主轴的方向，那么默认就是水平向右的 row-reverse reverse本意是反转的意思 水平向左 css:
一、CSS简介
1、什么是CSS
CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、为什么使用CSS
实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

3、CSS作用
页面外观美化

布局和定位

在PC端常见的布局：
流式布局
浮动布局
层布局

在移动端常见的布局：
移动端技术解决方案
CSS初始化 normalize.css
css盒子模型 box-sizing
清除高亮-webkit-tap-highlight-color:transparent;
取消外观-webkit-appearance:none;
禁用长按页面时弹出菜单img,a{-webkit-touch-callout:none;}

flex布局

flex布局是css3中的提出的一种布局方案，在开发移动端页面时，
基本上都是flex布局，当然，如果你不考虑浏览器的兼容性问题，
你在PC端也可以使用Flex布局。

原因：很多PC端浏览器对CSS3的支持并不友好。

如果使用flex布局，那么就不要想着浮动布局，也就是说flex布局直接干死了浮动。

flex布局中的几个概念：
1）容器：如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。
2）项目：容器中的直接子元素就是项目（儿子） 项目默认都是在主轴上进行排列的
3）主轴：默认情况下，项目是按照水平方向从左到右进行排列，这个排列方向就是主轴的方式
4）交叉轴：和主轴垂直的那个轴就是交叉轴

对于容器来说，我们需要学习6大属性，以于项目来说，我们也需要学习6大属性，说白了学习flex，就是学习12个属性，如果你把12个属性掌握住了，那么你就会flex布局。

容器的属性： 意味着下面的属性需要写在容器中
flex-direction: direction本意是方向的意思 作用：用来设置主轴的方向
row：默认值 水平面右 默认情况下，如果你不设置主轴的方向，那么默认就是水平向右的
row-reverse reverse本意是反转的意思 水平向左
column column本意是列的意思 让主轴垂直向下
column-reverse 让主轴垂直向上
注意：项目是从主轴的起点开始排列。
flex-wrap：
如果说容器的宽度比较小，项目的总宽度大于容器的宽度，此时项目在容器中会进行压缩，默认是不
换行的。
如果想你让它换行，通过flex-wrap属性来设置。
nowrap：不换行 默认值
wrap ： 换行
flex-flow：不是一个新的属性，是上面两个属性的复合属性
flex-flow:是flex-direction属性和flex-wrap属性的简写形式
如：row nowrap 表示：主轴的水平向右的 不换行
justify-content：用来处理主轴上的富余空间的
flex-start：表示项目在主轴的开始点排列，富余空间在主轴的结束位置
flex-end：表示项目在主轴的结束点排列，富余空间在主轴的开始位置
center: 表示项目在主轴的中间位置，富余空间在主轴的两侧
space-between: 表示富余空间在项目和项目之间
space-around：around表示环绕的意思 表示富余空间环绕项目
注意：什么时候使用justify-content，只有有富余空间时才会使用
align-items： 理解1：项目在交叉轴上的摆放位置 理解2：处理项目在交叉轴的富余空间
flex-start：项目在交叉轴的起来开始排列，富余空间在后面
flex-end：：项目在交叉轴的起来结束位置排列，富余空间在前面
center: 项目在交叉轴的起来中间位置排列，富余空间在两侧
align-content： 多行项目，形成多根主轴，此属性是用来设置多根主轴的位置关系
使用前提：
1）多行项目

    flex-start: 两根主轴都从开始位置开始排列
    flex-end ： 两根主轴都从结束位置开始排列
    center：两根主轴从中间位置开始排列

项目的相关属性：
order：设置单个项目在主轴的排列顺序 order的默认值是0
如果数字越小，越靠近主轴的起始点
flex-grow： grow表示生长因子
如果说有富余空间，你想让哪个项目生长。就可以设置flex-grow。
把富余空间分成了三份，每个项目占一份。