CSS新手向学习总结

关于BFC

BFC(block formatting context)即块格式上下文,是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
tips：BFC新手向总结
其主要作用：

• 父代管子代.
• 邻居之间的划分界限,可用于用float+div做左右适应的布局.
• 在BFC中竖直上相邻的两个元素margin top与bottom会合并
• 如何让一个元素成为BFC？

1. float不是none
2. overflow不是visible
3. position是fix或者absolute
4. display为inline类属性,table类属性,flex,grid,以及flow-root(盖属性只将元素变为BFC,但仅部分浏览器支持)

堆叠上下文

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

总结:
给一个 HTML 元素定位和 z-index 赋值创建一个层叠上下文，（opacity 值不为 1 的也是相同）。
层叠上下文可以包含在其他层叠上下文中，并且一起创建一个有层级的层叠上下文。
每个层叠上下文完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会 在父层叠上下文中 按顺序进行层叠。

关于图标

css新手可以通过iconfont找需要的图标，并用引用symbol的方式，用svg标签绘制图形。使用帮助

关于响应式开发

通常来讲做移动端页面适配一般有三种方式
tips：新手移动端开发分析

1. 前端方向:移动页面响应式,用媒体查询(media query).针对不同分辨率设备进行不同页面的适配
   做一个简单的nav做一个响应式布局:代码 展示
   缺点:当页面复杂时,浏览器加载会加载大量的其他页面的代码,性能下降.
2. 后端方向:根据访问的user-agent来判断用户的设备来渲染不同的html,这样做的网页有 知乎
3. 后端方向:根据访问的user-agent来判断用户的设备来跳转到不同的域名,这样做的网页有 淘宝, 淘宝触屏版

FLEX布局

• flex布局又叫弹性布局，即display：flex; display：inline-flex;.当其成为flex布局后，它会像float布局那样流动。通常在要兼容ie8及以下用float布局，不需则用flex布局。
• flex布局有：

1. flex-direction：row /row-reverse/column/column-reverse
2. flex-wrap:nowrap/wrap
3. flex-flow=flex-direction+flex-wrap ，即后面直接跟相应的两种属性
4. flex-grow:控制主轴元素是否拉伸
5. flex-shrink:控制主轴元素是否压缩
6. flex-basis:控制元素本身长度
7. flex=flex-grow+flex-shrink+flex-basis，即后面直接跟相应的三种属性
8. order：调换其中的顺序
9. justify-content:space-between/space-around/flex-start/flex-end/center
10. align-items:stretch(默认)/flex-start/flex-end/center
11. align-self：与上相似但对应子元素
12. align-content:多行队列对齐

布局套路

原则：

• 不到万不得已，不要写死 width 和 height
• 尽量用高级语法，如 calc、flex
• 如果是 IE，就全部写死
  公式：
• float：
  儿子全加 float: left （right）
  老子加 .clearfix
• flex：
  老子加 display: flex
  老子加 justify-content: space-between;

rem及移动端rem应用

css中长度单位有很多,比如:px,em,rem,vh,vw,ex,in,pt等.其中rem是根据根元素html的font-size来确定的,所以我们可以通过用js来修改html里的font-size来达到自适应的效果.
tips:移动端rem应用

在用img标签后下方有空隙的解决办法

在div里嵌入img标签时有时会在嵌入图片下方存在空隙,这是什么原因呢?

css:div{ border:1px solid red; width:300px; }
html部分为:

原因是因为img属于内联元素,而内敛元素会以基线对齐,
这里可能会有疑问,这里没有其它内联元素啊?它以什么基线对齐呢?
在img标签前增加一个字符'x'一试便知

加上x后可见图片与img实际上是以x的基线对齐的,在没有x的时候也是以此标准对齐.
所以为了避免它以这种方式对齐,将img改为vetical-align:top/bottom/middle/text-bottom/sub即可.
css:

div{
  border:1px solid red;
  width:300px;

}
img{
  border:1px solid red;
  vertical-align:top;
}

虽然把img改为display:block也可以解决问题,但是这样做可能会有其他副作用.