1，什么是BFC BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干，2，生成BFC 下面的方法可以创建一个新的BFC （1）浮动元素，float: left | right （...
@mixin df {display: -webkit-flex;display: -moz-flex;display: flex;
}@mixin df-ai {-webkit-align-items: center;-moz-align-items: center;align-items: center;
}@mixin df-ai-fs {-webkit-align-items: flex-start;-moz-align-items: flex-start;align-items: flex-start;
}@mixin df-ai-fe {-webkit-align-items: flex-end;-moz-align-items: flex-end;align-items: flex-end;
}@mixin df-jc {-webkit-justify-content: ce...
在设计每个页面的时候，我们先要想好页面的整体框架后再写，这样思路清晰，页面也整齐，不容易出错且容易找到出现的问题。一般我们是将页面分为上、中、下三个大容器里面。再往容器里面添加小块。小块与小块、小块与大块之间的关系就要用到浮动与定位的组合排版。 上面的布局是一个思路的例子，布局调整的时候，我们应该先按先后顺序完成上、中、下三部分，还应该用border描出边框线帮助我们定位，做好了之后再取消掉边框做下个...
基于浮动的布局 基于浮动的布局是最容易使用，也是最可靠的，只需要设置元素的宽度，然后设置为左或者右浮动即可。1.两列浮动布局假设页面总的宽度920px，两个元素间距20px。（display:inline 防止IE双外边距浮动产生的bug）；由于元素是浮动的，将不再文档流中占据空间，将父节点 overflow:hidden;css代码：.right {width: 650px;padding-left: 10px;float: right;display: inline;
}.left {width: 230px;float: left;display: in...
css布局主要是position,float以及margin等属性实现本文主要介绍几种常见的布局：三列布局，等高布局以及水平垂直居中布局。1 三列布局1.1 左右列固定宽度，中间列宽度自适应方法1：absolute+margin1<div id="left">left</div>2<div id="center">center</div>3<div id="right">right</div> 1#left,#right{2 width:200px;3 postion:absolute;4 top:0; /*注意不能少*/ 5 background-color:red;6 }7#left{left:0;...
在网页中，元素有三种布局模型：1、流动模型（Flow） 默认的2、浮动模型 (Float)3、层模型（Layer） 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占...
CSS样式position的一个小实例代码如下： 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS样式position的一个小实例：z方向三层布局-成功志(www.ok12.net)</title> </head> <body> <div sty...
columns属性columns属性是一个简写属性column-count属性:定义列的数量column-width属性:定义列的宽度 column-count属性用于设置列的数量或者允许的最大列数auto:默认值，用于表示列的数量由其他css属性决定number:必须是正整数，用于表示定义列的数量 column-width 属性用于设置列的宽度或者列的最小宽度auto:默认值，用于表示列的宽度由其他css属性决定length:必须是正整数，用于表示定义列的宽度 列的间距column-gap 属性用于设置...
一、双飞翼布局 经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染； 3、允许任意列的高度最高；4、要求只用一个额外的DIV标签； 5、要求用最简单的CSS、最少的HACK语句； 在不增加额外标签的情况...
CSS命名规范一．文件命名规范
全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页 眉：header内 容：content容 器：container页 脚：footer
版 权：copyright 导 航：menu主导航：mainMenu子导航：subMenu
标 志：logo标 语：banner标 题：title侧边栏：sidebar
图 标：Icon注 释：note搜 索：search按 钮：btn登 录：login链 接...
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素首先谈谈人们...
1、display block块级元素（div、p等） inline 行内元素（a、span等） 常见的例子：把li修改成inline ，制作成水平菜单2、max-width 来适应不同浏览器窗口大小，IE7+都支持这一属性3、box-sizing:border-box 将元素设置这一属性时，元素的内边距和边框不会影响其内容宽度，再也不需要计算内容宽度的值了。 缺点就是不同浏览器内核要分别设置，并只支持IE8+4、position 5、浮动与display:inline-block 的区别与用法 教程见...
1、static（静态定位）： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。2、relative（相对定位）： 定位为relative的元素脱离正常的文本流，但其在文本流中的位置依然存在，所以它本身并没有脱离文档流。 通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。<style type="text/css">.static1{height:80px...
单行一列以下是引用片段：body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列以下是引用片段：body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}三行一列以下是引用片段：body{margin:0px;...
首先两者都是两边宽度固定，中间宽度自适应，并且中间盒子(主题内容)放在最前面，以便优先渲染。实现方案：都使用浮动来实现。圣杯布局实现如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> .box{ padding: 0 100px; height: 400px; } .center, .left, .right{ float: left; heigh...
为什么计算宽度