小马把写HTML理解为盒子的嵌套和堆叠，一切都是盒子。 CSS定位和浮动小马觉得是前台比较难理解的部分。这里有一个总结。 HTML盒子模型不多说，直接上一段代码(参考来自这里):div { width:400 px；高度:100px边框:6px solid # 949599边距:20px填充:20px}效果(图片来自这里):这里很有意思，实际占用的空间是:宽度= margin-right+border-right+padding-right+宽度+padding-left+margin-left height = margin-top+border-top+paddi。ng-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也是红色的，直接影响可见区域的效果。 综上，内外边距都是透明的。 可以来这里体验小玩意，感受一下。 所以我们在编写HTML的时候，经常做的第一步就是重置基本元素，让它们可以到达顶端。 例如:body，div，dt，dl，DD，ul，Li，h1，，，，，h6，input，form，a，p，textarea { margin:0；填充:0；字体系列:“Helvetica新”；}块级和行内元素块级元素在浏览器中显示时，通常以新行开始(和结束)。 示例:< h1 & gt，& ltp & gt，& ltul & gt，& lt表& gt，& ltdiv & gt内联元素在显示时通常不会从新行开始。 示例:< b & gt，& lttd & gt，& lta & gt，& ltimg & gt，& ltspan & gt& ltdiv & gt文档的区域被定义，并且块级 CSS位置和浮动CSS位置属性:将元素放置在静态、相对、绝对或固定的位置。 非分离的文档流是指定位前的原始位置仍然不占用文档空间，而分离的文档流不占用参考文件空间。 不走，就相对原位置定位；如果您离开，您将永远不会相对于父对象进行定位。 相对起始位置不与文档流分离(相对于起始位置左上角的点)，绝对起始位置与文档流分离(相对于父元素左上角的点)。 Float与文档流是分开的，但是浮动元素是紧挨着的，当它们满了的时候就下去了。没有线条概念(参考下图中的“浮动”)。 所以，clear:both常用于一个div(浮动与否)；来清理元素周围的浮动，以便后面的新元素可以正常换行。 clear属性的值可以是left、right、both或none，它指示框的哪一侧不应靠近浮动框。 强制换行 无论是否与文档流分离，定位或浮动元素都会覆盖其他元素。 以下图片来自w3c。 在图1中，盒子1的原始位置没有被占用，而在图2中，盒子1覆盖了非浮动的盒子2，这意味着浮动是一个接一个的，没有线的概念。这里，clearing div是非浮动的，clear的神奇作用就是打开原来的非浮动容器div。浮动容器也是一种治疗方案，css的传承也是一件好玩的事情，哈哈。 HTML iframe相当于打开一个新的浏览器打开src源内容。 示例:注意src属性。 & lthtml & gt& lt框架集cols="20%，80% " & gt；& ltframe src = "/example/html/frame _ a . html " & gt；& ltframe src = "/example/html/link . html # C10 " & gt；& lt/frameset & gt；& lt/html & gt；& ltiframe src = " demo _ iframe . htm " width = " 200 " height = " 200 " >& lt/iframe & gt；& ltiframe src = " demo _ iframe . htm " name = " iframe _ a " & gt；& lt/iframe & gt；& ltp & gt& lta href = " http://www . w3 school . com . cn " target = " iframe _ a " & gt；w3school . com . cn & lt；/a & gt；& lt/p & gt；前端自适应实现方法水平有限，Pony只抛砖引玉不深究，(见文章) 1.使用meta标记:viewport类似:< meta name = " viewport " content = " width = device-width，user-scalable=no，initial-scale=1.0，maximum-scale=1.0，minimum-scale = 1.0 "/& gt；2.使用css3 unit rem设置字体大小。如果想避免在Internet Explorer中无法调整文本的问题，很多开发者都使用em单位而不是像素。 W3C推荐使用em尺寸单位。 Em等于当前字体大小。 如果一个元素的字体大小是16像素，那么对于该元素，1em等于16像素。 设置字体大小时，em的值相对于父元素的字体大小而变化。 浏览器中默认的文本大小是16像素。 所以1em的默认大小是16像素。 可以使用下面的公式将像素转换为EM: pixels/16 = EM(注意:16等于父元素的默认字体大小，假设父元素的字体大小为20px，那么公式需要改为:pixels/20=em)。rem表示的像素由手机可变像素部分的rem width根据html的字体宽度控制(默认1rem=16px)。 默认正文字体的像素不同。 html，body { font-size:100%；/* 1 rem = 16px */} . f3m { font-size:. 3 rem；宽度:0.3雷姆；}3.使用css3媒体查询媒体查询的功能是为不同的媒体设置不同的css样式。这里的“媒体”包括页面大小、设施屏幕大小等。 比如浏览器窗口小于500px，背景会是浅蓝色:@ media only screenand(max-width:500 px){ body { background-color:light blue；}}4.css的百分比值是相对于父元素的。 机身默认宽度为屏幕宽度(PC指浏览器宽度)。可以用百分比来定位子元素(或者指定大小)。这仅适用于布局简单的页面，但很难实现复杂的页面。 使用百分比布局时，要注意以下几点:1。你设置的百分比总是说他的父母，而不是浏览器的宽度。 2.当您设置宽度:100%时，请避免设置边距和填充。 因为div的实际宽度是宽度+边距+填充，所以它会比外部框架大。 3.如果每行有多个div，尽量不要使它们的总宽度正好等于100%。 原因是当像素数为小数时，浏览器通过四舍五入来计算。 例如，如果您的外框宽度为11像素，内部两个div的带宽设置为50%，则它将被计算为5.5px浏览器舍入算法将得到6px，因此总宽度将变为12px，这超过了外框的总宽度。 所以我们在设置的时候尽量不要把总宽度设为100%。 4.设置整个网站的最小宽度。为了保证客户在任何浏览器窗口都能正常浏览，避免浏览器窗口极小，可以写min-width保证页面不变形。当浏览器窗口非常小时，会出现一个水平滚动条。 但是IE6不支持这个属性，所以可以用js来控制IE6。 设计稿的页面尺寸一般为1024 * 768。 5.前台框架引导等。