5、BFC
定义:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
作用:
利用BFC避免margin重叠。
自适应两栏布局
清除浮动
创建:
- 1、float的值不是none。
- 2、position的值不是static或者relative。
- 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- 4、overflow的值不是visible
布局规则:
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
6、清除浮动的方法
①给设置了浮动的元素的父级加高。
②给设置了浮动的元素的父级设置overflow:hidden。如果需要兼容IE,在添加一个zoom:1
③给需要清除浮动的元素设置clear:both;
④在最后一个子元素的后面加一个空的div,给它样式属性 clear:both(不推荐)
⑤伪类清除:
.clearfix:after{
content:"";
clear:both;
display:block;
}
.clearfix{zoom:1}
7、层叠上下文
-
-
-
元素提升为一个比较特殊的图层,在三维空间中 (z轴) 高出普通元素一等。 层叠等级:层叠上下文在z轴上的排序 - 在同一层叠上下文中,层叠等级才有意义 - z-index的优先级最高 - 触发条件 - 根层叠上下文(`html`) - `position` - css3属性 - `flex` - `transform` - `opacity` - `filter` - `will-change` - `-webkit-overflow-scrolling
-
8、常见页面布局
-
静态布局
最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优:采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
缺:但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
流式布局
流式布局也叫百分比布局。随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与自适应布局相补。
优:元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化。
缺:屏幕尺度跨度过大的情况下,页面不能正常显示。
弹性布局
弹性布局是CSS3引入的强大的布局方式,弹性盒模型:display:flex;
优:简单、方便、快速(更适用于移动端)
缺:CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
响应式布局
采用自适应布局和流式布局的综合方式,为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。
优:可以根据页面不同的大小改变样式
缺:
9、CSS预处理,后处理
CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件
为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作
分类:Sass(SCSS)、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS
优点:
提供CSS层缺失的样式层复用机制
减少冗余代码
提高样式代码的可维护性、
缺点:采用特殊语法,框架耦合度高,复杂度高
实现原理:
取到 DSL 源代码 的 分析树
将含有 动态生成 相关节点的 分析树 转换为 静态分析树
将 静态分析树 转换为 CSS 的 静态分析树
将 CSS 的 静态分析树 转换为 CSS 代码
后处理
CSS后处理器:堆css进行处理,并最终生成css的预处理器,属于广义上的css预处理器,最典型的就是css压缩工具(clean-css),流行的Autoprefixer,以Clean I Use上的浏览器支持数据为基础,自动处理兼容性问题
优点:使用 CSS 语法,容易进行模块化,贴近 CSS 的未来标准
缺点:逻辑处理能力有限
实现原理:
①将 源代码 做为 CSS 解析,获得 分析树
②对 CSS 的 分析树 进行 后处理
③将 CSS 的 分析树 转换为 CSS 代码
10、CSS3的新特性
**新增一:**rgba(颜色的透明度);
**新增二:**弹性布局flex(上面第二题);
**新增三:**媒体查询;
**新增四:**渐变色;
**新增五:**动画animation,使用@keyframes定义,使用的元素animation:名字 时间;
11、display有哪些值
display:none 此元素不被显示。
display:block 此元素显示为块级元素,支持宽高,独占一行。
display:inline 此元素为内联元素,不支持宽高,不独占一行。
display:table 此元素作为块级表格来显示。
display:flex 此元素为弹性盒模型
display:list-item此元素会作为列表显示