常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。
px物理像素
%基于父元素的百分比
em基于父元素的字体大小
rem基于根元素的字体大小
vw/vh 视口宽度和视口高度，100为全屏
两栏式布局
利用float ；左固定，右边margin左宽度
利用bfc 左边float，右边overflo：hidden
利用flex 左边固定，右边flex：1
利用定位 左边固定，右边left左边宽度
三栏布局的实现
flex 中间flex-1
定位 左右宽度绝对定位，中间margin
利用浮动 中间margin左右宽度
圣杯布局和双飞翼布局的区别
圣杯利用float以及内边距，通过父元素设置内边距，然后中间占所有宽度，然后通过定位将左右两侧的
元素移至padding位置
双飞翼通过中间元素margin，留出左右浮动的元素
水平垂直居中的实现
宽度固定时
通过定位left左边50%，再margin出自身宽高
宽度不固定时
通过定位left左边50%，再tansform平移自身宽度出自身宽高
通过flex
justify-content:center;
align-items:center;
如何根据设计稿进行移动端适配
可以根据媒体查询，根据不同屏幕进行适配
也可以通过rem根据根元素字体大小进行布局
还可以通过流式布局
和vw vh等单位进行布局
flex布局
常用属性
设置主列方向flex-direciotn：row
是否换行 flex-wrap；wrap
主轴对其方式 justify-content
交叉轴 align-items
多根轴对齐方式 align-content
flex-1； 1 1 auto； flex-gorw放大 flex-shink缩小 flex-basic 初始大小
响应式设计的概念及基本原理
一个网站兼容不同的终端
用媒体查询，根据设备尺寸大小，而进行的不同的布局
为什么需要清除浮动？清除浮动的方式
当子元素设置浮动，在父元素里不计算高度，会导致子元素撑不开父元素，子元素溢出父元素，导致高度塌陷
原理：浮动元素脱离文档流，不占据空间
清除浮动
利用bfc overflow：hideen
给父元素设置 height
在浮动元素后添加个标签加上clear-both
用伪元素设置zoom：1 触发hasLayout
BFC：块级格式化上下文，一种web页面中的盒模型布局中的css渲染模式，指的是一块独立的渲染区域
怎么触发bfc
float
position 除开static
overflow 除开visible（超出）
display inline-block table-ception
BFC 特性：
元素垂直从上到下摆放
垂直距离由margin决定
bfc不会与浮动重叠
计算bfc高度时，浮动也参加计算
bfc不受外部元素影响
BFC 的作用：
解决外边距重叠，设置overflo：hidden
解决float高度塌陷
实现两栏布局
什么是 margin 重叠问题？如何解决
就是垂直距离上父子元素，兄弟元素同时使用margin时，会正正取最大，正负相抵消
通过bfc可以解决
position 的属性有哪些，区别是什么
相对定位relactive 相对于自身
绝对定位 相对于父元素
固定定位 相对于视口根元素
display、float、position 的关系
postion优先级大于float
postion 会使dispaly变成inline-block
absolute 与 fixed 共同点与不同点
脱离文档流
display inlin-block
根据定位的元素不同
sticky 粘性定位，根据用户的滚动位置进行定位
-
实现一个三角形
原理边框由四个三角形组成
将元素宽高设为0，border-top设为50px，其他边框设为透明看不见
2.实现个扇形 （在三角形基础上，加个radius）
实现一个宽高自适应的正方形
利用vw
width：10%
height：10vw
.利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现
width:20%；
height: 0；
padding-top:20% 相当于设置高度为父元素width的20%
画一条 0.5px 的线
利用css3 tansform scale缩放
利用图片
wekit 内核下设置属性-webkit-text-size-adjust；None
设置小于 12px 的字体
用image
缩放
如何解决 1px 问题？
data-device=2 情况下，高分辨率机型，1px变得很粗
视口缩放
利用伪元素缩放
直接设置0.5px
border-image
