盒模型及标签

今天学习的第二天，今天主要学习了盒模型、标签的分类、CSS三种引入方式以及CSS选择器

1.盒模型：

    盒模型分为标准盒模型以及怪异盒模型。

   标准盒模型的内容尺寸：width*height;盒子尺寸：（width+padding+border）*（height+padding+border）；盒子的区域尺寸：（width+padding+margin+border）*          （height+padding+margin+border）。

   怪异盒模型的内容尺寸：（width-padding-border）*（height-adding-border）；盒子尺寸：width*height；盒子的区域尺寸：（margin+margin）*（height+margin）。

   怪异的盒模型一般出现在IE6，IE7，IE8。

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

2.标签的分类

   一般标签分为block，inline，inline-block三类

  2.1 block标签的作用：独占一行，不与其他标签同行排列，可以设置宽高，当没有设置宽高时，他的宽会默认其父级的宽，高则由内容撑开

  2.2 inline标签的作用：可以和行级标签以及行块标签同行排列，不能设置宽高，宽高由内容撑开；

  2.3 inline-block标签的作用：不会独占一行，可以和行级标签以及行块标签同行排列，可以设置宽高，但是有个缺点，在同行排列时如果一个有文字一个没有文字时，他会文字的底部 

   和标签的头部同行排列，要设置基线对齐，或其他方式才能对齐，一般用在列表与结构相同的盒子中。

3.CSS的三种引入方式

   行间样式，内部样式以及外部样式

   3.1行间样式：写在标签内部，例如：<div style="width:100px;height:100px;border:1px solid red;"></div>

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

        缺点：会产生大量的代码冗余，导致文档体积变大；不利于维护；不符合样式与结构分离的规范

    3.2内部样式：写在head标签里面的，例如

        优点：初步实现了样式与结构分离的规范；不会产生额外的请求；适合单网页网站

        缺点：代码不能复用

    3.3外部样式，写在外部的CSS里面的，引入方式为：<link rel="stylesheet" href="css/index.css"/>

        优点：完全符合样式与结构的分离；便于维护；代码可以重复使用

        缺点：会产生额外的请求（但后期我们会学习其他的可以去除这个缺点）。

    综上所述，我们一般都会使用外部样式。

4.CSS选择器

  选择器分为基础选择器-统配选择器，基础选择器-标签选择器（tags），基础选择器-群组选择器，基础选择器-类选择器 .类名称以及后代选择器

      4.1统配选择器（），使用方式：*{}，作用于所有标签，无论你有没有写，有没有出现在文档中

      4.2标签选择器（tags）作用于一类标签，方式是通过标签名称，如 div{}

      4.3群组选择器，用于优化代码，减少文档体积,如:div,.box,span,h1,h2,li,ul{}

      4.4类选择器 .类名称，可以用于各种场景，是我们最常用的选择器，class名可以多个，多个class名用空格隔开。

主要用于具有相同样式的元素,如:<div class="box1 box2 box3 li10"></div>

                                                   .box1{width:100px;}

                                                     .box2{background:gray;}

                                                     .box3{border:1px solid red;}

                                                      .li10{font-size:12px;}

      4.5后代选择器  选择器1 选择器2 ...只作用于最后一个选择器，前面的选择器只是过滤条件，帮助我们定位如:div div div span{}

通过一天的学习对知识点更加的巩固与掌握，但是肯定也会有不足之处，我相信这总结的肯定会有很多漏洞，我相信通过日积月累肯定会弥补过来的。