触发怪异模式的条件
如果想设置滚动条样式怎么办?
三列布局
第一种 绝对定位
html
css
利用 vw 和 calc()?
float方式,
要注意html的顺序
html
scss
参考 三列布局实现4种方法
双侧翼,还真是学习了.
这样能够保证先加载中间的主要内容
html
scss
不用float 用display : inline-block行不行?
这才发现 float 和 inline-block 有个挺大的区别
float 时, left 通过 margin-left 向左移动时, right 会被 mid卡主.
inline-block 时, left通过margin-left 向左移动时, right会跟着left 一起移动.
双侧翼很巧妙!
css每个单句都不怎么难, 但复合使用不太好掌握.
圣杯模式
html
scss
这个就更巧妙了,我真实佩服的五体投地.
首先, width 和 margin 的百分比都是 针对父级的宽度, 这个宽度是 content-width
不包括padding部分.
所以根据padding 预留出左右的空间.
根据float 的特性, 左右会折行到下一行,
通过margin-left 可以让float元素 之间重叠, 让他们回到同一行.
但重要的是, left 的移动,right不会跟着移动,这和inline-block 不同.
最后用relative最后再调一次位置.
实在是精妙.
css3 关于position 感觉非常坑人
关于 百分比的基准值,这里有写.
用flex
html
scss
确实很方便, 问题来了, 如果我想让mid 先加载怎么办?
利用order
html
scss
设置在子元素,伸缩项目上.
多余的部分会进行拉伸填充,
每个子元素的默认是为0, 默认是不会拉伸填充,不变形.
如果设置,则按照比例,分割空间分配.
也就是会经过变形不超出父级.
默认值为 1, 按照该比例,切割子元素,
如果我们想让他们不变形且不换行,
可以把子元素的shrink 值都设置为0
这就是视频和文字的差异了,
因为用文字表达要准确,所以只能说的不是人话,
实际上核心逻辑非常简单.
刚开始,我不明白这个属性有什么用处,
后来发现三列布局时,通过html顺序和 order配合可以调整加载顺序.
默认值为 0
如果我们想设置子元素的主轴方向的属性,
可以用 grow, shrink, base ,order, 可以调整主轴的大小和位置
如果想谁知子元素的侧轴方向的属性,
可以用aline-item,
父元素上的 flex-direction flex-wrap justify-content aline-item aline-content
这几个属性,都是用来进行布局的.
非常的,,嗯强大.
我们讲主轴设为 x轴, 设定多行的情况,
讨论一下 aline-item 和 aline-content的效果区别.
之前我只是笼统的知道 aline-item 作用在侧轴只有一行的情况.
aline-content 作用在侧轴多行的情况.
而实际上 aline-item 对 侧轴多行的情况也是有效果的,只是不一样.
html
当值为strech时, 两个效果是一样的.
注意strech 如果想要有效果, 就必须让heigth(侧轴宽度) 不是固定宽度,否则失效.
除了这三个之外, aline-content 还有两个属性,
与justify-content 非常类似,
如果父级 relative 子级当中有 absolute的元素,
则该子元素不受到 flex布局的影响.
flex布局时会排除该元素进行布局
至此,我觉得flex进行布局,那是真的强.
主轴和侧轴的各自控制属性基本就全了.
侧轴唯一比主轴差的属性,应该就是 shink 和 order属性了.
好课外思考就到这里, 继续看视频
本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：
对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效
flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式
flex布局父项常见的属性：
1.flex-diretion:设置主轴的方向
默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下
属性值：row 默认值从左到右
row-reverse 从右到左
column 从上到下
column 从下到上
2.jusity-content:设置主轴上的子元素排列方式
属性值： flex-start 默认值从头开始 如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around平分剩余空间
space-between 先两边贴边再平分剩余空间（重要）
3.flex-wrap:设置子元素是否换行
属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度，一块放到父元素中
wrap 换行
4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效
属性值： flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子轴在侧轴平分剩余空间
space-between 轴在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度
5.align-items:设置侧轴的子元素排列方式（单行）
属性值： flex-start 从上到下
flex-end 从下到上
center 挤在一起（垂直居中）
stretch 拉伸（默认值） 使用时子盒子不要给高度
例如：子元素居中 默认主轴是x轴
主轴居中 jusity-content:center
侧轴居中 align-items:center
6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap
flex布局子项常见属性
1.flex定义子项目分配剩余空间，用flex来表示占多少份数
flex:<number>默认值 0
2.align-self控制子项自己在侧轴的排列方式
3.order属性定义子项的排列顺序（前后顺序）
给父元素添加 display:grid
display关于网格的取值分为两个，grid(块网格)和 inline-grid (行内网格 行内块)
grid 容器从上向下排列
inline-grid 容器从左向右排列
grid-template-row规定行属性
grid-template-column规定列属性
1.绝对大小（根据列数或者行数确定值得个数）
grid-template-row：200px 200px 200px
grid-template-column：200px 200px 200px
2.百分比（根据列数或者行数确定值得个数）
grid-template-row：33.33% 33.33% 33.33%
grid-template-column：33.33% 33.33% 33.33%
3.repeat函数
grid-template-rows: repeat(3,33.3%)
grid-template-columns: repeat(3,33.3%)
4.repead auto-fill 自动填充
grid-template-rows: repeat(auto-fill,33.3%)
grid-template-columns: repeat(auto-fill,33.3%)
5.fr 片段
grid-template-rows: 100px 1fr 300px
grid-template-columns: 100px 1fr 300px
6.minmax
grid-template-rows:minmax(100px,200px) 200px 300px
grid-template-columns:200px 200px 200px
7.auto
grid-template-rows: 100px auto 300px
grid-template-columns: 100px auto 300px
列间距
1.grid-row-gap: 10px
grid-column-gap: 10px
复合写法
grid-gap: 10px 10px
指定区域
1.grid-template-areas: 'a b c '
'd e f'
'g h i'
区域合并时 需要让合并的区域名字相同
grid-template-areas: 'a a c '
'd e f'
'g h i'
.box div:nth-child(1){
grid-area: a
}
以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。
除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结
我们只会用到一点点儿CSS布局的属性，虽然少，但既然要用到，就得把它们总结在这里，搞明白。
在了解CSS布局的相关属性之前，我们先了解一下 盒子模型——CSS会把每个组件都看作是一个盒子，每个盒子从内往外有三个部分：
组件的宽度和高度决定了它在屏幕上显示的尺寸，一个组件的宽度和高度就是它 外边框所包围矩形 的宽度和高度，iOS里也是这样的。
我们可以通过 width 和 height 属性给一个组件设置固定的宽度，不过需要注意 这两个属性只能接收数值，不能带单位，这是因为RN要自己去适配安卓和iOS的单位。
在RN里，我们想让一个组件自适应宽高，要分两步。 首先我们要让该组件撑满它的父视图，即如果我们想自适应宽度，就得先让子视图的宽度撑满它父视图的宽度，如果我们想自适应高度，就得先让子视图撑满它父视图的高度，如果我们宽度和高度都想自适应，就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样，通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。
这里再对第一步做个解释， item的 flex: 1 属性可以让item在主轴上撑满它的容器，容器的 alignItems: 'stretch' 属性 + item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。 好像有点不明白是吧，我们再通过一个例子来说得明了点，RN里不是默认主轴为竖向、侧轴为横向嘛，我们就采取这个默认状态来举例子。 在RN里，默认主轴为竖向、侧轴为横向的状态下，如果我们想让某个组件自适应高度，就得首先在它自身上设置 flex: 1 属性，来让它的高度撑满它的父视图；如果我们想让某个组件自适应宽度，就得首先在它父视图身上设置 alignItems: 'stretch' 属性（当然默认就是这个值），这还不够，你还得确保不给这个组件设置 width 属性或者 width 属性的值设为 auto ；如果我们想让一个组件自适应宽高，则两者都得做。 当然，如果我们设置了主轴为横向、侧轴为竖向，其实也是一样的道理，自己捋一下就知道怎么做了。如果还是看不懂的话，没有关系，下面我们会详细谈到这几个属性，等你学了这几个属性，反过头来看这里就明白了。
Flex是Flexible Box的缩写，可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写，就译为弹性盒子布局，用来对一个盒子进行灵活的布局。
在了解Flex布局之前，我们得先了解一下Flex布局里的两对儿 重要的 概念。
采用Flex布局的组件，被称为Flex容器（flex container），简称容器（container）。
这个组件上的子组件，被称为Flex项目（flex item），简称item（项目）。
我们可以把容器和item看做是父视图和子视图的关系， 因此下文中的容器、父组件、父视图将是一样的概念，item、组件、子视图将是一样的概念，组件和视图将是一样的概念。
每个容器都有两根轴，一个是 主轴， 一个是 侧轴 。
容器里众多的 item自动沿主轴进行排列。
一个item在主轴方向上所占据的空间称为 main size ，一个item在侧轴方向上所占据的空间称为 cross size 。
RN里主轴的默认方向为竖向，侧轴为横向。 浏览器里主轴的默认方向为横向，侧轴为竖向，下面我们讲Flex布局的属性时会采用浏览器的状态，学会后对应到RN里，换个主轴方向就可以了。
用在容器上的属性，最常用的有 5个 ， 而且这些属性还都不是从来设置容器自己的布局，而是用来设置容器里item的布局。
flex-direction 属性用来设置主轴的方向，即容器里item自动排列的方向。 在浏览器里，主轴的方向默认为横向，所以 flex-direction 属性的默认值为 row 。
它有4种取值。
justify-content 属性用来设置item在主轴上的对齐方式。
它有5种取值。
align-items 属性用来设置item在侧轴上的对齐方式。
它有5种取值。
默认情况下，一个容器只有一条主轴，所有的item都会沿着这条主轴自动排列下去，但是如果item太多了，一个屏幕长度的主轴根本串儿不下这么多item，那后面的item就会溢出屏幕，而界面还不是 ScrollView ，不能滚动，怎么办呢？
flex-wrap 属性用来设置换行，即当容器主轴上显示不下那么多的item时，我们可以让item换行来显示，并且一旦设置了换行，那么这个容器就不再是一条主轴了，而是会有多条平行的主轴。
它有3种取值。
align-content 属性用来设置多条主轴的对齐方式， 如果项目只有一根轴线，该属性不起作用， 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。
它有6种取值。
用在item上的属性，最常用的有 2个 ， 这些属性都是用来设置item自己的布局。
在第1小节容器的属性，我们已经通过 align-items 属性统一设置了容器里item在侧轴上的对齐方式，但如果其中某个item不想遵循这个对齐方式怎么办呢？我们会常见到这种场景，10个里有8个item是一样的对齐方式，就有1、2个item特立独行，那我们就得用item自己的 align-self 属性来单独给它们设置对齐方式了。
align-self 属性用来设置单个item在侧轴上的对齐方式， 注意是给特立独行的单个item设置哦，而且是侧轴，它会覆盖它容器的 align-items 属性，当然如果不设置这个属性，默认值就为 auto ，即item会默认使用容器的 align-items 属性给它设置的对齐方式。
它有6种取值，除了 auto ，其他都与 align-items 属性完全一致。怎么说呢，item的 align-self 属性似乎是用来造反的，反抗它容器的 align-items 属性。
flex 属性接收一个整数值， flex 属性描述起来太麻烦了，可以自行去搜索加深理解，我这里只列举出它的用途及注意事项。
（1） flex 属性有三个用途
（2）使用 flex 属性需注意
iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 来做布局就行了，它们布局的思路是一样的， 一个组件也同样至少需要四个约束。
当然，它们之间有一个极其细小的差别，那就是：上面提到的“RN里组件自适应宽高分两步”，而iOS里Masonry才不管你什么撑满不撑满呢。
当然，它们之间有一个极其巨大的差别，那就是：iOS里是没有主轴和侧轴之分的，你可以在一个父视图上横向、竖向同时放控件，并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分，我们添加的组件只会沿着主轴排列，不可能同时出现横向和竖向排列，并且布局的时候也只能是沿着主轴布局，不可能同时完成两个方向的布局。
下面我们就通过几个小练习，来对比一下Masonry布局和Flex布局+CSS布局的思路，加深对RN里怎么布局组件的理解。
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
Masonry：
Flex布局+CSS布局：
参考博客：
阮一峰的《Flex布局：语法篇》
阮一峰的《Flex布局：实例篇》
