一、盒模型
1.1、盒模型的概念：在HTML中每一个元素都是一个盒模型，由外边距margin、边框border、内边距padding和content内容构成。如下图所示。
1.1.1、margin外边距是盒子与盒子之间的间距，不会影响盒子的大小。
1.1.2、border边框，类似于给盒子盖了城墙。其p值影响着盒模型的大小。
1.1.3、padding内边距，内容与盒子的距离。其p值影响着盒模型的大小。
1.1.4、content内容，是有元素本身的宽高决定，一次其宽高就是内容的大小。
1.2、盒模型的分类：
1.2.1、标准盒模型
所谓标准盒模型就是在谷歌，火狐，欧朋等浏览器中显示的盒模型。盒模型的尺寸大小由content组成，其大小由元素本身的宽高决 定。盒模型的盒子尺寸由content、border和padding组成，而盒模型的区域是说整个盒子所占的面积，即大小由content、padding、 border、margin构成。
在标准模式下，一个块级元素的盒模型总宽度=width + margin(左右) + padding(左右) + border(左右)
在标准模式下，一个块级元素的盒模型总高度=height + margin(左右) + padding(左右) + border(左右)
1.2.2、怪异盒模型
见名知意，就是盒子在浏览器中呈现出来的现象很奇怪，通常会在IE6+以上的浏览器中会显示。在标准盒模型里面增加了一个box- sizing的样式，通过这个样式可以设置样式值border-box和content-box
在怪异模式下，一个块级元素的盒模型的总宽度=width + margin（左右）（即width已经包含了padding和border值）
在怪异模式下，一个块级元素的盒模型的总高度=height + margin（左右）（即height已经包含了padding和border值）
二、CSS的引入方式
2.1、行间样式
行间样式即在div这一行中书写CSS样式，例如 <div style="width: 100px;height: 100px;"></div>，这样写的好处不会产生额外的数据请 求，使用户等待时间减少，但是另一方面增加了代码的堆积，不符合样式与结构的分离，而且不利于后期维护工作。所以即使其优点很好 但是弊大于利，在日常开发中不建议使用行间样式
2.2、内部样式
内部样式实在该HTML中的<head>里面书写CSS样式，例如：<style> div { width: 100px;height:100px; } </style>，内部样式基于行间 样式优点，即不会产生额外的数据请求，而且初步实现样式与结构的分离，但内部样式再好也只是放在内部，对于重复使用该样式造成困 扰。所以建议 内部样式一般用于单页面网页应用。
2.3、外部样式
外部样式即写在HTML外面的样式，使用时需要用link标签引入，例如<link rel="stylesheet" href="xxx.css">。外部样式实现了样式与结 构的分离，而且方便复用，减少了代码的冗余，而且方便后期维护，�于此同时也有其弊端，即产生额外的请求，但是后期我们会使用相关 工具解决该问题。所以在项目开发中建议使用外部样式。
三、选择器
3.1、通配选择器
*{padding：0px} 通配选择器作用于所有元素，不论是写的还是没写的。作用域太广，一般不建议使用，因为细节决定一切吧，就像刚 开始学习H5会从最基础的Sublime软件开始，一步一个脚印。
3.2、标签名选择器
ol {list-style: none;} 标签名选择器作用于一类标签，方式如上述例子，通过标签查找。一般在重置标签样式的时候使用。
3.3、群组选择器
div，span {margin：10px;} 使用群组选择器可以优化代码，减少文档体积
3.4、类选择器
.box {width: 100px;height: 100px;} ，类选择器是我们最常用的一种选择器，一个元素可以有多个类名，中间用空格隔开。通常在设置相 同样式的元素上使用。
3.5、子代选择器
div div span {padding: 100px;},子代选择器作用于最后一个元素，前面的元素用于过滤，可以实现快速查找。
网友评论