css进阶专题

CSS 学习思路
宽度与高度（文档流）
堆叠上下文
icon 全解
移动端页面（响应式）
Flex 布局
布局套路
为什么这么多人讲不清楚 BFC
动态 REM
表单美化
Bootstrap 的使用方法就是复制粘贴
IFC（BFC的兄弟）
课程中可能会涉及部分 JS 知识，但不会很多，也不会很难。
不包含 的内容有：IE 兼容性

第一个专题Flex布局

第一个问题在没有flex布局之前，我们时如何布局的？
//不管是怎样的形式，以前的布局都离不开一下五种形式

• normal flow （正常流，也叫文档流）
• float + clear
• position relative + absolute （也就是绝对定位）
• display inline-block（利用元素的display属性）
• 负margin

什么时flex布局

• 块元素布局侧重垂直方向，行内元素布局侧重横向，而flex布局和方向没有关系
• flex布局可以实现空间自动分配，自动对齐felxible灵活，弹性
• flex 适合用于简单的线性布局，更复杂的布局要交给grid布局（可惜这种布局要明年才发布）
  //什么时简单的线性布局呢？就是整个页面的布局的大致方向时横向或者纵向

flex最重要的顺序几个属性，一个时主轴侧轴，主轴侧轴各自的起始点~_{不过这些都不太重要，最重要的属性时contain，和item，也就是父容器和子容器，因为我门以前布局都会知道，所谓的布局就是一个大容器里面放的子元素排放的顺序}所以flex布局就是抓住了这个核心，协调好contain和iteam之间的关系就可以很好地布局了

flex-dirction属性，可以选择rown 让子元素item像行内元素那样横向布局，如果加多一个reverse就是横向反响布局也就是rown-reverse。有横向自然有纵向，那就是colum，他可以让子元素像块元素那样纵向布局，而且也有reverse让纵向变成倒过来的纵向

• 对于flex布局来说宽度高度时没有意义的，因为即使你父容器的宽高时100，纵横各自容纳的时5个宽高20的子元素，在你增加一个的时候，也就是纵横各自变成六个的时候，他们的宽高会自适应地变成100/6的宽高，所以对于flex布局来说，宽高的设定时没有意义的
• 那么这样的设定不符合我们的直觉啊，而且在真实的工作中，意外的布局需求总是比较多，flex想要更灵活必须满足我们之前的开发需求啊~
• 所以flex出现了，wrap自适应属性，也就是在设置纵横文档流布局（flex-dirction）的同时，多增加一个属性（flex-wrap）来让flex布局更加灵活，这个属性可以让5个子元素保持20宽，让父容器横向布满，当增加一个子元素，也就是6个子元素的时候，不会改变宽度，而是换行。当然这个flex-wrap纵横都是可以的
• 总结一下父容器可以用的属性
  1.flex-direction方向
  2.flex-wrap 换行
  3.flex-flow 上面两个简写
  4.justify-content 主轴方向对齐方式
  5.align-items 侧轴对齐方式
  6.align-content 多行/列内容对齐方式（这个用的比较少）
• 为什么flex布局属性没有xy之分呢，因为他的主轴时可以变的，可以是纵向也可以是横向，只要其中一个变成了主轴，那么自然另外一个就变成了测轴。那么怎么来确定谁是主轴呢？答案就是看flex-direction的属性，他是横向就是横向，他是纵向就是纵向
  //设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

专题2BFC问题

• BFC时没有定义的，他只有特征，没有人能解释什么时BFC就像曾经美国有一个大法官说的名言，我不知道如何定义社情，但是只要我看见，我就能知道那就是社情

• BFC的最大的特性就是：子容器里面的元素在怎么折腾业影响不了外面的元素

• BFC的第一个特性，就是父亲管住儿子，父容器可以把浮动的子元素包裹起来
  //比如说一个父容器包裹子容器，子容器浮动了，按照css的规则，那么i他就是脱离文档流了，那么父容器的边框，是保不住子容器的，根据BFC官方说法，可以有四种方法让父容器重新管上子容器，
  1.父容器也浮动
  2.父容器定位
  3.父容器变成非block属性的时候，比如inline-block
  4.父容器的overflow时候不为visible，而是其他属性的
  -//MDN上有更加详尽的描述一个块格式化上下文由以下之一创建：
  根元素或其它包含它的元素
  浮动元素 (元素的 float 不是 none)
  绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  内联块 (元素具有 display: inline-block)
  表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  具有overflow 且值不是 visible 的块元素，
  display: flow-root
  column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
  //父容器当有用上列属性的其中一项的时候，父容器就拥有了可以包裹浮动的子元素的能力

• BFC的存在产生了一个很大的bug，不正交，原本我只是想让一个元素拥有BFC而不是让他变成浮动，定位，inline-block。。。。这不是我想要的，我只是想要BFC而已，行不行？
  //行，css3最新除了一个属性，display：flow-root；当一个元素拥有这个属性的时候就会马上拥有BFC特性，也就是内部元素在怎么折腾，也不会影响外面的一丁点效果。而且没有任何副作用，不过他是最新出的css特性很多浏览器还不支持

• 我们来重新定义一下BFC，所谓的BFC就是一个新的块格式上下文，首先他是一个块格式上下文，然后他是一个新的，也就是区别于外面旧的块格式上下文，也就是说BFC里面的元素任何的操作都不会影响到外面的上下文。就像梵蒂冈和意大利的关系，国中之国。他的意义就在于，协调页面的正常渲染。他的出现是一种无奈，因为css这门语言当初设计不严谨，后来普及之后，改的成本太大，所以导致css不正交，不正交就意味着元素之间的属性互相影响，所以才出现了BFC就是不要再影响我了，让我好好渲染页面
  //什么是块格式上下文：
  浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文/

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并/

在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）/

• 一句话：快容器有自己的格式上下文，如果符合BFC条件的快容器就会生成新的块格式上下文，也就是说当一个页面中出现多个块格式上下文区域，这些新出现的上下文区域相对于第一个格式上下文区域来说都是新的，都是BFC
• bfc由2个特性，父亲管住儿子，兄弟划清界线
• BFC影响的时元素的宽高，形成一个新的BFC，BFC内部宽高就要重新算，但他的子元素不影响，文档流时排列顺序，所以BFC和文档流没有关系
• BFC有时候会起到一定的清除浮动效果，但是他不是清除浮动
• 目前来说要启动BFC都会附带副作用，现在很多浏览器还不支持display：flow-root；
• BFc已经时时代的淘汰品，存在意义不大，因为除了flex
• bfc的作用
  用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动）
  用 float + div 做左右自适应布局

专题3布局的套路，学会套路就能系所有页面，因为css没有逻辑，只有经验~实战为主

• 原则一，要兼容ie8，用浮动布局
• 不用兼容就用flex布局
• 不要写死宽度高度
• 尽量使用高级语法
• 如果要兼容ie'全部写死，以上规则全部不用遵守~万恶的ie能做出来就不错了