css基础初始及盒子模型初解

来到重新学习基础的第二天，我们主要加深了盒子模型的理解，了解到标准盒模型与怪异盒模型的区别，和css的三种引入方式的优缺点，还有css几种基本选择器的选择使用场景。

1.浅谈盒子模型

盒子模型作为前端面试题之一的存在，今天刷新了我对它的理解，并不仅仅只是通过将border，content，margin，padding用盒子的方式体现出来

盒子模型分为两种标准盒模型 和怪异盒模型（IE盒模型），标准盒模型中可以通过box-sizing: border-box将其变成怪异盒模型

1.1.标准盒模型

它的内容： width*height；

它的盒子大小：（width+padding+border）*（height+padding+border）

它的区域尺寸：（width+padding+border+margin）*（height+padding+border+margin）

标准盒模型

1.2.怪异盒模型

它的内容： （width-padding-border）*（height-padding-border）

它的盒子大小： width*height

它的区域大小：（width+margin）* （height+margin）

怪异盒模型

2.css的三种引入方式

2.1行间样式表

行间样式表

优点：不会产生额外的请求

缺点： 容易产生重复的代码，造成文档体积变大，不利于维护，有违样式与结构分离的规范

2.2 内部样式表

优点：不会产生额外的请求

初步实现结构与样式的分离

缺点：代码复用不方便

适合单页面网站应用

2.3 外部样式表

优点：利于后期维护，可以重复使用，实现了结构与样式的分离

缺点：会产生额外的请求（后期我们会借助工具抹平这个缺点）

3.几种基础CSS选择器的使用

3.1 通配选择器

* {

}

使用场景：作用于所有标签，无论你有没有写，有没有在文档中出现

3.2标签选择器

div {

}

使用场景：作用于一类标签，方式是通过标签名称，使用场景：重置某类标签的默认样式。

拓展：当img标签被a 标签包裹时候，会产生border和outline；

3.3 群组选择器

使用场景：常用于优化代码，减少文档体积

3.4后代选择器 选择器1 选择器2 选择器3 选择器4 {

}

使用场景：样式作用于最后一个选择器，前面的选择器只是过滤条件，方便定位

3.5 类选择器

使用场景：可以应付各种场景，是我们最常使用的一个选择器。class名可以多个，多个class名用空格隔开，主要用于多个样式相同的元素设置上

我是div1

4.inline-block 适用于结构相同的布局，可以设置宽高支持盒模型，并且不独占一行。

inline标签 不可以设置宽高，宽高由内容支撑开，inline标签对margin左右，padding左右支持较好，上下间距慎用,inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

5.相对路径于绝对路径

相对路径 相对当前文件，确定引入图片的位置

使用场景：1.在html中引入css文件，js文件，图片等 2.在css中引入图片；

绝对路径

绝对路径

6.关于margin与padding

盒子与盒子之前margin，盒子内部用padding，盒子尺寸尽量用auto；

7.BFC应用1

防止margin重叠（方法：给父级加上border，触发BFC）

浮动相关问题 （使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。）