摘要：横方向相反以使用的控制单个元素的属性是。元素自动换成多行。这个缩写属性接受两个属性的值，两个值中间以空格隔开。行与行之间保持相等距离。每一行都被拉伸以填满容器。这可能有些容易混淆，但决定行之间的间隔，而决定元素整体在容器的什么位置。
1.查看理想视口(viewport)：window.screen.width
2.布局视口:使PC页面在移动端上查看布局不混乱Document.documentElement.clientWidth
3.视觉视口：肉眼可见的视觉区域
viewport标签：
使布局视口改变为手机对应的布局视口

width设置具体数据时，超出部分生成横向滚动条
width=device-width：为理想视口的宽度
initial-scale：改变布局视口大小（页面缩放），元素的大小不变
媒体顺序查询：离元素最近的规则为准（覆盖）
注意！！！！查询匹配的顺序 考虑使用相对单位来做媒体特性单位
左浮动：元素离开常规流 并显示在它父元素内边距区域的左边
POSITION:RELATIVE
去除定位：
可以使用top left right bottom控制位置，注意relative位置还存在！

Flex-wrap：换行（默认挤满元素再换行）
Justify-content：子元素在主轴上的对齐方式（flex-star是对齐到主轴的开始位置）space-around（间距等分）
pace-between（两边不留空间 中间平分）
Align-items：交叉轴（侧轴对齐方式）单行情况下
如果设置Justify-content&Align-items为center则可以实现垂直居中
Align-content: 多行情况下
子组件：
Order：控制子组件排序的次序
Flex-grow：占据的比例（不能超过同行其他元素规定的大小）
Flex-shrink：当剩余空间不足的时候，不换行的前提下，设置子组件占据的比列
flex-basis：跟width同理，剩余空间分配基准值
Align-self：可以覆盖父元素对其的控制，自己定义对齐方式
使用flex-direction的时候，justify-content:flex-end和start方向也被调转
注意当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。横方向相反
以使用的控制单个元素的属性是align-self。这个属性接受和align-items一样的那些值。
flex-wrap: • nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行。
flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap去设置行并自动换行
以使用align-content来决定行与行之间隔多远。这个属性接受这些值：
flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。
这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。
栅格系统：1.绝对尺寸单位：cm mm q in py pc px
2.相对字体的尺寸单位：em（父元素） ex ch rem（根节点）
3.视口百分比单位：vw vh vmin vmax
更精准健壮的换算：
<16px=1rem>
html{
font-size: 16px;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113546.html
摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。 概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...
摘要：概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年，移动互联网的数据流量将超越端的流量。 概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是...
摘要：所以一个网，甚至是响应式设计，在两个平台上都会损害您整体的。三响应式与如果把网站作为一个单独的网站，如果网站的内容与桌面版的内容相对缺少，导致用户回到桌面端的网站，会记录这种选择，使搜索排名降低，国内百度就不知道会怎样。 一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以...
摘要：继续响应式网页布局的实现，今日讲的是方案。就是为二维布局设计的，最适合用来做网页布局。其中是最小宽度单位，等于六个等于三个等于两个而则等于五个。 继续W3Schools响应式网页布局的实现，今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的，最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid，除非你很确定你的用户常使用较旧的浏览器，不然的话，建议使用CS...
阅读 1513·2021-11-02 14:42
阅读 2272·2021-10-11 10:58
阅读 571·2021-09-26 09:46
阅读 2879·2021-09-08 09:35
阅读 1321·2021-08-24 10:01
阅读 1204·2019-08-30 15:54
阅读 3568·2019-08-30 15:44
阅读 1764·2019-08-30 10:49
