对BFC规范的理解？
BFC，块级格式化上下文，一个创建了新的 BFC 的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。
CSS 盒子模型(Box Model)
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- 标准
w3c盒子模型
范围包括margin、border、padding、content，width=content - ie 盒子模型
范围包括margin、border、padding、content，width=content+padding+border - 解决
IE8及更早版本不兼容问题可以在HTML页面声明<!DOCTYPE html>即可
流式布局和响应式布局
-
静态布局即传统
Web设计
对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。 -
自适应布局
分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 -
流式布局
页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。] -
响应式布局
页面元素宽度随着窗口调整而自动适配。每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。 -
左侧固定，右侧自适应
<style type="text/css">
.left{float:left;width:100px;height:50px;}
.right{margin-left:100px;width:auto;height:100px;}
.left{float: left;width:200px;}
.right{overflow: hidden;}
.left{position:absolute;left:0;top:0;width:100px;height:50px;}
.right{margin-left:100px;height:100px;}
.content{display: table;}
.left{display:table-cell;width:200px;}
.right{display:table-cell;}
</style>
- 左侧、右侧固定，中间自适应
<style type="text/css">
.main{margin:0 200px; overflow: hidden;}
.left{position:absolute; top:0; left: 0;width:200px;}
.right{position:absolute;top:0; right:0; width:200px;}
.main{position:absolute; top:0; left:200px; right:200px;}
.left{float:left;width:200px;}
.right{float:right;width:200px;}
</style>
<body>
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</body>
less，sass
-
less语法：- 注释：
// - 变量：
@bgc: #daa520; - 混入
.header { padding: 20px; .nav; .box; }- 函数
.br(@w, @c) { border: @w solid @c; color: @c; background-color: @c; }- 计算、嵌套
- 引入外部文件：
@import "var";
- 注释：
-
less，sass区别：- 编译环境不同，
less需要引入less.js处理less代码输出css到浏览器，sass的安装需要ruby环境，在服务端处理 - 变量符不同，
less是@，sass是$ - 引入外部
css文件不同，都是@import，sass文件名应以_打头 -
sass支持条件语句，可以使用if、for循环 - 工具库不同，
sass有工具库Compass，less有UI组件库bootstrap
- 编译环境不同，
网友评论