当前位置：首页 > 资讯 > 系统环境 > windows

html盒子模型和CSS难点总结

时间：2020-11-08 06:27 作者：小一过河来源：阅读：502
扫一扫，手机访问

摘要：小马把写HTML了解为就是盒子的嵌套和堆叠，一切皆盒子。CSS定位和浮动小马觉得是前台里算难了解的一部分吧，在此总结复盘下。HTML盒子模型话不多说，直接上一段代码（参考来自这里）：div { width: 400px; height: 100px; border: 6px solid #94

小马把写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",;}

块级和内联元素

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

实例: <h1>, <p>, <ul>, <table>，<div>

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

实例: <b>, <td>, <a>, <img>，<span>

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

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

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

CSS position 和浮动

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

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

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

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

以下图片来w3c。