1.W3C标准盒子模型外盒尺寸计算（元素空间尺寸）element空间高度＝内容高度＋内距＋边框＋外距element空间宽度＝内容宽度＋内距＋边框＋外距内盒尺寸计算（元素大小）element高度＝内容高度＋内距＋边框（height为内容高度）element宽度＝内容宽度＋内距＋边框（width为内容宽度）2.IE传统下盒子模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）外盒尺寸计算（元素空间尺寸）element空间高度＝内容高度＋外距（height包含了...
盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。 ...
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 一、使用以及介绍：1、要实现水平或者垂直切分，必须先满足以下要求 i. display : box必须用在对应的父窗口，比如div.parent>div.panel*3 这种格局， parent 必须先先定义此属性 ii. .panel的元素定义box-flex，来实现按比例切分。如下图：就是将三个div水...
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样 标准的css盒子模型宽高就是内容区宽高； 低端IE css盒子模型宽高 内边距﹢边界﹢内容区；原文：http://www.cnblogs.com/love-sea520/p/5903442.html
1.0 前言网页布局（layout）是CSS的一个重点应用。经典布局类型：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，成为了现下最流行的布局方式。 Flex布局是什...
当下各种手机，平板尺寸不一，如果盒模型只能固定尺寸，不能随意压缩，将不能很好的迎合这个时代。所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model)。 弹性盒模型可以水平布局，可以垂直布局，还可以调换顺序，可以设置不等的百分比等。1.弹性盒子column分栏 1<h2>1.弹性盒子column分栏</h2> 2<div class="freebox"> 3<img src="image/moon.jpg" alt="天宫二号"/> 9月15日晚10点04分，八月十五中秋节夜晚，甘肃酒...
盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置宽高width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */...
1.css盒子模型 组成：content->padding->border->margin 物品 填充物 包装盒 盒子跟盒子之间的距离 content：内容区域 width height组成 padding：内边距 只写一个值：30px 表示上下左右 写两个：30px 40px（上下，左右） 写四个值：30px 40px 50px 60px(上，右，下，左) 单一样式只能写一个值： padding—left：左边距 padding-right：右边距 padding-top：上边距 padding-bottom：下边距 margin：（外边距） 只写一个值：...
盒子模型（Flexible Box） 属性属性说明CSSbox-align指定如何对齐一个框的子元素3box-direction指定在哪个方向，显示一个框的子元素3box-flex指定一个框的子元素是否是灵活的或固定的大小3box-flex-group指派灵活的元素到Flex组3box-lines每当它在父框的空间运行时，是否指定将再上一个新的行列3box-ordinal-group指定一个框的子元素的显示顺序3box-orient指定一个框的子元素是否在水平或垂直方向应铺设3box-pack指定横向盒在垂直框...
box-flex属性（和谐版）有道桌面词典显示，”flex”一词中文有“收缩”之意。不过，从此属性实际上产生的效果来看，无论怎样用“收缩”一词解释都显得很牵强。所以，这里，直接抛开字面意思，我们可以将”box-flex”理解为”房子-分配”。box为“盒子”的意思，我们可以理解为当下价格巨高的“房子”，”flex”指兄弟几个“分配房子”。举个更实际点的例子：马林大叔省吃俭用一辈子，终于在上海郊外买了间150平米的商品房。后来，马...
常见的块级元素和行内元素一、块级元素 1、块级元素的特点：（1）、默认显示在父标签的左上角.（2）、块级元素默认占满一行（沾满整个文档流）。2、常见的块级元素：<p>、<h1-h6>、<ulli>、<olli>、<div>、<tabl>、<hr>二、行内元素（内联元素） 1、行内元素的特点：（1）、大小受到文字区域的影响，不受到width和height的影响。（2）、行内元素不会单独占满一行。2、常见的行内元素：<a>、<pan> 、<img> 、<input>三、块级元素...
1. 引言从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。第一类——文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值，这些东西在《css知多少（4）——解读浏览器默认样式》那一节已经说过了。另外还有一个重点，就是web端最流行的字体库fontAwesome，关于它我...
利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都是经验来的! 盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、cont...
一、摘要 总结前端部分css选择器、css继承关系、css盒子模型等相关知识，并对容易出错的地方进行分析说明。二、原因 在开发前端页面时如果对css选择器、继承关系，层叠，以及padding、margin区别和浮动问题理解不到位，会导致不知道什么时候该用哪种方法来处理问题。此文档是针对这些问题进行说明。以下是对相关知识点的总结与分析：三、选择器1、基本选择器（1）* 通配符选择器 代表所有元素 例子： *{ margin：0; padding:0;...
CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内...