CSS基础问题

1、css引入问题

本来以为css引入是很简单的问题，但是在写demo中，使用连接方式引入就出现了问题，找了半天，还是说一下问题吧。

在引入时没有写rel="stylesheet"，最后导致浏览器不加载css文件。经过在在W3C上查找，rel为link标签的属性 作用为规定当前文档与被链接文档之间的关系。有很多属性只有stylesheet得到了多数浏览器的支持，引用外部样式表。

在引入css中，目前主要有4种，行内式、内嵌式、导入式、链接式。

导入式和链接式的区别在于导入式在整个文档加载完成后，浏览器才会去加载css。链接式在加载主体页面之前加载css。

在项目中经常使用链接式导入。

盒子模型是css基础中比较重要的内容之一，假设每个元素是一个矩形，它包括内容、边框、外边框、内边框组成，如下：

 

为了兼容老式浏览器有两种盒子模型。一种是标准型一种是混合型

浏览器根据DOCTYPE是否存在以及使用那种DTD来选择要使用的呈现方式。如果HTML文档有完整的DOCTYPE，那么它一般以标准模式呈现。相反，如果文档的DOCTYPE不存在或者形式不正确则导致HTML以混杂模式呈现。

标准型宽度计算公式：

width + padding-left + padding-right + border-left-width + border-right-width

高度计算公式：

heigth + padding-top +padding-bottom + border-top-width + border-bottom-width

在最近的一个项目中，需要实现通过计算每个单词项的高度来计算可见区域能显示单词的个数并对使单词列表可以上下自动的上拉下拉效果，因为没有计算边框高度而导致错位问题的出现。

混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。另外在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。

混杂模式在ie9下已经得到验证，使用js获取的宽度是css中设定的值，但是使用jquery获取的宽度为内容的宽度

在Jquery中和js中获取的宽度不一样，demo中有演示。

在jquery中获取width的代码如下：

可见jquery中是从实际渲染后css中来获取的width或者height的值。

2、overflow内容

在写js作业时遇到的问题，overflow失效问题。最后在实现拉动效果也主要是利用了overflow属性

Overflow属性 （visible，hidden，scroll，auto）

关于超出div的情况如下：

通常一个盒子的内容是被限制在盒子边界之内的。但有时也会产生溢出，即部分或全部内容跑到盒子边界之外。溢出将在满足下列条件之一时出现：

1. 一个不换行的行元素宽度超出了容器盒子宽度。

2. 一个宽度固定的块元素放在了比它窄的容器盒子内。

3. 一个元素的高度超出了容器盒子的高度。

4. 一个子孙元素，由负边距值引起的部分内容在盒子外部。

5. text-indent属性引起的行内元素在盒子的左右边界外。

6. 一个绝对定位的子孙元素，部分内容在盒子外。但超出的部分不是总会被剪裁。子孙元素的内容就不会被子孙元素和其包含块之间的祖先元素的overflow的设置所剪裁。

看Demo

Demo下载地址