css的盒模型包含了content（元素自身）、padding（内边距）、border（边框）及margin（外边距）。如图，浏览器控制台elements的computed可以清晰显示元素盒模型，鼠标多动动就明白了：（蓝色区域表示content元素自身，这里是整个窗口的内容）盒模型有两种：标准模式和怪异模式。在<!DOCTYPE>声明缺失时就会在ie6、ie7、ie8下触发怪异模式标准模式下：盒子总宽度/高度 = content + padding + border + margin，content的width/heigh...
contentpaddingbordermargin 常见问题： W3C盒子下的width height和 IE盒子下的width height?W3C盒子下的width height padding内部的区域,即contentIE盒子下的width height margin内部的区域,即content+padding+border CSS3的解决方案/*以border为盒子界*/ box-sizing: border-box; 原文：http://www.cnblogs.com/WeWeZhang/p/5824364.html
1 CSS盒模型 在以前，程序员们是通过表格来对一个网页进行排版，也就是通过大小不一的表格和表格嵌套来定位排版网页的内容。后来，CSS出现之后，在网页布局中，为了能够使页面中的各个部分合理的进行组织，开发人员们总结出了一套完整的、行之有效的原则和规范，也就是“盒模型”。它是通过使用CSS来定义大小不一的盒子和盒子嵌套来编排网页。 因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。 页面中的所有元素...
一、什么是flex?flex是css3中引入的一种布局方式，可以非常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局.二、怎么使用flex?任何一个容器都可以指定为flex布局1 #box { 2 display:flex; 3 }三、flex的基本术语采用flex布局的元素被称为flex容器 (flex container), 它的子元素即为flex元素 (flex item).flex容器中包含两个相互垂直的轴, 即主轴 (main axis)和副轴 (cross axis).flex元素沿主轴从主轴起点 (main st...
做过前台设置的都知道css存在两种盒模型，W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决于页面上的DOCTYPE的声明。如果页面包含有效的DOCTYPE声明，则以严格模式呈现。如果页面没有DOCTYPE声明或没有有效的DOCTYPE声明，则以兼容模式呈现。下面将一个两种模式的区别，两种呈现模式的主要差别是对元素width...
如果页面包含有效的DOCTYPE声明，则以严格模式呈现。 如果页面没有DOCTYPE声明或没有有效的DOCTYPE声明，则以兼容模式呈现。 下面将一个两种模式的区别，两种呈现模式的主要差别是对元素width和height样式的计算上。如下面的样式 代码如下: { width:180px; height:72px; padding:10px; bording-width:5px; } 在W3C的严格模式下，元素的内容显示的范围是180*72px。内边距和边框在180*72像素的范围之外。所以整个元...
如果页面包含有效的DOCTYPE声明，则以严格模式呈现。 如果页面没有DOCTYPE声明或没有有效的DOCTYPE声明，则以兼容模式呈现。 下面将一个两种模式的区别，两种呈现模式的主要差别是对元素width和height样式的计算上。如下面的样式 代码如下:{ width:180px; height:72px; padding:10px; bording-width:5px; } 在W3C的严格模式下，元素的内容显示的范围是180*72px。内边距和边框在180*72像素的范围之外。所以整个元...
盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成，一个盒子中主要的属性就5个：width、height、padding、border、margin。 下面一一介绍盒子中的区域 width 宽度，CSS中width指的是内容的宽度，而不是盒子的宽度，CSS中height指的是内容的高度，而不是盒子的高度 width:200px; height: 200px; padding:50px; margin: 50px; border: 5px solid red; background-color: green;上面的代码，设置的宽度为200px，...
文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + bo...
盒子是CSS中的基础概念，我们需要使用它来配置元素的外观以及文档的整体布局。 1. 为元素应用内边距 应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用 padding 简写属性在一条声明中设置所有的值。如果使用百分数值指定内边距，百分数总是根包含块的宽度相关，高度不考虑在内。下面代码展示了如何为元素应用内边距。DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><t...
问题表述： 那天晚上一个同学给我发来一个问题，原型大概是“一个maindiv嵌套了一个div.class="headr1" 的div 和一个div.class="header2" 的这样两个 div,他给maindiv 设定了background="black" header1设定background=“red” 。header2 设定background=“blue” 同时给heder1 设定margin-top:10px; 他预想的是内层 div.heder1 的上边距 maindiv 上边有10px的距离 但事实上 出现一个问题 ，内层div 并没有出现他所预想的那种效...
问题表述： 那天晚上一个同学给我发来一个问题，原型大概是“一个maindiv嵌套了一个div.class="headr1" 的div 和一个div.class="header2" 的这样两个 div,他给maindiv 设定了background="black" header1设定background=“red” 。header2 设定background=“blue” 同时给heder1 设定margin-top:10px; 他预想的是内层 div.heder1 的上边距 maindiv 上边有10px的距离 但事实上 出现一个问题 ，内层div 并没有出现他所预想的那种效...
我有一本CSS教材，上面有一个例子用来解释发生外边距重叠的问题： 效果： aaaaaaa 书上的解释是： 出现这种情况（外边距叠加）是由于具有块级子元素的元素，在计算其高度的方式造成的。 如果元素没有垂直边框或内边距，那么它的 高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部外边距就突出到容器元素的外边。有一个简单的解决方案：通过添加一个垂直边框或内边距...
文章来源：我爱猫猫技术博客 地址： http://www.52maomao.info 关于IE6盒模型与其他浏览器是否不同，我不敢轻易的下结论，但是似乎可以有一些佐证来证明IE6的盒模型与其他浏览是有差别的。 例如我们今天要讲到的IE6定位盒模型的偏差问题。 CSS属性中的position:absolute;和position:relative;是两个经常被用来进行定位布局的属性。当我们在父级元素中使用了position:relative;将它设置为定位树之后，对子元素使用po...
浏览器版本多了，也是一个累，特别是ie家族的。 网上搜罗了一大堆，发现说的和我看到的不一样啊，结果才发现原来是对方表述有问题，省略了几个字就产生了歧义了。 按照网上说的ie6对盒模型解释不符合W3C标准，其实应该是ie6在怪异模式（quirks mode）下对盒模型解释不符合W3C默认标准，而ie6在标准模式模式下对盒模型解释符合W3C默认标准。 这个就涉及到怎么触发ie的工作模式了，主要还是通过 doctype 定义的。下...