盒子模型基础知识

目录

一.  文档流（normal flow）

二.布局相关样式

1.内容区 content：

2.边框（border）

   a. 边框的宽度  border-width

   b.边框的颜色  border-color

   c.边框的样式  border-style

   d.边框 border

3.内边距  padding  

   a.可以单独设置某一边的内边距

   b、内边距padding简写

4. 外边距  margin

   a.设置外边距

   b. margin简写

---

一.  文档流（normal flow）

        网页是一个多层的结构，css可以给每一层设置样式，

        最终我们看到是最上面的一层。

        文档流是网页最底下的那一层

        元素分为两种状态：在文档流中，脱离文档流

        之前将元素分为三类，块元素、行内元素、行内块元素

        分别具有一些特点，这些特点都是元素在文档流中的特点

        块元素：

                 不会独占一行，宽是父元素内容区宽度，高是被内容撑开

        行内元素：

                 不会独占一行，宽高是被内容撑开，不可以自定义宽高

        行内块元素：

                 兼具块元素，行内元素的特点

         注意：

                1、一旦元素脱离文档流，以上的分类，以上分类的特点都不复存在

                2、我们创建的元素默认是在文档流

二.布局相关样式

       文档流默认的布局，浮动，定位，弹性盒子等

      盒模型、盒子模型、框模型（box model）

      网页中也有很多的元素，将各种元素摆放在合适的位置，

      盒模型将页面所有元素的形状都统一了，你在布局时，

      只需要考虑到元素的大小即可

          盒模型                   

          内容区 content           

          内边距 padding           

          边框   border           

          外边距 margin           

       盒子的大小：内容区、内边距、边框 有关系，跟外边距是没有关系

1.内容区 content：

         width:; 内容区的宽

         height:;  内容区的高

2.边框（border）

       边框用来隔开盒子内部和盒子外部

       设置边框，三个要素，缺一不可   宽度、颜色、样式

    a. 边框的宽度  border-width

       1.可以设置多个值，以空格隔开即可

            4个值   上  右  下  左

            3个值   上  左右   下

            2个值   上下  左右

            1个值    上下左右

        2.单独设置某一边的宽度

          border-top-width: ;  

          border-bottom-width: ;

          border-left-width: ;

          border-right-width: ;

       3.border-width  是由默认值，默认大小在1-3px

     b.边框的颜色  border-color

          1、可以设置多个值

             规则跟border-width是一样

          2、单独设置某一边的颜色

               border-XXX-color:;

                XXX:top、right、bottom、left

          3、小箭头的写法

          border-color: transparent  transparent orange transparent ;

          4、border-color 有默认值，默认值是黑色

      c.边框的样式  border-style

           1、边框样式的种类

              solid   实线

              dotted  点状的虚线

              dashed  虚线

              double  双线

          2、可以写多个样式  

          规则跟border-width一样

          3、单独设置某一边样式

            border-XXX-style:;

                XXX:top、right、bottom、left

          4、border-style 默认值是none

      d.边框 border

         1、语法： border: 大小 颜色 样式;

             三要素顺序是无所谓

         2、单独设置某一边的边框

        border-top

        border-right

        border-bottom

        border-left

        3、 border-bottom: none;  不要某边边框  

3.内边距  padding  

    是边框和内容区之间的距离

   a.可以单独设置某一边的内边距

        padding-top:;

        padding-right: ;

        padding-bottom:;

        padding-left:;

    b、内边距padding简写

         可以写多个值，规则跟border-width是一样

4. 外边距  margin

      不影响盒子的大小，可以改变盒子的位置

   a.设置外边距

       margin-top   设置元素上外边距，如果正值,元素向下移动,如果负值，元素向上移动

       margin-right 设置元素右外边距，元素是没有效果

       margin-botoom 设置元素下外边距，正值，元素自己不懂，会挤下面的元素向下移动，负值，下面的元素向上移动

       margin-left  设置元素左外边距，正值，元素向右移动，负值，元素向左移动

   b. margin简写

       margin 可以设置多个值，规则跟padding一样