关于BFC
BFC(block formatting context)即块格式上下文,是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
tips：BFC新手向总结
其主要作用：
- 父代管子代.
- 邻居之间的划分界限,可用于用float+div做左右适应的布局.
- 在BFC中竖直上相邻的两个元素margin top与bottom会合并
- 如何让一个元素成为BFC？
- float不是none
- overflow不是visible
- position是fix或者absolute
- display为inline类属性,table类属性,flex,grid,以及flow-root(盖属性只将元素变为BFC,但仅部分浏览器支持)
堆叠上下文
堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
总结:
给一个 HTML 元素定位和 z-index 赋值创建一个层叠上下文，（opacity 值不为 1 的也是相同）。
层叠上下文可以包含在其他层叠上下文中，并且一起创建一个有层级的层叠上下文。
每个层叠上下文完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会 在父层叠上下文中 按顺序进行层叠。
关于图标
css新手可以通过iconfont找需要的图标，并用引用symbol的方式，用svg标签绘制图形。使用帮助
关于响应式开发
通常来讲做移动端页面适配一般有三种方式
tips：新手移动端开发分析
- 前端方向:移动页面响应式,用媒体查询(media query).针对不同分辨率设备进行不同页面的适配
做一个简单的nav做一个响应式布局:代码 展示
缺点:当页面复杂时,浏览器加载会加载大量的其他页面的代码,性能下降. - 后端方向:根据访问的user-agent来判断用户的设备来渲染不同的html,这样做的网页有 知乎
- 后端方向:根据访问的user-agent来判断用户的设备来跳转到不同的域名,这样做的网页有 淘宝, 淘宝触屏版
FLEX布局
- flex布局又叫弹性布局，即display：flex; display：inline-flex;.当其成为flex布局后，它会像float布局那样流动。通常在要兼容ie8及以下用float布局，不需则用flex布局。
- flex布局有：
- flex-direction：row /row-reverse/column/column-reverse
- flex-wrap:nowrap/wrap
- flex-flow=flex-direction+flex-wrap ，即后面直接跟相应的两种属性
- flex-grow:控制主轴元素是否拉伸
- flex-shrink:控制主轴元素是否压缩
- flex-basis:控制元素本身长度
- flex=flex-grow+flex-shrink+flex-basis，即后面直接跟相应的三种属性
- order：调换其中的顺序
- justify-content:space-between/space-around/flex-start/flex-end/center
- align-items:stretch(默认)/flex-start/flex-end/center
- align-self：与上相似但对应子元素
- 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部分为:
<body>
<div>
<img src='./1.png' alt=''>
</div>
</body>
原因是因为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也可以解决问题,但是这样做可能会有其他副作用.
