来到重新学习基础的第二天，我们主要加深了盒子模型的理解，了解到标准盒模型与怪异盒模型的区别，和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名用空格隔开，主要用于多个样式相同的元素设置上
<div class="">我是div1</div>
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的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。）
网友评论