目录
传统盒模型(标准盒模型)
默认的都是标准盒模型;(border,padding,margin,content)
box-sizing:content-box;
盒子的宽度/高度= width/height+border+padding;
怪异盒模型(ie盒模型)
移动端布局都是ie盒模型;(margin,content(内容包括:border和padding))
padding,border不会撑大盒子(已设置宽度/高度)的盒子
box-sizing:border-box;
flex布局(弹性布局,伸缩布局)
父元素添加display:flex;后,父元素和子元素都转换为块元素了
flex布局原理:通过给父元素添加flex属性,来控制子元素的位置和排列方式.
(任何一个元素都可以用flex布局,父元素设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效, 弹性布局下的子元素都是block元素类型。)
display:flex;添加给父元素
flex布局：当给父元素添加display：flex，只影响当前的父级和子级，不影响第三层元素。
Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴和垂直的侧轴(交叉轴)。
默认水平的是主轴,垂直的是侧轴; 但是可以通过flex-direction属性改变主轴方向;
flex容器(父元素)属性（添加给父元素的属性）
1、display:flex、inline-flex;
开启弹性布局
注意:设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
弹性布局下的子元素都是block元素类型。
2、flex-direction属性 决定主轴的方向（即项目/子元素的排列方向）
主轴是x轴,侧轴就是y轴; x轴从左到右;
主轴是y轴,侧轴就是x轴; y轴从上到下;
flex-direction: row(默认) 从左到右 | row-reverse | column 从上到下 | column-reverse; [reverse 使反向,颠倒]
3、flex-wrap属性，定义子元素是否换行显示
(主轴是x轴就是换行, 主轴是y轴 就是换列 )
flex-wrap: nowrap(默认不换行) | wrap(换行) | wrap-reverse;
默认不换行,如果父元素装不开,会自动缩小子元素;
4、 flex-flow(简写);
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;
5、 justify-content属性 定义了项目(子元素)在主轴上的对齐方式。
先确定那个是主轴
主轴为X轴:flex-direction: row; 主轴是x轴,justify-countent:center;
主轴为Y轴: flex-direction: column; 主轴是y轴,justify-content:center
justify-content: flex-start(默认值 从左到右/从上到下) | flex-end(从右到左/从下到上) | center(居中) | space-between(先贴两边,再平分剩余空间) | space-around(平分剩余空间);
6、align-items属性定义项目(子元素)在侧轴上如何对齐方式。(子元素 单行)
先确定那个是侧轴;
先确定主轴上子元素的对齐方式;再确定那侧轴上子元素的对齐方式;
baseline: 
stretch: 主轴为x轴,不设高度会拉伸;
主轴为y轴,不设宽度会被拉伸 
align-items: flex-star | flex-end | center | baseline(基线对齐) | stretch（子元素不设置高度(主轴为x轴)会拉伸), 子元素不设置宽度(主轴为侧轴)会拉伸; ) [stretch 拉伸,拉长]
主轴是y轴, 侧轴是x轴, (底部flex:1; 底部(字体图标+文字)布局) align-items:center; 
justify-content:center; 
两者都 :
主轴是x轴,侧轴是y轴, align-items:center;
justify-content:center; 
两者都 :
7、align-content属性定义了侧轴上子元素(项目)的对齐方式。(多行子元素/换行)
对于单行子元素，该属性不起作用。如果是单行, 给父元素添加flex-wrap:wrap;(换行)属性，会认为当前有多跟轴线，该属性会有效，
主轴是row,换行,侧轴(y轴)居中;
主轴是y轴,换行,侧轴(x轴)居中 
align-content: flex-start | flex-end | center | space-between(先贴两边,再平分剩余空间) | space-around(平分剩余空间) | stretch(拉伸);
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
单行找algn-items;
多行找align-content;(flex-wrap:wrap; 单行无效(除非父元素强制换行))
让内容(子元素,文本,图片)水平垂直居中方法
父元素设置: display:flex; justify-content:center ; align-items:center;
flex项目(子元素)属性（添加给子元素的属性）
1、align-self属性
先确定那个是侧轴;
说明：设置单独的项目在侧轴上的对齐方式.
注意：项目的align-self 属性可覆盖容器的align-items 属性。
属性值
auto 默认值。元素继承了它的父容器的 align-items 属性。
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
主轴是x轴,在侧轴居中, 第三个单独设置align-self:flex-start;在侧轴上位于容器的开头;
2、order
但三个元素单独社设置 order:-1;
说明：定义项目的排列顺序;
number排序优先级，数字越小越靠前,支持负数，默认为0，。
3、flex
说明：
复合属性。设置弹性布局对象的子元素如何分配空间;
如何分配空间,flex表示占空间的分数; 几分之几, 不设置flex的不变
第一个元素设置:flex:1;
第一个独占1/1
第一个和第二个都设置: flex:1;
第一个和第二个都占1/2
第一个设置flex:3,第二个设置 flex:1;
第一个占3/4
移动端设置标准视口
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width = device-width：宽度等于当前设备的宽度
user-scalable：用户是否可以手动缩放（默认设置为no，不允许用户放大缩小页面 yes/no;1/0）
initial-scale： 初始的缩放比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
设备像素(又称为物理像素):
物理像素就是设备显示的像素（设计图尺寸）
指设备能控制显示的最小物理单位，意指显示器上一个个的点。
从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变，和屏幕尺寸大小有关，单位 pt。
css像素:
指的是 CSS 样式代码中使用的逻辑像素(css设置的像素)，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。
px 是一个相对单位.
DPR(设备像素比)：
设备像素比 = 设备像素（物理像素) / css像素(逻辑像素) ;
即 : 物理像素=css像素 × DPR
移动端页面要有更好的屏幕适配。要用,vw这个单位，vw是设备单位比，1vw是当前设备的1%，100vw就是整个可视窗口的宽度.1vw在不同移动端设备上转换成px也是不同的;
html中font-size：100px;
1rem == 100px; (方便在写代码的时候换算)
100px == ?vw
如果设计图为(物理像素)640px; 考虑的dpr 2
640px / 2 == 320px; (css像素)
100vw == 320px; 100vw就是整个可视窗口的宽度.
1vw == 3.2px; 1vw = 可视窗口的宽度的百分之一.
?vw == 100px;
31.25vw == 100px;
html{
font-size:31.25vw;
}
375分别率的, 设计图为750px,dpr为 2
常见移动端vw尺寸:
苹果5/se 320分辨率 1vw=3.2px 31.25vw=100px html{font-size:31.25vw;}
苹果6/7/8 375分辨率 1vw=3.75px 26.67vw=100px html{font-size:26.67vw;}
苹果 6/7/8/plus 414分辨率 1vw=4.14px 24.15vw=100px html{font-size:24.15vw}
常见单位
1、px
px相对于屏幕分辨率,1px不一定等于1个物理像素点;
移动端1px=2px,或3px; dpr为2或3;
2、em
em是相对于父元素的字体大小,具有继承的特点。浏览器默认字体是16px, 1em=16px;
3、rem
rem始终都是相对html根元素的字体大小, 通过它可以做到通过更改根元素大小，从而调整页面所有使用rem为单位的元素大小。
4、vw vh
vw和vh是视口单位，就是根据浏览器窗口的大小的单位，不受显示器分辨率的影响，
vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一, 100vw就是整个可视窗口的宽度.
vh就是可视窗口的高度了
vmin和vmax，vmin是指选择vw和vh中最小的那个，vmax是选择最大的那个；
移动端的准备工作
1. meta设置视口
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2. link 引入字体图标,
字体图标的设置: 阿里字体图标库 iconfont-阿里巴巴矢量图标库
下载字体图标, 命名字体图标文件夹 font,
html中引入字体图标文件夹里的css样式,
例如: <link rel="stylesheet" href="iconfont/iconfont.css" />
字体图标的运用;
字体图标标签 class名为 必须为 class="iconfond"
方法一: 在字体图标的标签内写 <i class="iconfont"></i>
方法二: class名内写 class="" <i class="iconfont icon-weixin"></i> (注意字体图标的的class名 空格隔开 去掉font class前的点>)
3.换算单位
- 一屏页面: html,body{height:100%;}
- 所有盒模型为怪异盒模型: * {box-sizing:border-box;}
- html根标签字体大小用vw单位 htm{font-size: 多少vw;}
- body设置字体大小 body{fontsize:16px;}
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
