css基础选择器和盒模型

拓展：浏览器一次可以向服务器并发8个请求，第九个需要等到下一次

1、元素的显示方式

      div标签：块级元素(block)独占一行

      span标签：行级元素(inline)不会独占一行

（1）、块级(block)标签的特点：

           1、独占一行

           2、可以设置尺寸

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

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

（2）、行级inline元素的特点：对margin左右，padding左右支持较好，上  下 间距慎用

           1、不会独占一行可以与其他行级元素并排

           2、不支持尺寸设置

           3、大小由内容决定

（3）、inline-block行块级的特点

           1、支持盒模型，但不会独占一行，一行里面可以显示多个

           2、可以设置宽高

2、盒模型

（1）、盒模型的具体内容由外边距margin border边界 padding内边距 内容尺寸width/height 四种样式组成的

           盒子的外边距：margin

           盒子的边框：border

           盒子的内边距：padding

           盒子的内容：内容

(2)、margin外边距盒子与盒子之间的间距

       margin-top

       margin-right

       margin-bottom

       margin-left

       连写margin:0 0 0 0 ;上右下左

      margin:0 0;上下 左右

      margin:0;四个方向

margin误区：

      1、 如果小盒子外面的大盒子没有边框，设置小盒子margin的时候大盒子会一块移动

            解决方案：1、在大盒子样式中设置overflow：hidden或者float：left

                              2、给大盒子设置一个边框

（3）、padding:内边距会影响盒子的大小

          padding设置选项与margin一样

（4）、盒子模型分为标准盒子模型和怪异盒子模型

     怪异盒模型样式中有box-size:border-box;不改变盒子的尺寸，而使内容的尺寸缩小

     标准盒模型 内容尺寸(width*height)

                        盒子尺寸(width,height,padding,border)

                        区域尺寸(width,height,padding,border,margin)

(4)、margin与padding对块级元素和行级元素得作用

      margin、padding对块级元素正常影响

     margin左右设置、padding左右设置对行级元素有用，上下慎用

（5）、总结：盒子与盒子之间用margin ，盒子内部用padding ，盒子尺寸尽量用auto

3、css基础选择器

1、基础选择器--通配选择器：作用于所有的标签，无论标签有没有在文档中出现

   * {

           ...........

   }

2、基础选择器--标签名选择器：作用于一类标签,通过标签名称，重置标签的样式

div {

      width: 200px;

      height: 200px;

      background-color: pink;

}

3、基础选择器--群组选择器：选择器1，选择器2，...{} 作用于列出的标签，常用于优化代码，减少文档的体积

.class,h1,h2 {

                    margin: 0;

                    padding: 0;

}

4、基础选择器--类选择器： .类名{}

使用场景：可以应用于各种场景，是最常用的选择器，class名可以取多个，多个class名之间用空格隔开，主要用于具有相同样式的元素的设置

.f10 {

        font-size: 10px;

}

.auto {

        margin: 0 auto;

}

5、基础选择器--后代选择器：选择器1 选择器2 选择器3 {}

样式作用于最后一个选择器，前面的选择器知识一个过滤条件，帮助我们定位到最后一个选择器

span div {

              /*作用于span里面的div*/

}

4、css代码样式（存放位置）

（1）、行间样式

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

缺点：1、容易产生重复的代码，造成文档体积过大

             2、不利于维护

             3、不符合结构与样式分离的规范

   综上所述：不建议使用行间样式

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

       不会产生额外的请求

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

       代码复用不方便

       适合单页面网站的应用

<style>

         body {

               margin: 0;

               padding: 0;

        }

</style>

(3)、外部样式

首先在.html文件中利用link标签引入.css文件

在.css文件中直接写样式，不用style标签

优点：1、利于后期维护

           2、可以重复使用

           3、完成实现结构与样式的分离

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