弹性布局
两部分：
1. 语法是添加到父容器上的？
display : flex;
1-1.(flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。)
flex-direction: row; 布局的排列方向 （主轴排列方向）
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的
1-2. (flex-wrap用来控制子项整体单行显示还是换行显示。)
flex-wrap : nowrap; 是否进行换行处理。
nowrap; 默认值，不换行处理
wrap; 换行处理
wrap-reverse; 反向换行
1-3.(flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。)
flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
1-4.(justify-content属性决定了主轴方向上子项的对齐和分布方式。)
justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
1-5.(align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式)
align-items : 每一行中的子元素上下对齐方式。
flex-start;
center;
flex-end;
1-6.(align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。)
align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
值跟justify-content取值是相同的。
2.作用在flex子项上的CSS属性
order:可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。
flex-grow:属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0。
flex-shrink:属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
flex-basis:flex-basis定义了在分配剩余空间之前元素的默认大小。
flex:flex属性是flex-grow，flex-shrink和flex-basis的缩写
align-self:align-self指控制单独某一个flex子项的垂直对齐方式。
注：默认情况下，在弹性盒子中的子元素的左右排列的。
注：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
注：当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
注：当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
弹性导航
flex-shrink: 0;使nav导航不收缩实现一行排列多余溢出
<style>
*{margin: 0;padding: 0;}
a{text-decoration: none;}
.main{width: 750px;margin: 30px auto;border-bottom: 1px gray;background: #161618;}
.main .nav{height: 70px;font-size: 20px;line-height: 70px;display: flex;}
.main .nav a{color: #999999;margin: 0 10px;flex-shrink: 0;position: relative;}
.main .nav a.active{color: #c8a06a;}
.main .nav a.active::after{background: #c8a06a;content: "";width: 50%;height: 6px;display: block;border-radius: 4px;position: absolute;left: 50%; bottom: 10px;transform: translateX(-50%);}
</style>
</head>
<body>
<div class="main">
<div class="nav">
<a class="active" href="#">精选</a>
<a class="active" href="#">vip</a>
<a href="#">电影</a>
<a href="#">电视剧</a>
<a href="#">综艺</a>
<a href="#">精选</a>
<a href="#">vip</a>
<a href="#">电影</a>
<a class="active" href="#">电视剧</a>
<a href="#">综艺</a>
<a href="#">精选</a>
<a href="#">vip</a>
<a href="#">电影</a>
<a href="#">电视剧</a>
<a href="#">综艺</a>
</div>
</div>
</body>
使用弹性布局制作骰子、3d
<style>
*{margin: 0;padding: 0;}
/* box1 */
.box1{background: red; width: 200px;height: 200px;border-radius: 15px; display: flex;justify-content: center;align-items: center;position: absolute;left: 0px;top: 0px;}
.box1 div{width: 40px;height: 40px;background: black;border-radius: 50%;}
/* box2 */
.box2{background: greenyellow; width: 200px;height: 200px;border-radius: 15px; display: flex;justify-content: space-evenly; align-items: center;position: absolute;left: -200px;top: 0px;transform-origin: right;transform: rotateY(-90deg);}
.box2 div{width: 40px;height: 40px;background: black;border-radius: 50%;}
/* box3 */
.box3{background: indigo; width: 200px;height: 200px;border-radius: 15px; display: flex;justify-content: space-evenly;position: absolute;right: -200px;top: 0;transform-origin: left;transform: rotateY(90deg);}
.box3 div{width: 40px;height: 40px;background: black;border-radius: 50%;margin: 15px;}
.box3 div:nth-of-type(2){align-self: center;}
.box3 div:nth-of-type(3){align-self:flex-end;}
/* box4 */
.box4{background: cyan; width: 200px;height: 200px;border-radius: 15px; display: flex;flex-direction: column;justify-content: center;position: absolute;left: 0;top: -200px;transform-origin: bottom;transform: rotateX(90deg);}
.box4 div{display: flex;flex-direction: row;justify-content: space-evenly;}
.box4 div span{display: block; width: 40px;height: 40px;background: black;border-radius: 50%;margin: 15px;}
/* box5 */
.box5{background: darkmagenta; width: 200px;height: 200px;border-radius: 15px; display: flex;flex-direction: column;justify-content: center;position: absolute;left: 0;top: 200px;;transform-origin: top;transform: rotateX(-90deg);}
.box5 div{display: flex;flex-direction: row;justify-content: space-evenly;}
.box5 div span{display: block; width: 40px;height: 40px;background: black;border-radius: 50%;margin: 15px;}
/* box6 */
.box6{background: darkred; width: 200px;height: 200px;border-radius: 15px; display: flex;flex-direction: column;justify-content: center;position: absolute;left: 0;top: 0;transform: translateZ(-200px);}
.box6 div{display: flex;flex-direction: row;justify-content: space-evenly;}
.box6 div span{display: block; width: 40px;height: 40px;background: black;border-radius: 50%;margin: 15px;}
/* box */
.box{width: 600px;height: 600px;border: 1px solid gray;margin: 20px auto;position: relative;perspective: 800px;perspective-origin:top;}
/* transform-style: preserve-3d;transition: 4s linear; */
.small{width: 200px;height: 200px;margin: 200px;position: relative;transform-style: preserve-3d;transition: 4s linear;transform-origin: center center -100px;}
.box:hover .small{transform: rotateY(360deg);}
</style>
</head>
<body>
<div class="box">
<div class="small">
<!-- box1 -->
<div class="box1">
<div></div>
</div>
<!-- box2 -->
<div class="box2">
<div></div>
<div></div>
</div>
<!-- box3 -->
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<!-- box4 -->
<div class="box4">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
<!-- box5 -->
<div class="box5">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
<!-- box6 -->
<div class="box6">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</body>
弹性自适应网页布局
- flex-grow:1;默认为0不扩展1扩展空间实现页面宽高自动收缩
<style>
/* 左右排列 */
html,body{height: 100%;}
*{margin: 0;padding: 0;}
.box{height: 500px;display: flex;}
.box div:nth-of-type(1){width: 200px;background: cyan;}
.box div:nth-of-type(2){flex-grow: 1; background: yellowgreen;}
.box div:nth-of-type(3){width: 100px;background: green;}
/* 上下排列 */
html,body{height: 100%;}
*{margin: 0;padding: 0;}
.box{height: 100%; display: flex;flex-direction: column;}
.box div:nth-of-type(1){height: 200px;background: cyan;}
.box div:nth-of-type(2){flex-grow: 1; background: yellowgreen;}
.box div:nth-of-type(3){height: 200px;background: green;}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
网格布局grid
- css flex属性
- 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
#main div{flex:1;}
- 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
2. grid网格布局？
作用在容器上的：
display : grid
grid-template-columns : 设置列数
grid-template-rows : 设置行数
fr单位
repeat()方法
注：网格中提供了一个新的单位：fr ( 比例单位 )
grid-template-areas : 划分区域的
注：区域必须是矩形。
grid-template:复合写法
grid-template-rows
grid-template-columns
grid-template-areas
grid-template:
"a1 a1 a1" 1fr
"a3 a3 a2" 1fr
"a3 a3 a2" 1fr
/1fr 1fr 1fr;
grid-column-gap : 列的间距
grid-row-gap : 行的间距
grid-gap : 复合写法
grid-row-gap grid-column-gap
justify-items : 子项的水平居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
align-items : 子项的垂直居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
place-items : 复合写法
align-items justify-items
justify-content : 整体网格的水平对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly
align-content : 整体网格的垂直对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly
place-content : 复合写法
align-content justify-content
作用在子项上的：
grid-area : 找指定的区域
1.对应网格的名字
2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4;
grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置
注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。
正常数字是位置，加上span是个数。
grid-column:3 / 4;
grid-column-start / grid-column-end
grid-row:1 / span 2;
grid-row-start / grid-row-end
justify-self
algin-self
place-self
移动端布局
-
底部导航navbar设置注意点
- 1.
position:fixed固定 - 2.利用弹性
flex：1；属性分配子div在父div中所占区域等分
- 1.
-
移动端布局方案
1.流式布局
好处： 大屏幕下显示更多的内容。
坏处：宽屏下比例会有一些不协调。
2. rem布局
好处： 不同设备下看起来比较协调。
坏处： 显示的内容并不会在大屏幕展示的内容多。
em : 是一个相对单位，1em等于当前元素或父元素的font-size值。
1em == 1个font-size的大小
rem : 是一个相对单位，1rem等于根元素的font-size值。
1rem == 1个根元素的font-size大小 就是 1个html标签的font-size大小
rem -> root + em
rem布局的原理：
页面中的元素采用rem作为尺寸或者间距的单位。
想办法去动态改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放。
如何做到font-size动态化？
1. 通过JS （JavaScript）
document.documentElement.clientWidth -> 获取布局视口的宽度。
在iphone 6 -> document.documentElement.clientWidth -> 375
在iphone 6 plus -> document.documentElement.clientWidth -> 414
在iphone 6 -> font-size 100px ?
document.documentElement.clientWidth(375) / 3.75 -> 100
在iphone 6 plus -> font-size 大于 100px ?
document.documentElement.clientWidth(414) / 3.75 -> 110.4
2. 通过vw（vw是尺寸单位）
vw -> view width
vh -> view height
相对单位：表示把屏幕自动分成了100vw宽和100vh高。
vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。
假设屏幕是375px -> 100vw -> 1vw == 3.75px
假设屏幕是414px -> 100vw -> 1vw == 4.14px
iphone6 -> html的font-size ? -> 100px0
1vw == 3.75px ? -> 多少个vw == 100px -> 26.66667vw -> 100px
iphone6 plus -> html的font-size ? ->
1vw == 4.14px ? -> 26.66667 * 4.14px ? -> 110.4px注：选择iphone6的html的font-size为100是为了好算。也可以用工具辅助开发。
vsCode中去下载一个插件 -> px to rem -> 在设置把对应的font-size设置下。
-> alt + z进行px转rem的操作。注：使用rem进行布局的时候，一定要在body中重置默认的font-size大小。
实战rem布局：
直接按一种设备去做。-> iphone 6 -> 版心375。
注：在线px转rem：http://www.ofmonkey.com/front/rem
注：做rem布局，心里只想着iphone 6一款设备，然后测量尺寸，换 算rem。
5. UI设计师移动端的页面该怎么设计？
设计师只会按照一种设备进行设计（ iphone 6 或者 iphone 6 plus ）
前端会自己是适配不同的移动端设备。
注：移动端所用到的图片，都是比要显示的区域要大。
注：设计师一般会设计一套正常大小的设计图，还会设计一套2倍的设计图（方便获取大图）
响应式布局&CSS3媒体查询实现
-
响应式布局?
用一套代码，去适配不同的设备。既可以运行在PC端，也可以运行在移动端。
注：比较适合小网站，个人博客，产品介绍页… -
CSS3 媒体查询?
即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏 -
媒体查询的语法？
常见的媒体类型：
all 用于所有设备
print 用于打印机和打印预览。
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备。@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }orientation:portrait : 竖屏
orientation:landscape : 横屏
@media all and (orientation:portrait){}
注：这个横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的。注：空格是需要添加的，要符合规范。
link的使用：
<link rel="stylesheet" href="./hello.css" media="all and (min-width:600px)"> -
如何实现响应式布局呢？
- 先去适配手机端 -> 过渡到pad -> 过渡到pc (不是很推荐)
- 先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)
/* 正常的样式 , 针对PC端的 */
100行CSS/* 针对pad pro */
@media all and (max-width:1024px){ 50行CSS }/* 针对pad mini 和 mobile 横屏 */
@media all and (max-width:768px){ }/* 针对 mobile 竖屏 */
@media all and (max-width:450px){ }
3859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
