html多个不重叠盒子模型,html盒子模型和CSS难点总结

小马把写HTML理解为就是盒子的嵌套和堆叠，一切皆盒子。CSS定位和浮动小马觉得是前端里算难理解的一部分吧，在此总结复盘下。

HTML盒子模型

话不多说，直接上一段代码(参考来自这里)：div { width: 400px;

height: 100px;

border: 6px solid #949599;

margin: 20px;

padding: 20px;

}

效果(图片来自这里)：

这里非常有趣，实际所占的空间是：

width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

height = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

也就是：

Width: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20

Height: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20

为什么呢？这就是盒子模型的概念。特别值得注意的是padding的白色背景，是的，它的空间是和内容空间一样的，也就是如果内容部分是红色背景，那么padding也是红色的，直接影响了可见区域的效果。总结起来就是，内外边距都是透明的。可以来这里体验小工具感受一下。

因此我们写HTML时候经常做的第一步工作就是先把基本的元素进行重置，使其能够到顶部。比如：body,div,dt,dl,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{  margin:0;padding:0;font-family:"Helvetica Neue",;}

块级和内联元素

块级元素在浏览器显示时，通常会以新行来开始(和结束)。

实例:

,

,

• ,

内联元素在显示时通常不会以新行开始。

实例: ,

, , ，

定义了文档的区域，块级 (block-level)

用来组合文档中的行内元素， 内联元素(inline)

布局的时候注意：ul,ol,dl等的使用可以事半功倍。

CSS position  和浮动

CSS position 属性:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

脱不脱离文档流是 对定位前原本位置还占不占文档空间而言，脱离文档流则不占原文档空间。不脱离则相对原位置定位，脱离则相对于父级元素来定位。相对定位原位置不脱离文档流(相对于原位置左上角的点)，绝对定位原位置脱离文档流(相对于父元素的左上角的点)。

float是脱离文档流的，但浮动的元素是一个接一个紧挨着的且满了就往下，没有行概念(参考下图“浮动”)。因此经常对某个div(浮动或不浮动)使用clear:both; 来清除元素周边的浮动，使后面的新元素正常换行。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。强制换行。

不管脱不脱离文档流，定位或者浮动的元素都是会对其他元素造成覆盖的。

以下图片来w3c。

图1中框1原位置不占位，图2中框1覆盖了不浮动的框2

说明浮动就是一个挨一个，没有行概念

这里清理div是非浮动的，clear的妙用是撑开了原来不浮动的容器div

对容器进行浮动也是一种解决方案

还有css的继承性也是一个很好玩的东西，哈哈。

HTML框架iframe

等于新开一个浏览器打开src源内容。(内嵌访问其他网页内容)例子：注意src属性。

前端自适应实现方法

水平有限，小马这里只抛砖引玉不做深究，(参考文章)。

1、使用meta标签：viewport类似：

2、使用css3单位rem

使用 em 来设置字体大小

如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

(注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em)

手机的可变像素部分用rem  宽度用百分比

以html的字体宽度(默认1rem=16px)为基础来控制rem代表的像素，支持自响应。body默认字体的像素不同则像素也不同。

html, body {

font-size: 100%;

/*1rem=16px*/

}

.f3m {

font-size:.3rem;

width:0.3rem;

}

3、使用css3媒体查询

媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。

例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {

body {

background-color: lightblue;

}

}

4、使用百分比

css的百分比值是相对于父级元素的。body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

在使用百分比布局的时候需要注意的几点：

1.你所设置的百分比，是针对他的父级元素来说的，而不是浏览器的宽度。

2.当你设置了width：100%时，请避免设置margin和padding。因为你的div实际宽度将是width+margin+padding 从而大于外框。

3.每一行中，如果存在多个div，尽量不要让他们的总宽度刚好等于100%。

原因是，当像素数出现小数时，浏览器是采取四舍五入的方式计算的。比如你的外框是11像素宽，里边的两个div的宽带均设置为50%，则计算为5.5px,浏览器四舍五入的算法得出6px，所以总宽度将变成12px，超出了外框的总宽度。所以我们在设置的时候尽量不要把总宽度设置成100%。

4.为整个网站设置最小宽度，为了保证用户在任何浏览器窗口中都能正常浏览，避免那种极端小的浏览器窗口，你可以写上min-width 以保证页面不变形，在浏览器窗口极小时出现横向滚动条。但是IE6是不支持此属性的，可以针对IE6使用js控制一下。

设计稿的网页大小一般会是1024 * 768。

5、前端框架  Bootstrap等