第二天：html中块行级、margin和padding、盒模型、css选择器和样式

一.块级和行级

1.display：显示；

    display：block | inline | inline-block | none;      显示为块级元素 | 显示为行级元素 | 显示为行块级元素 | 不显示 

2.块级标签特点：

  （1）独占一行； （2）可以设置尺寸；

  （3）没有明确宽度的时候，宽度由父级决定；

  （4）没有明确高度的时候，高度由内容决定；

  （5）支持margin 、padding；

3.行级标签特点

（1）不会独占一行，可以与其他行级元素并排；

（2）不支持尺寸设置；

（3）对margin左右、padding左右支持较好，上下间距慎用（谨记）；

4.行块级标签特点 （display：inline-block;）

     支持盒模型，但不会独占一行。

二.margin与padding

 1.margin

（1）margin    外边距 （盒子与盒子之间的距离 | 盒子外部的距离）

margin-left: auto | px 左边距        margin-right: 右边距

margin-top: 上边距                      margin-bottom: 下边距

（2）margin:0 0 0 0;上   右   下   左

margin:0 0 0;上   左右   下

margin:0 0;上下    左右

margin：0；四个方向

2.padding

（1）padding  内边距  （盒子与盒子内元素之间的距离 ）

（2）padding：x  x  x  x；内容同margin一样；

三.盒模型

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

2.盒子模型分为标准盒模型，与怪异盒模型

(1)标准盒模型:  box-sizing：content-box ;

(2)怪异盒模型：box-sizing：border-box ;

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

四.css样式

1.css内部样式

优点：

（1）不会产生额外请求；

（2）初步实现结构与样式的分离；

（3）适合单页面网站应用；

缺点：代码复用不方便；

2.css行间样式（综下所诉：不建议使用它）

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

缺点：

（1）容易产生重复的代码，造成文档体积变大；

（2）不符合结构与样式分离的规范；

（3）不利于维护；

3.css外部样式

优点：

（1）有利于后期维护；

（2）可以重复使用；

（3）完成实现结构与样式的分离；

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

五.css选择器—基础选择器

1.通配选择器：作用于所有标签，无论标签有没有写、有没有出现，都起作用；

 *  {

     }

2.基础选择器-群组选择器：选择器1，选择器2，...{

}      使用场景：用于优化，减少文档体积。

3.基础选择器-类选择器：. 类名称{

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

class 命名规范：不要以数字开头、尽量取得有意义、多个单词建议使用 _ 连接、尽量不要超过7个。

4.基础选择器-后代选择器：选择器1 选择器2 选择器3 ...{

}        样式只作用于最后一个选择器，前面的只是过滤条件，帮助我们定位。

拓展：

使用margin设置盒子时，BFC 机制：会将父级的盒子一起带下来

解决办法：（1）设置边线border；（2）overflow：hidden；（3）float：xxx（left）；