vlambda博客
学习文章列表

这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。

这12个知识点是我个人认为的，下面我们就来看看这12个知识点。

        在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。

        相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么 样。注意 relative 移动后的元素在原来的位置仍占据空间。

        设置为 absolute 的元素，如果它的 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。

        位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。注意设置 fixed 属性的元素在标准流中不占位置。

        为什么要清除浮动，父元素高度塌陷解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷

        给父级div定义 高度原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。优点：代码简洁缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）

    使用空元素，如<div class="clear"></div> (.clear{clear:both})原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。优点：浏览器支持好缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。（不推荐使用）

        让父级div 也一并浮起来这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用

        父级div定义 display:table原理：将div属性强制变成表格优点：不解缺点：会产生新的未知问题。（不推荐使用）

        父元素设置 overflow：hidden、auto；原理：这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1）优点：代码简介，不存在结构和语义化问题缺点：无法显示需要溢出的元素（亦不太推荐使用）

父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类）缺点：代码不是非常简洁（极力推荐使用）

经益求精写法

        BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参 与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

        BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值。

• BFC 的区域不会与浮动盒子重叠（清除浮动原理）。

• 计算 BFC 的高度时，浮动元素也参与计算。
  

• 根元素

• float 属性不为 none

• position 为 absolute 或 fixed

• display 为 inline-block， table-cell， table-caption， flex， inline-flex

• overflow 不为 visible

        设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和paddingbox-sizing属性可以为三个值之一：

• content-box，默认值，只计算内容的宽度，border和padding不计算入width之内

• padding-box，padding计算入宽度内

• border-box，border和padding计算入宽度之内

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。

        有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)link和@import的区别：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• link支持使用Javascript控制DOM去改变样式；而@import不支持。

流式布局使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

响应式开发利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

• 超小屏幕(移动设备) 768px 以下

• 小屏设备 768px-992px

• 中等屏幕 992px-1200px

• 宽屏设备 1200px 以上

        由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也 可以自己写响应式。

        关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异

• 优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

• 渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

• 
  

区别：

• 是从复杂的现状开始，并试图减少用户体验的供给

• 则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

• 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

        href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img