盒模型的理解与群组选择器

每天写博客，就像每日一记，相似于日记，又不同于日记，这玩意是要发布的，私密的东西还是悠着点写，虽然没什么人看。闲话少说，谈谈对今天学习的理解与认识吧。今天老师讲了很多，而且对知识挖的深且广，打破了我以往对前端的认识，就像我本来天天裤衩背心的穿着，突然来了个人，脱光我的装束，并且塞给了我一套正装。

1，inline 和 block 含义与区别

display:inline | block | inline-block|none;

block标签的特点：独占一行，可以设置宽高，宽度不设置的时候由父级决定，高度不设置的时候由内容决定，支持margin和padding。

inline标签的特点：不独占一行，不可以设置宽高，margin左右，padding左右设置可以，上下间距慎用（谨记）；

inline-block标签的特点：支持盒模型，不独占一行；

2，margin 和 padding

margin（外边距）：外边距是指元素的与元素之间的距离，也就是，元素的border距离其他元素的border的距离。margin-left margin-right margin-top margin-bottom 代表四个方向单位px auto auto是自适应的，给元素margin-left margin-right 元素会向左或向右靠拢，同时给左右设置auto元素居中，注意不能给上下设置auto，margin 可以设置 一个值 两个值 三个值 四个值，一个值的时候代表四个方向，两个值的时候代表上下和左右，三个值的时候代表上和左右和下，四个值的时候代表上，右，下，左。margin通常作用于元素与元素之间的距离，元素嵌套上下margin慎用

padding（内边距）：内边距是指元素border距离内容之间的距离；其他属性与margin一样。

盒子与盒子之间用margin 盒子内部用padding 盒子尺寸尽量用auto

3，相对路径和绝对路径

相对路径使用场景：在html中引入css文件，图片文件，JS文件.在css文件中引入图片文件

绝对路径是指一个文件所在的完整路径，使用场景：在浏览器中查找某文件

4，什么是盒模型

盒子模型由 外边距margin border边界 padding内边距 内容尺寸width/height 四种样式组成的

盒模型包括标准盒模型(box-sizing:content-box)和怪异盒模型（box-sizing:border-box）

标准的盒模型是包括内容尺寸 盒子尺寸 区域尺寸 内容尺寸：content 盒子尺寸：content+padding+border 区域尺寸：content +padding+border+margin；

怪异盒模型是只有盒子尺寸和区域尺寸，盒子尺寸：content+padding+border区域尺寸：content +padding+border+margin；给元素设置padding border 盒子尺寸不会变 但是content会缩小；

5,css的三种引入方式的优缺点

行间样式：

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

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

内部样式：在html文档中开辟一个书写css语句的区域

不会产生额外的请求，初步实现结构与样式的分离，代码复用不方便，适合单页面网站的使用（如：移动端的页面）；

外部样式：

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

缺点：会产生额外的请求(但是后期我们会借助工具抹平这个缺点)；

6，css选择器-基础选择器

通配选择器：*{css语句;}作用于所有标签，无论你这个有没有写，有没有在文档当中出现 不建议使用。

标签名选择器：标签名{css语句;}作用于一类标签，方式是通过标签名称,使用场景：重置某类标签的默认样式。

群组选择器:选择器1,选择器2,...{css语句;} 使用场景：用于优化代码，减少文档体积

类选择器：.类名称{css语句;}命名规范：不要以数字开头，尽量使用有意义的单词（见名知意），多个单词用下划线连接

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

后代选择器：选择器1 选择器2 选择器3...{css语句;}样式作用于最后一个选择器，前面的选择器只是用来过滤条件，方便定位。